What's New in Bootstrap 4?

A free, one-page theme to highlight the new features
Based on 4.0

Get Started


What you notice first in Bootstrap 4 is that .panel and .well have been replaced by the .card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There are many different layout and content options.

Card image cap


Cards are a good way to display content composed of different types of objects. They’re well-suited for presenting similar objects whose size or supported actions vary, like headings and photos with captions.

Card image cap


Use card groups to render equal height cards without gutters between the cards. Use .card-deck for cards that aren’t attached to each another.

Card image cap

Same Height

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!



Flexbox provides simpler, more flexible layout options like vertical centering.


Flexbox is now the default and Bootstrap 4 supports SASS out of the box.

It's Modern

Introduced in CSS3, flexbox won't work in older browsers like IE9.

Bootstrap 4 Examples

Kick start your Bootstrap 4 project with any of these free templates & examples that utilize various parts of the framework. We will continually update these, and add new examples as Bootstrap 4 nears a production-ready release.

Bootstrap 4 Themes

We'll soon be introducing a collection of unique, free themes to stylize your Bootstrap 4 projects.

Now there are 5 Breakpoints

To accomodate a variety of devices and screen widths


<567 px


≥567 px


≥768 px


≥992 px


≥1200 px

Fonts got larger


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 `rem` based sizing is an improvement too.


The new Bootstrap 4 .navbar code is lighter. You can make it responsive using the Collapse component and .navbar-toggleable-* classes that enable you to control the breakpoint.

RIP icons, affix, etc..

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, Octicons or Ionicons. The Affix jQuery plugin has also been dropped. The new recommendation is to use HTML5 position: sticky or a sticky polyfill instead.

  • text-capitalize Capitalize each word
  • text-uppercase Uppercase text
  • text-lowercase There is lowercase too
  • But where is text-truncate with text-overflow:ellipsis?
Migration tips
  • pull-right = float-right
  • img-responsive = img-fluid
  • list-inline > li = list-inline-item
  • carousel-inner > item = carousel-item
  • table-condensed = table-sm
  • center-block = mx-auto
More on What's New in Bootstrap 4
Upgrade to Bootstrap 4

Handy utilities

Several simple, but useful utility classes have been added like text, margin and padding helpers. There are also contextual colors and responsive utility classes to hide content on specific breakpoints.

To get the full rundown on What's New in Bootstrap 4 check out these helpful articles and upgrade tips.

Get in Touch

We love feedback. Fill out the form below and we'll get back to you as soon as possible.