What Is New In Bootstrap 4

whats-new-in-bootstrap-4

Let’s take a look at what is new in Bootstrap 4, which continues to be the most popular front end framework available. This free software under MIT license has over 800 contributors, 40 releases, and over 15,000 commits on github. In fact, it is the most “starred” project on the social coding website with over 100,000 thousand stars! It’s fair to say this framework has been a runaway success and is put in use all over the web. Let’s take a look at what is new in Bootstrap 4 now.

There are really a ton of new features in Bootstrap 4, as well as some deprecated features. On looking at the current state of things, we found these items to be the biggest new things to pay attention to in Bootstrap 4.


Cards

The first new feature we can learn about are Cards. Cards are a popular layout technique in modern web design, especially with the attention being paid to mobile responsiveness. Cards are a nice way to compartmentalize your content into pleasing to the eye container components. This new feature takes the place of both .panel and .well classes from prior versions of Bootstrap. Cards are comprised of <div> elements and various .card classes applied to them.


A Basic Bootstrap 4 Card

A Card is made up of a wrapping div which will have the class of .card Optionally, you can add the .card-block class to this outer div to provide a some nice padding like we do here. Card classes used: .card, .card-block, .card-title, .card-text

<div class="card card-block">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Card Text</p>
    <a href="#" class="btn btn-primary">Button Primary</a>
</div>

the-most-basic-form-of-a-bootstrap-4-card

Adding a Card Header and Footer

You can also add a nice looking header and footer by including the use of .card-header and .card-footer classes. Here is another example using .card, .card-header, .card-block, .card-title, .card-text, and .card-footer

<div class="card">
    <div class="card-header">
        Card Header
    </div>
    <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Card Text.</p>
    </div>
    <div class="card-footer">
        Card Footer
    </div>
</div>

adding-a-card-header-and-footer


Change Card Header <div> to use <h1> – <h6> Elements

Swap out the <div> which is used with .card-header to <h1> – <h6> elements with .card-header. This example uses an <h2> along with .card-header to nice effect.

<div class="card">
    <h2 class="card-header">
        I'm in an h2 element!
    </h2>
    <div class="card-block">
        <h4 class="card-title">Using html card header</h4>
        <p class="card-text">This example is displaying how to use html elements with .card-header class</p>
    </div>
    <div class="card-footer">
        I'm in the card-footer area
    </div>
</div>

html-headers-with-bootstrap-card

Nav Tabs In Card Header Element

Bootstrap Cards also support the ability to place navigation in the header of the card. Here, we use an unordered list with additional classes of .nav, .nav-tabs, .card-header-tabs, .float-xs-left, .nav-item, .active, .nav-link, and .disabled

nav-tabs card-header-tabs example

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs float-xs-left">
            <li class="nav-item">
                <a class="nav-link active" href="#">One</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Two</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Three</a>
            </li>
        </ul>
    </div>
    <div class="card-block">
        <h4 class="card-title">Four</h4>
        <p class="card-text">Tell me that you love me more</p>
    </div>
    <div class="card-footer">
        By Feist
    </div>
</div>

nav-tabs-in-card-header-element

nav-pills card-header-pills example

Swap out the .nav-tabs and .card-header-tabs for .nav-pills and .card-header-pills to get a pill based navigation.


<div class="card">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills float-xs-left">
            <li class="nav-item">
                <a class="nav-link active" href="#">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Settings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Notifications</a>
            </li>
        </ul>
    </div>
    <div class="card-block">
        <h4 class="card-title">Welcome to your dashboard</h4>
        <p class="card-text">Here, you will be able to interact with your various features.</p>
    </div>
    <div class="card-footer">
        Footer Area
    </div>
</div>

using-pills-for-navigation-inside-bootstrap-cards


Creating Flush Card Images

You likely have seen the examples of an image inside of a card that lines up perfectly with the border of the card. To accomplish this effect, you must remove the .card-block class from the outer containing .card <div> element. In addition, you must set your own style to apply the width of the image, or it will not work. In this example we have a 200px width image, and needed to add style="max-width: 202px;" to make it work. So it looks like the image size plus 2 pixels should do the trick.

<div class="card" style="max-width: 202px;">
    <div class="card-block">
        <h4 class="card-title">Player 1</h4>
        <h6 class="card-subtitle text-muted">Link</h6>
    </div>
    <img src="img/card-and-image-with-no-card block-class.png" alt="card with flush image">
    <div class="card-block">
        <p class="card-text">We are depending on you Link to save the land of Hyrule!</p>
    </div>
</div>

creating-flush-card-images


Align Image to Top or Bottom of Card

You can make an image fit perfectly into the top or bottom of the card by making use of the .card-img-top or .card-img-bottom class on the <img> tag. When aligning to the top, you will want the <img> tag to come before your .card-block <div>. When aligning to the bottom of the card, you will want your <img> tag to come after your .card-block <div>.

<div class="card" style="max-width: 202px;">
    <img class="card-img-top" src="img/card-and-image-with-no-card block-class.png" alt="card with flush image">
    <div class="card-block">
        <p class="card-text">Player 1 on Top</p>
    </div>
</div>

<div class="card" style="max-width: 202px;">
    <div class="card-block">
        <p class="card-text">Player 1 on Bottom</p>
    </div>
    <img class="card-img-bottom" src="img/card-and-image-with-no-card block-class.png" alt="card with flush image">
</div>

align-image-to-top-or-bottom-in-bootstrap-card


Use A Background Image In A Card

By applying the .card-img-overlay class to the text content of a card, you can apply a background image and have text appear over the top of it. Here is an example of that effect.

<div class="card card-inverse text-xs-center" style="max-width: 603px;">
    <img class="card-img-top" src="img/under-the-milky-way-tonight.PNG" alt="card with flush image">
    <div class="card-img-overlay">
        <h1 class="card-title">Under The Milky Way Tonight</h1>
        <p class="card-text">Wish I knew what you were looking for</p>
    </div>
    <div class="card-block">
        <p class="card-text text-primary">Notice how you can use a background image on the card to really cool effect.</p>
    </div>
</div>

background-image-in-a-bootstrap-card


List Group Nested Inside a Card

The new bootstrap cards are very flexible and you can use many other bootstrap components nested inside of the card. In this example, we take a look at nesting a list group inside of a card.

<div class="card">
    <div class="card-header">
        Example Text in Header of the List Group contained within a card example
    </div>
    <div class="card-block">
        <p class="card-text">This text is contained in a card block</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">List group item 1</li>
        <li class="list-group-item">List group item 2</li>
        <li class="list-group-item">List group item 3</li>
        <li class="list-group-item">List group item 4</li>
    </ul>
</div>

list-group-nested-inside-a-card


Contextual Colors for Cards

You are likely familiar with using all of the various contextual colors on your Bootstrap components. Applying contextual classes works for cards as well. This provides the ability to change the background colors as we see here using .card-primary, .card-success, .card-info, .card-warning, and .card-danger.

Bootstrap has contextual classes available for cards. These enable you to switch the color based on the context. Have a look at all the different options here.

<div class="card card-primary">
    <div class="card-block">
        <h4 class="card-title">Primary</h4>
        <p class="card-text">This is the primary contextual color.</p>
    </div>
</div>

<div class="card card-primary card-inverse">
    <div class="card-block">
        <h4 class="card-title">Primary Inverse</h4>
        <p class="card-text">This is the primary inverse contextual color.</p>
    </div>
</div>

<div class="card card-success">
    <div class="card-block">
        <h4 class="card-title">Success</h4>
        <p class="card-text">This is the success contextual color.</p>
    </div>
</div>

<div class="card card-success card-inverse">
    <div class="card-block">
        <h4 class="card-title">Success Inverse</h4>
        <p class="card-text">This is the success inverse contextual color.</p>
    </div>
</div>

<div class="card card-warning">
    <div class="card-block">
        <h4 class="card-title">Warning</h4>
        <p class="card-text">This is the warning contextual color.</p>
    </div>
</div>

<div class="card card-warning card-inverse">
    <div class="card-block">
        <h4 class="card-title">Warning Inverse</h4>
        <p class="card-text">This is the warning inverse contextual color.</p>
    </div>
</div>

<div class="card card-danger">
    <div class="card-block">
        <h4 class="card-title">Danger</h4>
        <p class="card-text">This is the danger contextual color.</p>
    </div>
</div>

<div class="card card-danger card-inverse">
    <div class="card-block">
        <h4 class="card-title">Danger Inverse</h4>
        <p class="card-text">This is the danger inverse contextual color.</p>
    </div>
</div>

card-contextual-colors-example-one
card-contextual-colors-example-two

In addition to this, you can use a more subtle version of these contextual colors by using .card-outline-primary, .card-outline-success, .card-outline-warning, or .card-outline-danger.

<div class="card card-outline-primary">
    <div class="card-block">
        <h4 class="card-title">Primary</h4>
        <p class="card-text">This is the card-outline-primary contextual color.</p>
    </div>
</div>

<div class="card card-outline-success">
    <div class="card-block">
        <h4 class="card-title">Success</h4>
        <p class="card-text">This is the card-outline-success contextual color.</p>
    </div>
</div>

<div class="card card-outline-warning">
    <div class="card-block">
        <h4 class="card-title">Warning</h4>
        <p class="card-text">This is the card-outline-warning contextual color.</p>
    </div>
</div>

<div class="card card-outline-danger">
    <div class="card-block">
        <h4 class="card-title">Danger</h4>
        <p class="card-text">This is the card-outline-danger contextual color.</p>
    </div>
</div>

bootstrap-contextual-color-outline-options


Cards In A Grid

A really cool use case for cards is to use them in a Bootstrap Grid. Each card is its own unique piece of content, with a layout on the overall page that is easy on the eyes, and makes good use of space. Here is an example of a 3 wide card grid.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Authentication</h4>
                    <p class="card-text">Log in with your email and password.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Subscriptions</h4>
                    <p class="card-text">Subscription billing made easy.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Open Source</h4>
                    <p class="card-text">Make use of open source.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap-cards-in-a-grid


Apply Text Alignment To Cards

You can align text in Bootstrap by using any of the classes such as .text-xs-left, .text-xs-center, .text-xs-right, .text-justify, and .text-nowrap. Here we apply .text-xs-left, .text-xs-center, and .text-xs-right to the prior example on each card for a nice effect.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <div class="card text-xs-left">
                <div class="card-block">
                    <h4 class="card-title">Authentication</h4>
                    <p class="card-text">Log in with your email and password.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="card text-xs-center">
                <div class="card-block">
                    <h4 class="card-title">Subscriptions</h4>
                    <p class="card-text">Subscription billing made easy.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="card text-xs-right">
                <div class="card-block">
                    <h4 class="card-title">Open Source</h4>
                    <p class="card-text">Make use of open source.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap-cards-text-aligned

Links In Cards

Apply a .card-link class to your <a> elements inside your cards for nice spacing, and an even layout.

<div class="card">
    <div class="card-block">
        <h4 class="card-title">Your Card Title</h4>
        <p class="card-text">We have cards that are stacked like no other.</p>
        <a href="#" class="card-link">Blackjack</a>
        <a href="#" class="card-link">Poker</a>
        <a href="#" class="card-link">Go Fish</a>
        <a href="#" class="card-link">Solitaire</a>
        <a href="#" class="card-link">Crazy Eights</a>
        <a href="#" class="card-link">Rummy</a>
    </div>
</div>

links-in-cards


Card Groups

This feature is really neat as it allows the designer to present multiple cards as a single attached element, with equal heights and widths. This is accomplished by nesting all cards within a .card-group <div> element.

<div class="card-group">
    <div class="card" style="max-width: 240px;">
        <img class="card-img-top" src="img/model-s.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model S</h4>
            <p class="card-text">Model S is designed from the ground up to be the safest, most exhilarating sedan on the road.</p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 240px;">
        <img class="card-img-top" src="img/model-x.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model X</h4>
            <p class="card-text">Model X is the safest, fastest and most capable sport utility vehicle in history. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 240px;">
        <img class="card-img-top" src="img/model-3.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model 3</h4>
            <p class="card-text">Model 3 combines real world range, performance, safety and spaciousness into a premium sedan that only Tesla can build. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
</div>

bootstrap-card-groups-example


Card Decks

Similar to card groups are card decks. This effect is similar, but adds a small amount of space between cards. As long as you have flexbox enabled on your Bootstrap install, all you need to do is wrap your cards within a .card-deck <div> element. If flexbox is not enabled, you’ll need to add an additional outer <div> wrapper with the .card-deck-wrapper class. In this example below, we change our prior group of Tesla cars into a deck of Tesla cars.

<div class="card-deck">
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-s.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model S</h4>
            <p class="card-text">Model S is designed from the ground up to be the safest, most exhilarating sedan on the road.</p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-x.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model X</h4>
            <p class="card-text">Model X is the safest, fastest and most capable sport utility vehicle in history. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-3.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model 3</h4>
            <p class="card-text">Model 3 combines real world range, performance, safety and spaciousness into a premium sedan that only Tesla can build. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
</div>

bootstrap-card-deck-example


Card Columns

Cascading grid layout styles are possible using the .card-columns applied to the outer wrapping <div> of your cards. Here is another example of some electric cars inside cards nested within the .card-columns class.

<div class="card-columns">
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-s.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model S</h4>
            <p class="card-text">Model S is designed from the ground up to be the safest, most exhilarating sedan on the road.</p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-x.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model X</h4>
            <p class="card-text">Model X is the safest, fastest and most capable sport utility vehicle in history. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/model-3.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Model 3</h4>
            <p class="card-text">Model 3 combines real world range, performance, safety and spaciousness into a premium sedan that only Tesla can build. </p>
            <p class="card-text">
                <small class="text-muted">Tesla Motors</small>
            </p>
        </div>
    </div>
    <div class="card" style="max-width: 241px;">
        <img class="card-img-top" src="img/NextEV-NIO-EP9.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">NIO EP9</h4>
            <p class="card-text">One-megawatt 1,341 horespower electric race machine. </p>
            <p class="card-text">
                <small class="text-muted">NextEV</small>
            </p>
        </div>
    </div>
</div>

bootstrap-card-columns-example


Flexbox

Flexbox is now included in Bootstrap version 4. Flexbox, also known as CSS Flexible Box Layout Module, is a technology that has many web developers very excited as it aims to fix many of the common hacks one must implement to achieve proper layouts, as well as proper horizontal and vertical layouts of divs and other page elements. In some ways, Flexbox itself is so powerful, you could almost use just the base technology itself without requiring Bootstrap. There are some really nice features of how Bootstrap 4 implements Flexbox so let’s take a look at those here.


1. Flexbox Mode Offers Auto-Layout

The biggest change to the grid is that you can create one that automatically fits the space available without needed to specify column widths that add up to 12 like you are so familiar with. For example, you are likely familiar with how to create a 3 wide grid in Bootstrap. You would assign something like .col-xs-4 to three divs contained in a row, and you would get the desired effect. Watch how easy it is to do with the Flexbox Grid!

<div class="row">
    <div class="col-xs">
        <h4>Bootstrap Framework</h4>
        <p>The Bootstrap Framework is the most popular HTML, CSS, and JavaScript framework for creating fully responsive websites and applications.</p>
    </div>
    <div class="col-xs">
        <h4>Bootstrap Expo</h4>
        <p>Links to useful Bootstrap resources like additional showcases, integrations, add-ons, code snippets, and more.</p>
    </div>
    <div class="col-xs">
        <h4>Theme cards</h4>
        <p>A curation of free responsive themes and templates.</p></div>
</div>

bootstrap-columns-without-a-specified-size

Sweet! All we had to do was set up three divs with the class of .col-xs in a containing row and we get perfectly sized grid elements that layout evenly! No longer do you need to “do the math” in your head. Yes, you have become a master of dividing numbers into 12, however, you no longer need to if you don’t want to. 🙂

Mix and Match Specified vs Non-Specified Breakpoints
In addition to being able to leave of the number breakpoint entirely, you can optionally include a specific value for just one of the grid elements, and the others will auto-size themselves accordingly. Say you want to have a middle section that is a bit wider than the sidebars. You can specify a value for the middle grid element, and watch the others fall in place perfectly. Let’s see.

<div class="row">
    <div class="col-xs">
        <h4>Sidebar</h4>
        <p>This is the sidebar area.</p>
    </div>
    <div class="col-xs-6">
        <h4>Web Design Stash</h4>
        <p>WDS content is curated from hundreds of sources and deliver the most relevant stories of the day. Web Design Stash covers interesting articles and fresh content.</p>
    </div>
    <div class="col-xs">
        <h4>Sidebar</h4>
        <p>This is the sidebar area.</p>
    </div>
</div>

set-the-width-of-middle-column-and-the-others-will-automatically-resize-around-it


2. Flexbox Mode Offers Column Wrapping

If you’re not the best at math and you accidentally go over the 12 allowed spaces in a row, the grid will wrap to the next row automatically. Here is an example of that feature.

<div class="row">
    <div class="col-xs-6">
        <h4>Sage</h4>
        <p>WordPress starter theme that uses gulp, Bower, and Bootstrap.</p>
    </div>
    <div class="col-xs-6">
        <h4>Bootbundle</h4>
        <p>Bootstrap themes, snippets and components package that includes an AngularJS admin dashboard theme.</p>
    </div>
    <div class="col-xs-6">
        <h4>Fbootstrapp</h4>
        <p>Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.</p>
    </div>
</div>

bootstrap-4-automatic-column-wrapping


3. Automatic Height Sizing

You may have noticed on the examples so far that the height has been perfectly uniform across grid elements in the same row, no matter if the containing content is different. This is another great feature of Flexbox in Bootstrap. Each grid element in a given column will have the same height based on the tallest element. This is a fantastic feature! For example, here is how the non-flexbox enabled grid would look with varying amounts of content in each grid item.

grid-without-flexbox-different-heights


4. Easy Horizontal Alignment

Horizontal alignment is also now made easier with Flexbox since you don’t have to manually calculate the offset positions like you used to. Now you make use of classes like .flex-items-xs-left, .flex-items-xs-center, .flex-items-xs-right, .flex-items-xs-around, and .flex-items-xs-between to align content easily.

<div class="row flex-items-xs-left">
    <div class="col-xs-4">
        <h4>WrapBootstrap</h4>
        <p>{wrap}bootstrap is a marketplace for premium themes and templates for Bootstrap where you can Buy and sell Bootstrap themes! </p>
    </div>
</div>

<div class="row flex-items-xs-right">
    <div class="col-xs-4">
        <h4>Lavish Bootstrap</h4>
        <p>Generate your own Bootstrap and Foundation color scheme from an image and customize to your taste.</p>
    </div>
</div>

<div class="row flex-items-xs-center">
    <div class="col-xs-4">
        <h4>Bootstrap Studio</h4>
        <p>Bootstrap Studio is a powerful web design tool for creating responsive websites using the Bootstrap framework.</p>
    </div>
</div>

bootstrap-4-horizontal-alignment

Here are a couple of examples of the .flex-items-xs-around, and .flex-items-xs-between options.

<div class="row flex-items-xs-around">
    <div class="col-xs-4">
        <h4>Bootstrap Resources</h4>
        <p>Huge list of expertly curated resources for the popular Bootstrap Framework.</p>
    </div>
    <div class="col-xs-4">
        <h4>Bootstrap Zero</h4>
        <p>The largest open-source, free Bootstrap template collection.</p>
    </div>
</div>

<div class="row flex-items-xs-between">
    <div class="col-xs-4">
        <h4>Bootply</h4>
        <p>Rapidly design & build interfaces using the drag-and-drop visual editor for Bootstrap.</p>
    </div>
    <div class="col-xs-4">
        <h4>BootstrapBay</h4>
        <p>High quality Bootstrap themes & templates for your next web project.</p>
    </div>
</div>

flex-items-xs-around-and-flex-items-xs-between


5. Simple Vertical Alignment

Just like horizontal alignment is now easy with Bootstrap 4 and flexbox, so too is aligning your content vertically using .row flex-items-xs-middle, .row flex-items-xs-bottom, and .row flex-items-xs-top

<div class="row flex-items-xs-middle" style="height: 200px;">
    <div class="col-xs-6"><h4>What The FlexBox!?</h4>
        <p>A free video course created by Wes Bos where you’ll learn all the basics of Flexbox.</p>
    </div>
    <div class="col-xs-6"><h4>Flexbox Froggy</h4>
        <p>A fun and interactive game that covers a lot about the more subtle features of Flexbox. </p>
    </div>
</div>

bootstrap-4-row-flex-items-xs-middle

<div class="row flex-items-xs-top" style="height: 200px;">
    <div class="col-xs"><h4>A Complete Guide to Flexbox</h4>
        <p>The exhaustive CSS Tricks resource for Flexbox.</p>
    </div>
</div>

bootstrap-4-row-flex-items-xs-top

<div class="row flex-items-xs-bottom" style="height: 200px;">
    <div class="col-xs"><h4>Flexbox Defense</h4>
        <p>The game where you use CSS to prevent enemies from getting past your defenses.</p>
    </div>
</div>

bootstrap-4-row-flex-items-xs-bottom

The examples above apply to the containing row, while these examples here show you can apply to each column directly within a containing row.

<div class="row" style="height: 350px;">
    <div class="col-xs flex-xs-bottom"><h4>Bootstrap Magic</h4>
        <p>Bootstrap Magic is a Bootstrap Theme generator that has awesome typeahead, contextual and live preview, and a color picker.</p>
    </div>
    <div class="col-xs flex-xs-middle"><h4>Bootstrap Expo</h4>
        <p>Links to useful Bootstrap resources like additional showcases, integrations, add-ons, code snippets, and more.</p>
    </div>
    <div class="col-xs flex-xs-top"><h4>Bootstrap Creative</h4>
        <p>Bootstrap online training and resources - Helping beginners quickly start building responsive websites using Bootstrap.</p>
    </div>
</div>

bootstrap-4-bottom-middle-top-flexbox


6. Reorder Content

With Flexbox you can entirely reorder your content right through CSS! In Bootstrap 4, this technique is accomplished using the .flex-xs-first, .flex-xs-unordered, and flex-xs-last classes. Here is a quick demo.

<div class="row">
    <div class="col-xs flex-xs-unordered">
        <h4>First in the markup</h4>
        <p>.flex-xs-unordered</p>
    </div>
    <div class="col-xs flex-xs-last">
        <h4>Second in the markup</h4>
        <p>.flex-xs-last</p>
    </div>
    <div class="col-xs flex-xs-first">
        <h4>Third in the markup</h4>
        <p>.flex-xs-first</p>
    </div>
    <div class="col-xs flex-xs-unordered">
        <h4>Fourth in the markup</h4>
        <p>.flex-xs-unordered</p>
    </div>
</div>

bootstrap-4-column-reordering


Five Breakpoints

Bootstrap 4 now has 5 breakpoints which provides the ability to accommodate the widest range of devices. These are the xs, sm, md, lg, and now xl breakpoints. For example .col-xs-4, .col-sm-3, .col-md-8, .col-lg-2, .col-xl-4, etc… This added breakpoint supports a media query range to 544px or 34em. This actually helps to support smaller screens. The new grid spacing breakpoints now makes for a better portrait experience on mobile devices.

XS < 544 px

SM >= 544 px

MD >= 768 px

LG >= 992 px

XL >= 1200 px


Outline Buttons

Bootstrap 4 now has outline buttons for a nice effect when you don’t need solid colors.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

outline-buttons-are-new-in-bootstrap-4

Also worth noting for Buttons in Bootstrap 4 is that .btn-default has been renamed to .btn-secondary. The .btn-xs class has been removed from Bootstrap as .btn-sm is actually small enough in Bootstrap 4. The stateful button feature of the button.js jQuery plugin has been removed, and the creators of Bootstrap are recommending your own JavaScript if you need this functionality.


Custom Forms

Bootstrap 4 introduces some custom form functionality in addition to changing up how some styles are applied on the standard forms. We’ll take a look at these differences in Forms here.

Basic Form

<form action="submit.php">
    <fieldset class="form-group">
        <label for="favorite_food">Favorite Food</label>
        <input type="text" class="form-control" id="favorite_food" name="favorite_food">
    </fieldset>
    <fieldset class="form-group">
        <label for="favorite_color">Favorite Color</label>
        <input type="text" class="form-control" id="favorite_color" name="favorite_color">
    </fieldset>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

bootstrap-4-basic-form

Inline Form

<form action="submit.php" class="form-inline">
    <fieldset class="form-group">
        <label for="favorite_food">Favorite Food</label>
        <input type="text" class="form-control" id="favorite_food" name="favorite_food">
    </fieldset>
    <fieldset class="form-group">
        <label for="favorite_color">Favorite Color</label>
        <input type="text" class="form-control" id="favorite_color" name="favorite_color">
    </fieldset>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

bootstrap-4-inline-form

Hidden Labels

Always apply labels to form inputs, but hide them if needed using the .sr-only class on the label element.

<form action="submit.php" class="form-inline">
    <div class="form-group">
        <label for="favorite_food" class="sr-only">Favorite Food</label>
        <input type="text" class="form-control" id="favorite_food" name="favorite_food" placeholder="Thai?">
    </div>
    <div class="form-group">
        <label for="favorite_color" class="sr-only">Favorite Color</label>
        <input type="text" class="form-control" id="favorite_color" name="favorite_color" placeholder="Blue?">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

bootstrap-hidden-labels-form

Horizontal Form

<form action="submit.php">
    <div class="container">
        <div class="form-group row">
            <label for="favorite_food" class="col-xs-3 col-form-label">Favorite Food</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="favorite_food" name="favorite_food">
            </div>
        </div>
        <div class="form-group row">
            <label for="favorite_color" class="col-xs-3 col-form-label">Favorite Color</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="favorite_color" name="favorite_color">
            </div>
        </div>
        <div class="form-group row">
            <div class="offset-xs-3 col-xs-9">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </div>
    </div>
</form>

bootstrap-4-horizontal-form

Input Sizes

<div class="form-group">
    <input type="text" class="form-control form-control-sm" placeholder="This uses .form-control-sm">
</div>
<div class="form-group">
    <input type="text" class="form-control" placeholder="This uses .form-control (default size)">
</div>
<div class="form-group">
    <input type="text" class="form-control form-control-lg" placeholder="This uses .form-control-lg">
</div>

new-form-control-classes-in-bootstrap-4

Getting Help

<label for="orderNumber">Order Number</label>
<input type="text" id="orderNumber" class="form-control" aria-describedby="helpOrderNumber">
<span id="helpOrderNumber" class="form-text text-muted">Your order number is located in the body of the email you received.</span>

help-text-for-bootstrap-4

New Validation Icons and Styles

<div class="form-group has-success">
    <label class="col-form-label" for="username">Success</label>
    <input type="text" class="form-control form-control-success" id="username" aria-describedby="usernameStatus">
    <div class="form-control-feedback">That username is available!</div>
</div>

<div class="form-group has-warning">
    <label class="col-form-label" for="password">Warning</label>
    <input type="password" class="form-control form-control-warning" id="password" aria-describedby="passwordStatus">
    <div class="form-control-feedback">You must have lower and upper case letters in the password!</div>
</div>

<div class="form-group has-danger">
    <label class="col-form-label" for="phone">Danger</label>
    <input type="tel" class="form-control form-control-danger" id="phone" aria-describedby="phoneStatus">
    <div class="form-control-feedback">That does not look like a valid phone number.</div>
</div>

bootstrap-validation-icon-styles

Custom Checkbox

<label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Custom Checkbox!</span>
</label>

custom-checkbox

Custom Radio Buttons

<label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Italian</span>
</label>
<label class="custom-control custom-radio">
    <input id="radio2" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Thai</span>
</label>

custom-radio-buttons

Custom Stacked Controls

<div class="custom-controls-stacked">
    <label class="custom-control custom-radio">
        <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Rain</span>
    </label>
    <label class="custom-control custom-radio">
        <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Snow</span>
    </label>
    <label class="custom-control custom-radio">
        <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Sunny</span>
    </label>
</div>

custom-stacked-radio-buttons

Custom Select Control

<select class="custom-select">
    <option selected>Choose the weather...</option>
    <option value="1">Rain</option>
    <option value="2">Snow</option>
    <option value="3">Sunny</option>
</select>

custom-select-options

Custom File Browser

<label class="custom-file">
    <input type="file" id="file" class="custom-file-input">
    <span class="custom-file-control"></span>
</label>

browse-for-file


What’s new with Tables

Nested tables inherit styles from their parents automatically in this new version of Bootstrap. Responsive tables are easier to accomplish as you no longer need a wrapping div. The old .table-condensed class is now renamed to .table-sm. A pretty cool new feature of tables is now the ability to invert the color scheme similar to cards with .table-inverse. There is also a new .table-reflow option which kind of lays the table on its side.

The new Table Inverse

<table class="table table-inverse">
    <thead>
    <tr>
        <th>#</th>
        <th>Language</th>
        <th>Framework</th>
        <th>Open Source</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>PHP</td>
        <td>Laravel</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>2</th>
        <td>JavaScript</td>
        <td>VueJS</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>3</th>
        <td>C#</td>
        <td>.Net</td>
        <td>yes</td>
    </tr>
    </tbody>
</table>

new-bootstrap-table-inverse

Thead Inverse and Thead Default

<table class="table">
    <thead class="thead-inverse">
    <tr>
        <th>#</th>
        <th>Language</th>
        <th>Framework</th>
        <th>Open Source</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>PHP</td>
        <td>Laravel</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>2</th>
        <td>JavaScript</td>
        <td>VueJS</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>3</th>
        <td>C#</td>
        <td>.Net</td>
        <td>yes</td>
    </tr>
    </tbody>
</table>

<table class="table">
    <thead class="thead-default">
    <tr>
        <th>#</th>
        <th>Language</th>
        <th>Framework</th>
        <th>Open Source</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>PHP</td>
        <td>Laravel</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>2</th>
        <td>JavaScript</td>
        <td>VueJS</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>3</th>
        <td>C#</td>
        <td>.Net</td>
        <td>yes</td>
    </tr>
    </tbody>
</table>

thead-inverse-and-thead-default

Table Inverse and Striped

<table class="table table-inverse table-striped">
    <thead>
    <tr>
        <th>#</th>
        <th>Language</th>
        <th>Framework</th>
        <th>Open Source</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>PHP</td>
        <td>Laravel</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>2</th>
        <td>JavaScript</td>
        <td>VueJS</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>3</th>
        <td>C#</td>
        <td>.Net</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>4</th>
        <td>Python</td>
        <td>Django</td>
        <td>yes</td>
    </tr>
    </tbody>
</table>

table-inversed-and-striped

Table Reflow

<table class="table table-reflow">
    <thead class="thead-inverse">
    <tr>
        <th>#</th>
        <th>Language</th>
        <th>Framework</th>
        <th>Open Source</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>PHP</td>
        <td>Laravel</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>2</th>
        <td>JavaScript</td>
        <td>VueJS</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>3</th>
        <td>C#</td>
        <td>.Net</td>
        <td>yes</td>
    </tr>
    <tr>
        <th>4</th>
        <td>Python</td>
        <td>Django</td>
        <td>yes</td>
    </tr>
    </tbody>
</table>

table-reflow-bootstrap-example


What Is New In Bootstrap 4 Summary

Whew! As you go through all of the changes from Bootstrap 3 to Bootstrap 4, you realize just how much work has gone into this new and comprehensive rewrite of the entire framework. It’s a lot of work to simply make use of and understand the workings of all the classes provided, I can’t imagine how much effort the contributors have invested into the source code behind the scenes. Many of these new features are really cool in this new version and are ready to be tested out on new projects.