10 Reasons Bootstrap 4 is Better

Or, why the move to flexbox is a big improvement

Bootstrap 4 has made the switch to flexbox, and here is why it’s the best Bootstrap yet.


1 — The new XL grid tier

In Bootstrap 3, the smallest breakpoint is 768 px. There are many devices with screen widths less than 768 px. As a result, in 3.x there was no easy way to create different grid layouts for typical smartphone screens (~375px). There was also no way to distinguish between portrait and landscape mode on various mobile devices.

With screens getting smaller, Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 576 px. Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the opposite.

All the 3.x tiers slide up in 4.x, to fit in the new 576 px to 768 px tier at the bottom. While the old 3.x col-xs-* supported screen widths under 768 px, the new 4.x col-xs-* tier supports screen width under 576 px. This new smaller `xs` range means improved support portrait smartphones.


2 — The flexbox-based grid

Of course, the big news on Bootstrap 4 is flexbox. Things that were difficult in 3.x such as Equal-height Columns and Vertical Centering are now the proverbial “cake” in Bootstrap 4.

Equal-height Columns

In Bootstrap 4, we say goodbye to the infamous “height problem” that plagued 3.x layouts everywhere. Flexbox makes columns in each row auto-magically the same height, and gone are the downsides of float:left. “Uh-oh-uneven Panels” are now replaced with beautiful same height Cards.

Vertical Centering

Getting elements to center or bottom align vertically has always been a challenge with CSS and Bootstrap. Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: Auto-margins and/or Flexbox Utilities.

Less Bloat

Now that Bootstrap 3’s pesky floats are gone, so are all of the column ordering (push/pull) and offset class. In their place are the cleaner flexbox ordering and auto-margin utility classes.


#3 — The new auto-layout grid

In Bootstrap 3.x it was easy to create full-width layouts of 1, 2, 3, 4, 6 or 12 units. However, when you wanted to create a layout with an odd number of columns there was no hope. Basically, any non-factor of 12 (5, 7, 9, 10, 11) can’t be equally & evenly divided using the 12 grid units.

With Bootstrap 4’s new auto-layout grid, you can forget about 12. Now any number of columns across is possible. This new “unit-less’ grid is entirely powered by flexbox, and can be combined with the classic 12-unit grid for seemingly endless possibilities.

Since flexbox is working behind the scenes for the auto-layout columns, the columns adjust around their content but remain equal in width across the viewport.

To override the equality of the auto-layout (.col) columns, the classic 12-unit grid col-* classes can be used alongside col to force a specific percentage-based width. This improves precision and allows us to use unit less grid columns that partially span or fill the viewport. It even makes it possible to create half-unit columns.

Bootstrap 4 Auto-layout Columns

#4 — Navbar Customization is Easier

In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. It’s also a simple matter of using the new navbar-expand-* classes to change the Bootstrap 4 Navbar breakpoint. Now the Navbar has 4 breakpoint options.

Change the Navbar Breakpoint

To change to a different breakpoint, just use the appropriate navbar-expand-* class:

  • navbar-expand-sm = collapse on xs widths <576px
  • navbar-expand-md = collapse on sm widths <768px
  • navbar-expand-lg = collapse on sm widths <992px
  • navbar-expand-xl = collapse on lg widths <1200px
  • navbar-expand = expanded on all widths
Bootstrap 4 Navbar Breakpoints

It’s also easy to create a Navbar that is always collapsed (mobile version), or never collapsed (remains horizontal).

Deep-dive:
Changing the Bootstrap 4 Navbar Breakpoint


Flexbox enables us to easily change the alignment of the Navbar and it’s content (brand, links, forms or text). The default Navbar content is left aligned, but one of the more common layouts is a centered brand.

Center the Navbar Brand

<nav class="navbar navbar-dark navbar-expand-md bg-success justify-content-between">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link pl-0" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a href="/" class="navbar-brand mr-0">Brand</a>
<div class="navbar-collapse collapse dual-nav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">..</a> </li>
<li class="nav-item"><a class="nav-link" href="">..</a></li>
</ul>
</div>
</nav>

Center the Navbar Links (menu items)

<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-between">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between">
<div><!--placeholder--></div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row">
<li class="nav-item"><a class="nav-link" href="">..</a></li>
<li class="nav-item"><a class="nav-link" href="">..</a></li>
</ul>
</div>
</nav>

Of course there are many other Navbar alignment scenarios:

Bootstrap 4 Navbar Align

#5 — Flexbox Utils Mean Endless Layouts

There are many common layout scenarios that were a challenge in Bootstrap 3. Nearly all of them required additional CSS to obtain. Now many common web layouts come “out-of-the-box” with Bootstrap 4:

Sticky footer

Holy-grail

Off-canvas sidebar

Fixed-fluid layout


#6 — The New Spacing Utilities

At first, you might think CSS classes that wrap various margin & padding sizes are fairly useless. But, do you remember attempting any of the following with Bootstrap 3?

The Bootstrap 4 spacing utils make it easy to change horizontal or vertical whitespace anywhere. There is also a new .no-gutters class to remove the gutter (spacing between columns) from the gridrow.

Bootstrap 4 Spacing Utilities Demo

#7__ Icons are gone, and that’s good!

Many critics claimed Bootstrap 3 was bloated, so the bloat-causing Glyphicons have been removed from Bootstrap 4.

Let Bootstrap be Bootstrap. Since Bootstrap is a responsive design framework, it’s better to keep the icons external to Bootstrap.

With all of the other great open-source font icons that are available, you now have the flexibility to add what you want. If you are looking, here are some free Bootstrap 4 friendly icon font options.


#8 — Responsive Sizing

These are some new sizing utilities that let you easily set a percentage of 25, 50, 75 or 100 which is helpful when you want to apply height or width to an element without using the grid columns. The comes in very handy for many things such as setting the width of table columns.


#9 — Responsive Floats

Now elements can be made to float:left or float:right only on specific grid tiers, to support use cases like:

“Float right only on xs

“Float left on xl and lg, center on md and down”

These responsive float scenarios pop up frequently on StackOverflow. However, since BS4 is now flexbox, floats become less relevant so you may find some of the responsive flexbox alignment classes just as helpful.


#10 — Auto-margins & vertical centering

Getting elements to center or bottom align vertically has always been a challenge with CSS and Bootstrap. The desired vertical alignment may be within a parent container, or relative to adjacent elements.

Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: Auto-margins, Flexbox Utilities, or the Display Utilities along with Vertical Align Utilities.

At first, the Vertical Alignment Utilities would seem an obvious choice, but these only work with inline and table display elements. Here are some Bootstrap 4 vertical alignment options and scenarios…


1 — Vertical Center Using Auto Margins:

One way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-body w-25">Card</div>
</div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 — Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

<div class="row">
<div class="col-6 align-self-center">
<div class="card card-body">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

<div class="row align-items-center">
<div class="col-6">
<div class="card card-body">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>

Vertical Center Different Height Columns Demo


3 — Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-body d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>

Vertical Center Using Display Utils Demo


Read more on the new Bootstrap 4
and learn more on the Bootstrap 4 Guide.

❤ Bootstrap

If you liked this, also explore Bootstrap 4 Examples & Snippets, and keep learning How to… Bootstrap.