css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              %body
  %header#first
    .header-content
      .inner
        %h1 What's New in Bootstrap
        %h5.wow.fadeIn.text-normal.wow.fadeIn A free, one-page theme to highlight the new features
        %a.btn.btn-primary-outline.btn-xl.page-scroll.wow.fadeInUp.m-t-3{:href => "#one"} Get Started
  %nav#topNav.navbar.fixed-top.navbar-toggleable-sm
    .container
      %button.navbar-toggler{"data-target" => "#collapsingNavbar", "data-toggle" => "collapse", :type => "button"}
        %span ☰
      %a.navbar-brand.page-scroll{:href => "#first"} Bootstrap 4
      #collapsingNavbar.collapse.navbar-collapse
        %ul.navbar-nav
          %li.nav-item
            %a.nav-link.page-scroll{:href => "#one"} Cards
          %li.nav-item
            %a.nav-link.page-scroll{:href => "#two"} Flexbox
          %li.nav-item
            %a.nav-link.page-scroll{:href => "#examples"} Examples
          %li.nav-item
            %a.nav-link.page-scroll{:href => "#three"} 5 Tiers
          %li.nav-item
            %a.nav-link.page-scroll{:href => "#four"} More
        %ul.nav.navbar-nav.ml-auto
          %li.nav-item
            %a.nav-link.page-scroll{"data-toggle" => "modal", :href => "#aboutModal", :title => "A free Bootstrap theme"} About
  %section#one
    .container.wow.fadeInUp
      %h2 Cards
      %p.lead
        What you notice first in
        %a{:href => "https://v4-alpha.getbootstrap.com/"} Bootstrap 4
        is that
        %code .panel
        and
        %code .well
        have been replaced by the
        = succeed "." do
          %code .card
        %a{:href => ""} Bootstrap 4 Cards
        can be singular, grouped together (as shown) or
        = succeed "." do
          %a{:href => ""} equal height
      .card-group
        / card
        .card
          %img.card-img-top.img-fluid{:alt => "Card image cap", :src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg"}/
          .card-block
            %h4.card-title Consise
            %p.card-text Cards are a good way to display content composed of different types of objects. They’re well-suited for presenting similar objects whose size or supported actions vary, like headings and photos with captions.
        / card
        .card
          %img.card-img-top.img-fluid{:alt => "Card image cap", :src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample19.jpg"}/
          .card-block
            %h4.card-title Grouped
            %p.card-text
              Use card groups to render equal height cards without gutters between the cards. Use
              %code .card-deck
              for cards that aren’t attached to each another.
        / card
        .card
          %img.card-img-top.img-fluid{:alt => "Card image cap", :src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample14.jpg"}/
          .card-block
            %h4.card-title Same Height
            %p.card-text A frequent problem occurs when you have multiple items in a row with content of varying height. Thanks to flexbox (and display:table) we now have equal height cards!
  %section#two.bg-alt
    .container
      .row
        .col-lg-12.text-center
          %h2.mt-0.text-primary Flexbox
          %hr.primary/
    .container.wow.fadeInUp
      .row
        .col-lg-4.col-md-4.text-center
          .feature
            %i.icon-lg.ion-ios-grid-view-outline.wow.fadeIn{"data-wow-delay" => ".1s"}
            %h6.text-uppercase Easier
            %p.text-muted.m-b-0
              Flexbox provides
              %a{:href => "https://v4-alpha.getbootstrap.com/getting-started/flexbox"} simpler, more flexible layout
              options like vertical centering.
        .col-lg-4.col-md-4.text-center
          .feature
            %i.icon-lg.ion-social-sass.wow.fadeInUp
            %h6.text-uppercase Sass-y
            %p.text-muted.m-b-0 Use SASS to easily customize your Bootstrap 4 projects.
        .col-lg-4.col-md-4.text-center
          .feature
            %i.icon-lg.ion-social-css3-outline.wow.fadeIn{"data-wow-delay" => ".1s"}
            %h6.text-uppercase It's Modern
            %p.text-muted.m-b-0
              Introduced in CSS3, flexbox won't work in older browsers like
              = succeed "." do
                %a{:href => "http://caniuse.com/#feat=flexbox"} IE9
  %section#examples
    .container.text-center
      .row
        .col-lg-10.offset-lg-1.col-12.text-center
          %h1.mt-0.text-primary Bootstrap 4 Examples
          %hr.primary/
        .col-sm-6.text-center
          %h5.mt-0.text-primary Layouts &amp; Templates
          .nav.flex-column.text-center
            %a.nav-link{:href => "//www.codeply.com/go/wECEBeWpLO/bootstrap-4-sticky-footer-flexbox"} Sticky Footer
            %a.nav-link{:href => "//www.codeply.com/go/KrUO8QpyXP/bootstrap-4-dashboard"} Dashboard
            %a.nav-link{:href => "//www.codeply.com/go/i8xuvOmVw3/bootstrap-4-full-height-jumbotron-vertical-center"} Full-height Jumbotron Vertical Center
            %a.nav-link{:href => "//www.codeply.com/go/i8xuvOmVw3/bootstrap-4-affix-nav-and-sidebar-layout"} Header, Affix Navbar &amp; Sidebar
            %a.nav-link{:href => "//www.codeply.com/go/JbaVzJCNLJ/bootstrap-4-off-canvas-sidebar"} Off-canvas Sidebar
        .col-sm-6.text-center
          %h5.mt-0.text-primary Code Snippets
          .nav.flex-column.text-center
            %a.nav-link{:href => "//www.codeply.com/go/kTGlK9Axdk/bootstrap-4-navbar-align-center"} Navbar Align Center
            %a.nav-link{:href => "//www.codeply.com/go/kTGlK9Axdk/bootstrap-4-navbar-align-right"} Navbar Align Right
            %a.nav-link{:href => "//www.codeply.com/go/1ZFF5CEXM5/bootstrap-4-custom-navbar-color"} Custom Navbar Color
            %a.nav-link{:href => "//www.codeply.com/go/q0b6ILuRyx/bootstrap-4-vertical-sidebar-nav-with-submenu"} Multi-level Vertical Side Nav
            %a.nav-link{:href => "//www.codeply.com/go/C3ZSBLzAZC/bootstrap-4-card-examples"} Card Examples
  %section#three
    .container-fluid
      %h5.text-primary.text-center.text-uppercase Now there are 5 Breakpoints
      %p.text-center
        %small To accomodate a variety of devices and screen widths
      .row
        .col-sm-10.offset-sm-1.col-12.offset-0
          .row
            .col-md-2.offset-md-1.offset-sm-0
              .card-block.text-center
                %h1.card-title XS
                %h3.text-muted &lt;34 em
                %hr.primary.hidden-sm-up/
            .col-md-2
              .card-block.text-center
                %h1.card-title SM
                %h3.text-muted ≥34 em
                %hr.primary.hidden-md-up/
            .col-md-2
              .card-block.text-center
                %h1.card-title MD
                %h3.text-muted ≥48 em
                %hr.primary.hidden-lg-up/
            .col-md-2
              .card-block.text-center
                %h1.card-title LG
                %h3.text-muted ≥62 em
                %hr.primary.hidden-xl-up/
            .col-md-2
              .card-block.text-center
                %h1.card-title XL
                %h3.text-muted ≥75 em
                %hr.primary/
      .row
        .col-10.offset-1
          .row
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "//s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample14.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card.card-inverse
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample15.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample16.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample16.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.card-img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample11.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample11.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample23.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.card-img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample9.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample9.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample5.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample5.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-2.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample4.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample4.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-3.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.card-img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-3.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample2.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample2.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-3.col-lg-3.col-md-4.col-sm-6.text-center
              .card
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample7.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample7.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
            .col-xl-3.offset-xl-0.col-lg-3.offset-lg-0.col-md-4.offset-md-4.col-sm-6.text-center
              .card.m-x-auto
                %img.img-fluid{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample21.jpg"}/
                .card-img-overlay
                  %h4.card-title.text-center
                    %a.text-light{"data-src" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample21.jpg", "data-toggle" => "modal", :href => "#galleryModal"} view
    %br/
  %aside.bg-alt
    .container.text-center
      %h2.text-primary.text-center The Grid is More Flexible
      %hr.primary/
      %br/
      .row.wow.fadeInUp
        .col-md-3.col-sm-6.col-12.text-center
          %h3 Start
          %i.icon-lg.ion-ios-speedometer-outline.wow.pulse
          %h1.text-primary 100
        .col-md-3.col-sm-6.col-12.text-center
          %h3 Migrate
          %i.icon-lg.ion-ios-location-outline.wow.pulse
          %h1.text-primary 3421
        .col-md-3.col-sm-6.col-12.text-center
          %h3 Build
          %i.icon-lg.ion-ios-pulse.wow.pulse
          %h1.text-primary 4%
        .col-md-3.col-sm-6.col-12.text-center
          %h3 Play
          %i.icon-lg.ion-ios-game-controller-b-outline.wow.pulse
          %h1.text-primary 50%
      %hr/
      %br/
    .container
      .row
        .col-sm-6
          6
        .col-sm-6.text-normal
          .card.bg-primary 6 units
        .col-sm-5
          5
        .col-sm-7.text-normal
          .card.bg-primary 7 units
        .col-sm-4
          4
        .col-sm-8.text-normal
          .card.bg-primary 8 units
        .col-sm-3
          3
        .col-sm-9.text-normal
          .card.bg-primary 9 units
        .col-sm-2
          2
        .col-sm-10.text-normal
          .card.bg-primary 10 units
        .col-sm-1
          1
        .col-sm-11.text-normal
          .card.bg-primary 11 units
    %hr/
    .container
      .row
        .col-lg-2.text-normal
          .card.bg-primary 2
        .col-lg-10
        .col-lg-4.text-normal
          .card.bg-primary 4
        .col-lg-8
        .col-lg-6.text-normal
          .card.bg-primary 6
        .col-lg-6
        .col-lg-8.text-normal
          .card.bg-primary 8
        .col-lg-4
        .col-lg-10.text-normal
          .card.bg-primary 10
        .col-lg-2
        .col-lg-12.text-normal
          .card.bg-primary 12
  %section#four
    .container
      .row
        .col-12.col-lg-6
          %h2.text-nowrap Fonts got larger
        .col-12.col-lg-6.text-right
          %button.btn.btn-lg.text-normal.btn-outline-secondary Outline
          %button.btn.btn-lg.text-normal.btn-outline-primary Buttons
          %button.btn.btn-lg.text-normal.btn-outline-danger Are Here
        .col-12
          %br/
          %h1.display-4 Wow.
          %p.lead.text-justify Text is larger in Bootstrap 4. The default font size is now 16px. There are also new "Display headings" that really stand out. The new em based sizing is cool too.
      %hr/
      .row
        .col-md-6.col-12.text-center
          %nav.navbar.navbar-inverse.bg-inverse.navbar-toggleable.text-normal.rounded
            %ul.navbar-nav
              %li.nav-item.active
                %a.nav-link{:href => "#"} Home
              %li.nav-item
                %a.nav-link{:href => "#"} Features
              %li.nav-item
                %a.nav-link{:href => "#"} Pricing
              %li.nav-item
                %a.nav-link{:href => "#"} About
        .col-md-6.col-12
          %h2 Navbar
          %p.text-justify
            The new Bootstrap 4
            %code .navbar
            code is lighter. You can make it responsive using the Collapse component and
            %code .navbar-toggleable-*
            classes that enable you to control the breakpoint.
        .col-12.clearfix
          %hr/
        .col-md-6.col-12
          %h2 RIP icons, affix, etc..
          %p.text-justify
            Some components have been removed from Bootstrap 4. The Glyphicons icon fonts are no longer included, but it's easy to
            utilize another font like FontAwesome,
            %a{:href => "https://octicons.github.com/"} Octicons
            or
            = succeed "." do
              %a{:href => "http://ionicons.com/"} Ionicons
        .col-md-6.col-12.text-center
          .row
            .col-lg-3.col-md-3.col-6.text-center
              %a{"data-target" => "#alertModal", "data-toggle" => "modal", :href => "#alertModal"}
                %i.icon-lg.ion-ios-cloud--outline.wow.fadeIn
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-pie-outline.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-star-outline.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-heart-outline.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-pulse.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-refresh-outline.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-gear-outline.wow.fadeIn.text-primary
            .col-lg-3.col-md-3.col-6.text-center
              %i.icon-lg.ion-ios-timer-outline.wow.fadeIn.text-primary
        .col-12.clearfix
          %hr/
        .col-md-6.col-12
          .card.text-normal
            .card-block
              %ul.list-unstyled
                %li.text-capitalize
                  %code.text-lowercase text-capitalize
                  Capitalize each word
                %li.text-uppercase
                  %code.text-lowercase text-uppercase
                  Uppercase text
                %li.text-lowercase
                  %code text-lowercase
                  There is lowercase too
                %li.text-truncate
                  %code text-truncate
                  some longer text that won't wrap and will truncate with ellipsis at the end.
              %h6 Migration tips
              %ul.list-unstyled
                %li
                  %code well
                  \=
                  %code card card-block
                %li
                  %code panel panel-default
                  \=
                  %code card
                %li
                  %code pull-right
                  \=
                  %code float-right
                %li
                  %code img-responsive
                  \=
                  %code img-fluid
                %li
                  %code list-inline &gt; li
                  \=
                  %code list-inline-item
                %li
                  add
                  %code nav-item
                  to nav navbar &gt; li
                %li
                  add
                  %code nav-link
                  to nav navbar &gt; li &gt; a
                %li
                  the
                  %code active
                  class is added to
                  %code nav-item
                  for scrollspy
                %li
                  %code carousel-inner &gt; item
                  \=
                  %code carousel-item
                %li
                  %code table-condensed
                  \=
                  %code table-sm
                %li
                  %code input-lg
                  \=
                  %code form-control-lg
                %li
                  %code input-sm
                  \=
                  %code form-control-sm
              Here's a handy
              %a{:href => "http://upgrade-bootstrap.bootply.com/"} Bootstrap 3 to 4 upgrade tool
              to convert your code!
        .col-md-6.col-12
          %h2 Handy utilities
          %p.text-justify
            Several simple, but useful
            %a{:href => "https://v4-alpha.getbootstrap.com/components/utilities"} utility classes
            have been added like text, margin and padding helpers. There are
            also
            %a{:href => "https://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds"} contextual colors
            and
            %a{:href => "https://v4-alpha.getbootstrap.com/layout/responsive-utilities/"} responsive utility
            classes to hide content on
            specific breakpoints. There's even a new fluid Jumbotron!
  %aside.bg-alt
    .container.text-center
      .call-to-action
        %h2.text-primary Get Started
        %a.btn.btn-primary-outline.btn-lg.wow.flipInX.text-uppercase{:href => "http://bootstrap4.guide", :target => "ext"} Free
      %br/
      %hr/
      %br/
      .row
        .col-lg-10.offset-lg-1
          %h6.wide-space.text-center.text-uppercase Bootstrap is Built on these Standards
          .row
            .col-sm-3.col-6.text-center
              %i.icon-lg.ion-social-html5-outline{:title => "html 5"}
            .col-sm-3.col-6.text-center
              %i.icon-lg.ion-social-sass{:title => "sass"}
            .col-sm-3.col-6.text-center
              %i.icon-lg.ion-social-javascript-outline{:title => "javascript"}
            .col-sm-3.col-6.text-center
              %i.icon-lg.ion-social-css3-outline{:title => "css 3"}
  %section#last
    .container
      .row
        .col-lg-8.offset-lg-2.text-center
          %h2.margin-top-0.wow.fadeIn Get in Touch
          %hr.primary/
          %p We love feedback. Fill out the form below and we'll get back to you as soon as possible.
        .col-lg-10.offset-lg-1.text-center
          %form.contact-form.row
            .col-md-4
              %label
              %input.form-control{:placeholder => "Name", :type => "text"}/
            .col-md-4
              %label
              %input.form-control{:placeholder => "Email", :type => "text"}/
            .col-md-4
              %label
              %input.form-control{:placeholder => "Phone", :type => "text"}/
            .col-md-12
              %label
              %textarea.form-control{:placeholder => "Your message here..", :rows => "9"}
            .col-md-4.offset-md-4
              %label
              %button.btn.btn-primary.btn-block.btn-lg{"data-target" => "#alertModal", "data-toggle" => "modal", :type => "button"}
                Send
                %i.ion-android-arrow-forward
  %footer#footer
    .container
      .row
        .col-6.col-sm-3
          %h6.text-uppercase Bootstrap 4
          %ul.list-unstyled
            %li
              %a{:href => "https://medium.com/@bootply/bootstrap-4-whats-new-visual-guide-c84dd81d8387", :target => "ext"} What's New
            %li
              %a{:href => "http://codeply.com/tagged/bootstrap-4", :target => "ext"} Examples
            %li
              %a{:href => "https://getbootstrap.com", :target => "ext"} Official
            %li
              %a{:href => "http://www.codeply.com/go/p/bootstrap_4.0.alpha", :target => "ext"} Playground
        .col-6.col-sm-3.column
          %h6.text-uppercase About
          %ul.list-unstyled
            %li
              %a{:href => "#"} Contact Us
            %li
              %a{:href => "#"} Delivery Information
            %li
              %a{:href => "#"} Privacy Policy
            %li
              %a{:href => "#"} Terms &amp; Conditions
        .col-12.col-sm-3.column
          %h6.text-uppercase Stay Posted
          %form
            .form-group
              %input.form-control{:placeholder => "Tell us your email", :title => "No spam, we promise!", :type => "text"}/
            .form-group
              %button.btn.btn-primary{"data-target" => "#alertModal", "data-toggle" => "modal", :type => "button"} Subscribe for updates
        .col-12.col-sm-3.text-right
          %h6.text-uppercase Follow
          %ul.list-inline
            %li.list-inline-item
              %a{:href => "", :rel => "nofollow", :title => "Twitter"}>
                %i.icon-lg.ion-social-twitter-outline
               
            %li.list-inline-item
              %a{:href => "", :rel => "nofollow", :title => "Facebook"}
                %i.icon-lg.ion-social-facebook-outline
      %br/
      %span.float-right.text-muted.small
        %a{:href => "http://bootstrap4.guide"} Made by Themes.guide
        ©2015-2017 Company
  #galleryModal.modal.fade{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1"}
    .modal-dialog
      .modal-content
        .modal-body.text-center
          %img#galleryImage.center-block.img-fluid{:src => "//placehold.it/1200x700/222?text=..."}/
          %p
            %br/
            %button.btn.btn-primary.btn-lg{"aria-hidden" => "true", "data-dismiss" => "modal"}
              Close
              %i.ion-android-close
  #aboutModal.modal.fade{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1"}
    .modal-dialog
      .modal-content
        .modal-body.text-center
          %h2.text-center Bootstrap 4 Theme
          %h6.text-center A free, responsive template
          %p.text-center
            This is a customized, single page example template that demonstrates some of the new features to check out in Bootstrap 4. Some of the features include Google Montserrat fonts, animation using Dan Eden's animate.css and the WOW jQuery plugin to watch the scrolling.
          %p.text-center
            %a{:href => "http://bootstrap4.guide"} Descargar at Bootstrap4.guide
          %br/
          %button.btn.btn-primary.btn-lg{"aria-hidden" => "true", "data-dismiss" => "modal"} OK
  #alertModal.modal.fade{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1"}
    .modal-dialog.modal-sm
      .modal-content
        .modal-body.text-center
          %h2.text-center Nice Job!
          %p.text-center You clicked the button, but it doesn't actually go anywhere because this is only a demo.
          %p.text-center
            %a{:href => "https://medium.com/@bootply/bootstrap-4-whats-new-visual-guide-c84dd81d8387"} Learn More
          %br/
          %button.btn.btn-primary.btn-lg{"aria-hidden" => "true", "data-dismiss" => "modal"}
            OK
            %i.ion-android-close
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: #001A33;
  webkit-tap-highlight-color: #222;
  top: 0;
}


/* workaround modal-open padding issue */

body.modal-open {
  padding-right: 0 !important;
}

hr {
  max-width: 120px;
  border-width: 3px;
  opacity: 0.08;
  margin-top: 25px;
  margin-bottom: 25px;
}

hr.light {
  border-color: #fff;
  opacity: 1;
}

hr.primary {
  border-color: #007FFF;
  opacity: 1;
}

a {
  color: #007FFF;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
}

a:hover,
a:focus {
  color: #222;
  outline: 0;
}

p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.text-normal {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.wide-space {
  letter-spacing: 1.6px;
}

.icon-lg {
  font-size: 50px;
  line-height: 18px;
}

.bg-primary {
  background-color: #007FFF;
}

.bg-alt {
  background-color: #fff;
}

.text-faded {
  color: rgba(245, 245, 245, 0.7);
}

.text-dark {
  color: #001A33;
}

.text-light {
  color: #fff;
}

.text-light:hover,
.text-light:focus {
  color: #eee;
  text-decoration: none;
}

.text-primary {
  color: #007FFF;
}

section {
  padding: 70px 0;
}

aside {
  padding: 45px 0;
}

footer {
  padding: 45px;
  padding-top: 40px;
  background-color: #e0e0e3;
}

footer h4,
footer h6 {
  color: #fff;
}

.navbar {
  border-color: rgba(35, 35, 35, .05);
  background-color: #fff;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

.navbar-brand {
  color: #007FFF;
  padding: 1px;
  line-height: 1.90em;
  -webkit-transition: padding .2s ease-in;
  -moz-transition: padding .2s ease-in;
  transition: padding .2s ease-in;
  float: none;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: #007FFF;
}

.navbar .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: #001A33;
}

.navbar .navbar-toggle,
.navbar-default .navbar-collapse {
  border-color: transparent;
}

.navbar .navbar-nav > li>a,
.navbar .navbar-nav>li>a:focus {
  font-size: 12px;
  color: #001A33;
  text-transform: uppercase;
}

.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>li>a:focus:hover {
  color: #007FFF;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active:focus {
  color: #007FFF !important;
  background-color: transparent;
}


/* responsive nav */

@media(max-width:48em) {
  .navbar .navbar-nav>.nav-item {
    float: none;
    margin-left: .1rem;
  }
  .navbar .navbar-nav {
    float: none !important;
  }
}

@media(min-width:48em) {
  .navbar {
    border-color: transparent;
    background-color: #fff;
    min-height: 60px;
  }
  .navbar-brand {
    color: #007FFF;
    float: left;
    padding-left: 1px;
  }
  .navbar .navbar-brand:hover,
  .navbar .navbar-brand:focus {
    color: #001A33;
  }
  .navbar .navbar-nav > li > a,
  .navbar .navbar-nav> li > a:focus {
    color: #001A33;
    letter-spacing: 1.1px;
  }
  .navbar .navbar-nav > li > a:hover,
  .navbar .navbar-nav > li > a:focus:hover {
    color: #001A33;
  }
  #topNav {
    background-color: #fff;
  }
}

header {
  position: relative;
  min-height: auto;
  text-align: center;
  color: #001A33;
  width: 100%;
  background-color: #fff;
}

header .header-content {
  position: relative;
  width: 100%;
  padding: 100px 15px;
  text-align: center;
  z-index: 2;
}

header .header-content .inner h1 {
  margin-top: 0;
  margin-bottom: 0;
}

header .header-content .inner p {
  margin-bottom: 50px;
  font-size: 16px;
  font-weight: 300;
  color: #222;
}

@media(min-width:34em) {
  .icon-lg {
    font-size: 80px;
  }
  header {
    min-height: 100%;
  }
  header .header-content {
    position: absolute;
    top: 50%;
    padding: 0 50px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  header .header-content .inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;
  }
  header .header-content .inner h1 {
    font-size: 53px;
  }
  header .header-content .inner p {
    margin-right: auto;
    margin-left: auto;
    max-width: 80%;
    font-size: 18px;
  }
  section {
    min-height: 600px;
    padding: 100px 0;
  }
}

.list-group-item,
.card-footer {
  background-color: transparent;
}

textarea {
  resize: none;
}

.call-to-action h2 {
  margin: 0 auto 20px;
}

.btn.btn-primary {
  background-color: transparent;
  border: 1px solid #007FFF;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
  color: #007FFF;
}

.btn.btn-primary:hover {
  opacity: 0.7;
}

.btn-primary-outline {
  border-color: #007FFF;
  color: #007FFF;
}

.btn-primary-outline:hover {
  background-color: #007FFF;
}

.btn-xl {
  padding: 15px 30px;
  font-size: 20px;
}

::-moz-selection {
  text-shadow: none;
  color: #fff;
  background: #222;
}

::selection {
  text-shadow: none;
  color: #fff;
  background: #222;
}

img::selection {
  color: #fff;
  background: 0 0;
}

img::-moz-selection {
  color: #fff;
  background: 0 0;
}
            
          
!
            
              (function($) {
    "use strict";

    $('body').scrollspy({
        target: '.fixed-top',
        offset: 60
    });

    new WOW().init();
    
    $('a.page-scroll').bind('click', function(event) {
        var $ele = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($ele.attr('href')).offset().top - 60)
        }, 1450, 'easeInOutExpo');
        event.preventDefault();
    });
    
    $('#collapsingNavbar li a').click(function() {
        /* always close responsive nav after click */
        $('.navbar-toggler:visible').click();
    });

    $('#galleryModal').on('show.bs.modal', function (e) {
       $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
    });

})(jQuery);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console