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

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

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.

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

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.

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 exmaple 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.

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

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.

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.

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.

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.

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 it’s own unique piece of content, with a layout on the overall page that is easy on the eyes, and makes a good use of space. Here is an example of a 3 wide card grid.

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.

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.

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.

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.

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.

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!

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.

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.

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.

bootstrap-4-horizontal-alignment

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

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

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

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

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.

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.

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.

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

bootstrap-4-basic-form

Inline 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.

bootstrap-hidden-labels-form

Horizontal Form

bootstrap-4-horizontal-form

Input Sizes

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

Getting Help

help-text-for-bootstrap-4

New Validation Icons and Styles

bootstrap-validation-icon-styles

Custom Checkbox

custom-checkbox

Custom Radio Buttons

custom-radio-buttons

Custom Stacked Controls

custom-stacked-radio-buttons

Custom Select Control

custom-select-options

Custom File Browser

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 it’s side.

The new Table Inverse

new-bootstrap-table-inverse

Thead Inverse and Thead Default

thead-inverse-and-thead-default

Table Inverse and Striped

table-inversed-and-striped

Table Reflow

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.