Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header id="first">
    <div class="header-content">
        <div class="inner">
            <h2>What's New in Bootstrap 4?</h2>
            <h5 class="wow fadeIn text-normal">A free, one-page theme to highlight the new features</h5>
            <h6 class="wow fadeIn text-normal">Based on 4.0-alpha.2</h6>
            <hr>
            <a href="#one" class="btn btn-primary btn-xl page-scroll wow fadeInUp">Get Started</a>
        </div>
    </div>
</header>
<nav id="topNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
            ☰
        </button>
        <a class="navbar-brand page-scroll" href="#first">Bootstrap 4</a>
        <div class="collapse navbar-toggleable-sm" id="collapsingNavbar">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#one">Cards</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#two">Flexbox</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#three">5 Tiers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#four">More</a>
                </li>
            </ul>
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link page-scroll" data-toggle="modal" title="A free Bootstrap theme" href="#aboutModal">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<section id="one" class="wow fadeInUp">
       <div class="container">
        <h2>Cards</h2>
        <p class="lead">
            What you notice first in <a href="https://v4-alpha.getbootstrap.com/">Bootstrap 4</a> is that <code>.panel</code> and <code>.well</code> have been replaced by the <code>.card</code>. This makes a lot of sense as "cards" are one of the more well known trends in responsive design.
            The <a href="">Bootstrap 4 Cards</a> can be singular, grouped together (as shown) or <a href="">equal height</a>. There are many different layout and content options.
        </p>
        <div class="card-group">
            <!-- card -->
            <div class="card">
                <img class="card-img-top img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Consise</h4>
                    <p class="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.</p>
                </div>
            </div>
            <!-- card -->
            <div class="card">
                <img class="card-img-top img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample19.jpg" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Grouped</h4>
                    <p class="card-text">Use card groups to render equal height cards without gutters between the cards. Use <code>.card-deck</code> for cards that aren’t attached to each another.</p>
                </div>
            </div>
            <!-- card -->
            <div class="card">
                <img class="card-img-top img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample14.jpg" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Same Height</h4>
                    <p class="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!</p>
                    
                </div>
            </div>
        </div>
    </div>
</section>
<section id="two" class="bg-alt">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-xs-center">
                <h2 class="m-t-0 text-primary">Flexbox</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container wow fadeInUp">
        <div class="row">
            <div class="col-lg-4 col-md-4 text-xs-center">
                <div class="feature">
                    <i class="icon-lg ion-ios-grid-view-outline wow fadeIn" data-wow-delay=".1s"></i>
                    <h6 class="text-uppercase">Easier</h6>
                    <p class="text-muted m-b-0">Flexbox provides <a href="https://v4-alpha.getbootstrap.com/getting-started/flexbox">simpler, more flexible layout</a> options like vertical centering.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 text-xs-center">
                <div class="feature">
                    <i class="icon-lg ion-social-sass wow fadeInUp"></i>
                    <h6 class="text-uppercase">Sass-y</h6>
                    <p class="text-muted m-b-0">Simply set the <code>$enable-flex</code> variable to <a target="ext" href="http://codeply.com/go/YFFFWHVoRB">enable flexbox</a> in Bootstrap 4.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 text-xs-center">
                <div class="feature">
                    <i class="icon-lg ion-social-css3-outline wow fadeIn" data-wow-delay=".1s"></i>
                    <h6 class="text-uppercase">It's Modern</h6>
                    <p class="text-muted m-b-0">Introduced in CSS3, flexbox won't work in older browsers like <a href="http://caniuse.com/#feat=flexbox">IE9</a>.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="three">
    <div class="container-fluid">
        <h5 class="text-primary text-xs-center text-uppercase">Now there are 5 Breakpoints</h5>
        <p class="text-xs-center"><small>To accomodate a variety of devices and screen widths</small></p>
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
                <div class="row">
                      <div class="col-md-2 col-md-offset-1 col-sm-offset-0">
                        <div class="card-block text-xs-center">
                          <h1 class="card-title">XS</h1>
                          <h3 class="text-muted">&lt;34 em</h3>
                          <hr class="primary hidden-sm-up"/>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="card-block text-xs-center">
                          <h1 class="card-title">SM</h1>
                          <h3 class="text-muted">≥34 em</h3>
                          <hr class="primary hidden-md-up"/>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="card-block text-xs-center">
                          <h1 class="card-title">MD</h1>
                          <h3 class="text-muted">≥48 em</h3>
                          <hr class="primary hidden-lg-up"/>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="card-block text-xs-center">
                          <h1 class="card-title">LG</h1>
                          <h3 class="text-muted">≥62 em</h3>
                          <hr class="primary hidden-xl-up"/>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="card-block text-xs-center">
                          <h1 class="card-title">XL</h1>
                          <h3 class="text-muted">≥75 em</h3>
                          <hr class="primary"/>
                        </div>
                      </div>
                    </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <div class="row">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample14.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card card-inverse">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample15.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample16.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample16.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg" class="card-img img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample11.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample11.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample23.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample9.jpg" class="card-img img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample9.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample5.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample5.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample4.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample4.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg" class="card-img img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample3.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample2.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample2.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 text-xs-center">
                        <div class="card">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample7.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample7.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-xl-offset-0 col-lg-3 col-lg-offset-0 col-md-4 col-md-offset-4 col-sm-6 text-xs-center">
                        <div class="card center-block">
                            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample21.jpg" class="img-fluid">
                            <div class="card-img-overlay">
                                <h4 class="card-title text-xs-center">
                                    <a class="text-light" href="#galleryModal" data-toggle="modal" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample21.jpg">view</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
</section>
<aside class="bg-alt">
    <div class="container text-xs-center">
        <h2 class="text-primary text-xs-center">The Grid is More Flexible</h2>
        <hr class="primary">
        <br>
        <div class="row wow fadeInUp">
            <div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
                <h3>Start</h3>
                <i class="icon-lg ion-ios-speedometer-outline wow pulse"></i>
                <h1 class="text-primary">100</h1>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
                <h3>Migrate</h3>
                <i class="icon-lg ion-ios-location-outline wow pulse"></i>
                <h1 class="text-primary">3421</h1>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
                <h3>Build</h3>
                <i class="icon-lg ion-ios-pulse wow pulse"></i>
                <h1 class="text-primary">4%</h1>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
                <h3>Play</h3>
                <i class="icon-lg ion-ios-game-controller-b-outline wow pulse"></i>
                <h1 class="text-primary">50%</h1>
            </div>
        </div>
        <hr>
        <br>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                6
            </div>
            <div class="col-sm-6 text-normal">
                <div class="card bg-primary"> 6 units </div>
            </div>
            <div class="col-sm-5">
                5
            </div>
            <div class="col-sm-7 text-normal">
                <div class="card bg-primary"> 7 units </div>
            </div>
            <div class="col-sm-4">
                4
            </div>
            <div class="col-sm-8 text-normal">
                <div class="card bg-primary"> 8 units </div>
            </div>
            <div class="col-sm-3">
                3
            </div>
            <div class="col-sm-9 text-normal">
                <div class="card bg-primary"> 9 units </div>
            </div>
            <div class="col-sm-2">
                2
            </div>
            <div class="col-sm-10 text-normal">
                <div class="card bg-primary"> 10 units </div>
            </div>
            <div class="col-sm-1">
                1
            </div>
            <div class="col-sm-11 text-normal">
                <div class="card bg-primary"> 11 units </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="container">
        <div class="row">
            <div class="col-lg-2 text-normal">
                <div class="card bg-primary"> 2 </div>
            </div>
			<div class="col-lg-10">
                
            </div>
            <div class="col-lg-4 text-normal">
                <div class="card bg-primary"> 4 </div>
            </div>
			<div class="col-lg-8">
                
            </div>
            <div class="col-lg-6 text-normal">
                <div class="card bg-primary"> 6 </div>
            </div>
			<div class="col-lg-6">
                
            </div>
            <div class="col-lg-8 text-normal">
                <div class="card bg-primary"> 8 </div>
            </div>
			<div class="col-lg-4">
                
            </div>
            <div class="col-lg-10 text-normal">
                <div class="card bg-primary"> 10 </div>
            </div>
			<div class="col-lg-2">
                
            </div>
            <div class="col-lg-12 text-normal">
                <div class="card bg-primary"> 12 </div>
            </div>
        </div>
    </div>
</aside>
<section id="four">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-lg-6">
                <h2 class="text-nowrap">Fonts got larger</h2>
            </div>
            <div class="col-xs-12 col-lg-6 text-xs-right">
                <button class="btn btn-lg text-normal btn-secondary-outline">Outline</button>
                <button class="btn btn-lg text-normal btn-primary-outline">Buttons</button>
                <button class="btn btn-lg text-normal btn-danger-outline">Are Here</button>
            </div>
            <div class="col-xs-12">
                <br/>
                <h1 class="display-4">Wow.</h1>
                <p class="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.</p>
            </div>
        </div>
        <hr/>
        <div class="row">
                <div class="col-md-6 col-xs-12 text-xs-center">
                    <nav class="navbar navbar-dark bg-inverse text-normal">
                      <ul class="nav navbar-nav">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                      </ul>
                    </nav>
                </div>
                <div class="col-md-6 col-xs-12">
                    <h2>Navbar</h2>
                    <p class="text-justify">The new Bootstrap 4 <code>.navbar</code> code is lighter. You can make it responsive using the Collapse component and <code>.navbar-toggleable-*</code> classes that enable you to control the breakpoint.</p>
                </div>
                <div class="col-xs-12 clearfix">
                    <hr>
                </div>
                <div class="col-md-6 col-xs-12">
                    <h2>RIP icons, affix, etc..</h2>
                    <p class="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</a> or <a href="http://ionicons.com/">Ionicons</a>.
                      The Affix jQuery plugin has also been dropped. The new recommendation is to use HTML5 position: sticky or a sticky polyfill instead.
                    </p>
                </div>
                <div class="col-md-6 col-xs-12 text-xs-center">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <a href="#alertModal" data-toggle="modal" data-target="#alertModal"><i class="icon-lg ion-ios-cloud-download-outline wow fadeIn"></i></a>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-pie-outline wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-star-outline wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-heart-outline wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-pulse wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-refresh-outline wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                            <i class="icon-lg ion-ios-gear-outline wow fadeIn text-primary"></i>
                        </div>
                        <div class="col-lg-3 col-md-3 col-xs-6 text-xs-center">
                                <i class="icon-lg ion-ios-timer-outline wow fadeIn text-primary"></i>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 clearfix">
                    <hr>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="card text-normal">
                        <div class="card-block">
                        <ul class="list-unstyled">
                            <li class="text-capitalize"><code class="text-lowercase">text-capitalize</code> Capitalize each word</li>
                            <li class="text-uppercase"><code class="text-lowercase">text-uppercase</code> Uppercase text</li>
                            <li class="text-lowercase"><code>text-lowercase</code> There is lowercase too</li>
                            <li><small>But where is text-truncate with text-overflow:ellipsis?</small></li>
                        </ul>
                        <h6>Migration tips</h6>
                        <ul class="list-unstyled">
                            <li><code>well</code> = <code>card card-block</code></li>
                            <li><code>panel panel-default</code> = <code>card</code></li>
                            <li><code>text-center</code> = <code>text-xs-center</code></li>
                            <li><code>text-right</code> = <code>text-xs-right</code></li>
                            <li><code>pull-right</code> = <code>pull-xs-right</code></li>
                            <li><code>img-responsive</code> = <code>img-fluid</code></li>
                            <li><code>list-inline > li</code> = <code>list-inline-item</code></li>
                            <li>add <code>nav-item</code> to nav navbar > li</li>
                            <li>add <code>nav-link</code> to nav navbar > li > a</li>
                            <li>the <code>active</code> class is added to <code>nav-item</code> for scrollspy</li>
                            <li><code>carousel-inner > item</code> = <code>carousel-item</code></li>
                            <li><code>table-condensed</code> = <code>table-sm</code></li>
                            <li><code>input-lg</code> = <code>form-control-lg</code></li>
                            <li><code>input-sm</code> = <code>form-control-sm</code></li>
                        </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <h2>Handy utilities</h2>
                    <p class="text-justify">Several simple, but useful <a href="https://v4-alpha.getbootstrap.com/components/utilities">utility classes</a> 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</a> and 
                    <a href="https://v4-alpha.getbootstrap.com/layout/responsive-utilities/">responsive utility</a> classes to hide content on 
                    specific breakpoints. There's even a new fluid Jumbotron!</p>
                </div>
        </div>
    </div>
</section>
<aside class="bg-alt">
    <div class="container text-xs-center">
        <div class="call-to-action">
            <h2 class="text-primary">Get Started</h2>
            <a href="http://www.bootstrapzero.com" target="ext" class="btn btn-primary-outline btn-lg wow flipInX text-uppercase">Free Download</a>
        </div>
        <br>
        <hr>
        <br>
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <div class="row">
                    <h6 class="wide-space text-xs-center text-uppercase">Bootstrap is Built on these Standards</h6>
                    <div class="col-sm-3 col-xs-6 text-xs-center">
                        <i class="icon-lg ion-social-html5-outline" title="html 5"></i>
                    </div>
                    <div class="col-sm-3 col-xs-6 text-xs-center">
                        <i class="icon-lg ion-social-sass" title="sass"></i>
                    </div>
                    <div class="col-sm-3 col-xs-6 text-xs-center">
                        <i class="icon-lg ion-social-javascript-outline" title="javascript"></i>
                    </div>
                    <div class="col-sm-3 col-xs-6 text-xs-center">
                        <i class="icon-lg ion-social-css3-outline" title="css 3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aside>
<section id="last">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-xs-center">
                <h2 class="margin-top-0 wow fadeIn">Get in Touch</h2>
                <hr class="primary">
                <p>We love feedback. Fill out the form below and we'll get back to you as soon as possible.</p>
            </div>
            <div class="col-lg-10 col-lg-offset-1 text-xs-center">
                <form class="contact-form row">
                    <div class="col-md-4">
                        <label></label>
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="col-md-4">
                        <label></label>
                        <input type="text" class="form-control" placeholder="Email">
                    </div>
                    <div class="col-md-4">
                        <label></label>
                        <input type="text" class="form-control" placeholder="Phone">
                    </div>
                    <div class="col-md-12">
                        <label></label>
                        <textarea class="form-control" rows="9" placeholder="Your message here.."></textarea>
                    </div>
                    <div class="col-md-4 col-md-offset-4">
                        <label></label>
                        <button type="button" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3">
                <h6 class="text-uppercase">Information</h6>
                <ul class="list-unstyled">
                    <li><a href="">Products</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Benefits</a></li>
                    <li><a href="">Developers</a></li>
                </ul>
            </div>
            <div class="col-xs-6 col-sm-3 column">
                <h6 class="text-uppercase">About</h6>
                <ul class="list-unstyled">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Delivery Information</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                </ul>
            </div>
            <div class="col-xs-12 col-sm-3 column">
                <h6 class="text-uppercase">Stay Posted</h6>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" title="No spam, we promise!" placeholder="Tell us your email">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" data-toggle="modal" data-target="#alertModal" type="button">Subscribe for updates</button>
                    </div>
                </form>
            </div>
            <div class="col-xs-12 col-sm-3 text-xs-right">
                <h6 class="text-uppercase">Follow</h6>
                <ul class="list-inline">
                    <li class="list-inline-item"><a rel="nofollow" href="" title="Twitter"><i class="icon-lg ion-social-twitter-outline"></i></a>&nbsp;</li>
                    <li class="list-inline-item"><a rel="nofollow" href="" title="Facebook"><i class="icon-lg ion-social-facebook-outline"></i></a></li>
                </ul>
            </div>
        </div>
        <br>
        <span class="pull-right text-muted small"><a href="http://www.codeply.com">Made by Themes.guide</a> ©2015-2016 Company</span>
    </div>
</footer>
<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="//placehold.it/1200x700/222?text=..." id="galleryImage" class="center-block img-fluid">
                <p>
                    <br>
                    <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button>
                </p>
            </div>
        </div>
    </div>
</div>
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h2 class="text-xs-center">Bootstrap 4 Theme</h2>
                <h6 class="text-xs-center">A free, responsive template</h6>
                <p class="text-xs-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>
                <p class="text-xs-center"><a href="http://www.bootstrapzero.com">Download at BootstrapZero</a></p>
                <br>
                <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true"> OK </button>
            </div>
        </div>
    </div>
</div>
<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <h2 class="text-xs-center">Nice Job!</h2>
                <p class="text-xs-center">You clicked the button, but it doesn't actually go anywhere because this is only a demo.</p>
                <p class="text-xs-center"><a href="http://www.bootstrapzero.com">Learn more at BootstrapZero</a></p>
                <br>
                <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                @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-default {
    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-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #001A33;
}
.navbar-default .navbar-toggle, .navbar-default .navbar-collapse {
    border-color: transparent;
}

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

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

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

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

@media(min-width:48em) {
    .navbar-default {
        border-color: transparent;
        background-color: #fff;
        min-height: 60px;
    }

    .navbar-brand {
        color: #007FFF;
        float: left;
        padding: 9px;
        padding-left: 1px;
    }

    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
        color: #001A33;
    }
    
    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: #001A33;
        padding-left: 5px;
        padding-top: 21px;
        letter-spacing: 1.1px;
    }

    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #001A33;
    }

    #topNav {
      background-color:#fff;
    }
    
}

header {
    position: relative;
    min-height: auto;
    text-align: center;
    color: #fff;
    width: 100%;
    background-color: #444;
    background-size: cover;
    background-image: url(https://images.unsplash.com/photo-1441986380878-c4248f5b8b5b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7b501b38009e01e9d39127e1a74b9a1b);
}

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: #007FFF;
    border:1px solid #007FFF;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    color: #eee;
}

.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;
}

              
            
!

JS

              
                (function($) {
    "use strict";

    $('body').scrollspy({
        target: '.navbar-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

Console