Bootstrap 4 is coming. Are you ready?

In August of 2015, the makers and shakers of the Bootstrap core team announced an alpha release of Bootstrap 4. Currently, almost a year later, the release remains. Today I dive into the new features coming for the next stable release. Are you ready?

What’s new

There are a lot of new features according to the blog on get bootstrap.com. I think the best feature of all is fallback support for Bootstrap 3 users.

In the blog post the team mentions:

When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

This is huge for apps, websites, and any other platform that can’t quickly migrate to the most recent version.

At this point other features include:

Porting all fewer instances to Sass

Bootstrap now utilizes Libsass which is a C/C++ port of the Sass engine originally built upon Ruby. Users now no longer are dependent on Ruby which is both more universal and quicker.

Grids & Flexbox

Wanna use the default Bootstrap grids? How about Flexbox grids? Well, you have that option now based on a few configurations.

• When opting in for Flexbox the entire grid will switch from float to display: flex.
• Input groups move from display:table to display:flex
• The media component moves from display:table to display:flex

Hopefully, you see the pattern. Flexbox by nature was built to provide more flexible layout patterns all while using similar parameters.

How to enable Flexbox support

1. If you want to make the switch to flexbox you’ll need to open the _variables.scss file and find the $enable-flex variable.
2. Change it from false to true
3. Recompile and save.

You also have the option to reduce bloat and remove the source Sass files for grids. Find out more here.

Wells, panels, and thumbnails become cards

If you are familiar with Bootstrap 3 you may recall wells. In version 4 of Bootstrap, wells, panels, and thumbnails get replaced by cards.

The drive of a card is to provide a flexible content container. You can include headers and footers as well as a variety of content, backgrounds, and display options.

Cards are also a commonality in web and application design today. They stand apart and offer great support for multiple screen sizes.

A basic example of the markup looks like this:

<div class="card">
  <img class="card-img-top" data-src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Which renders to this:

A huge list of other options and features can be found on the current documentation page.

An opinionated reset is known as Reboot

Bootstrap 4 builds upon the Normalize.css file and takes a more opinionated approach all within a single Sass file they call reboot.

Some common approaches for reboot include but are not limited to:

• Using rem units instead of ems for scalable component spacing
• Avoiding margin-top altogether. Vertical margins can collapse and cause unexpected results.
• Keep any font declarations to a minimum, while using inherit when possible.

Enhanced Customization

Customizations now come embedded in the Sass as opposed to v3 where an additional stylesheet was required for theming purposes. Updating simple variables can now completely transform the appearance wherever you wish

So long IE8

Finally, Bootstrap drops support for IE8. This means framework can now take advantage of more modern units such as ems and rems which provides a much richer and less hacky experience for designers and developers. Pixels are no more in Bootstrap 4.

JavaScript re-write

All Bootstrap 4 plugins have been updated and rewritten to take advantage of ES6. Read more about ES6 and what’s to come for the future of applications worldwide.

Themes

A new side project is now available which is a market for Bootstrap themes. These tap into the newest version of Bootstrap offering stylish downloadable themes that are pre-configured to suit your needs. If you want to save loads of time an official bootstrap theme may be exactly what you are looking for.

There’s more

There’s always more than meets the eye with Bootstrap. I’m still finding features I’ve never used. With everything now being ported to Sass its like I can breathe again! I’m excited to see how Bootstrap 4 shapes the web. Be sure to keep an eye on the alpha docs as well as the official bootstrap blog for more updates regarding the official release.

You can also follow the progress of development on Github if you’re interested in getting down to the fine details.