What’s New in Bootstrap 4?

Bootstrap • CodingSam Norton • September 03, 2015 • 4 minutes READ

Everyone loves Bootstrap! Being the most popular CSS framework in the world, web designers and developers got thrilled when its creators, Mark Otto and Jacob Thornton, took it to the next level with Bootstrap 4.

Bootstrap 4, day 110. 295 files changed, 19,848 insertions(+), 26,606 deletions(-). And -37kb of *minified* CSS.

— Mark Otto (@mdo) October 27, 2014

On Aug. 19, Bootstrap 4 alpha was released with the removal of support for IE8. Of course, there are still going to be a couple of alphas before they move to the beta phase, but this gives us a glimpse on what to expect on the next versions.

By the way, Bootstrap 4 alpha will be in SCSS … sounds cool right?

It’s a bit overwhelming how much time has passed by since the last version of the Bootstrap framework. If you remember Bootstrap 1.0, there were a small number of features that were limited to grids, typography, and lists, and not until Bootstrap 2.0 was the framework fully responsive.

Bootstrap 3.0 came with a flat design and lots of new features and bug fixes. Now Bootstrap 4 has even more features, dropping support of Jurassic age web browsers.

Here are some of the major changes and confirmed features of Bootstrap 4 alpha.

From Less to Sass

One of the biggest changes in Bootstrap 4 alpha is moving from Less to Sass, thanks to Libsass. Bootstrap 3 used Less on its release, although there is a separate release for Sass. The reason behind this change is that Sass has a huge community of users or developers and are taking advantage of its faster compilation.

New Sass Customization Options

In Bootstrap 4 alpha all of the variable options for transitions, gradients and so on were moved to one single file and can be customized into Sass variables.

You can take a look at here for all of the options that you can customized.

Enhanced Grid System

In Bootstrap 3 there are specific classes to target an element on different screen sizes via pixels but in Bootstrap 4 alpha there is this new smaller (-sm) tier to better target mobile devices. This time it’s in rem (for typography) and em units instead of pixels.

Check out the comparison table below to learn more.

Dropped Support for IE8

Bootstrap 4 alpha is dropped Internet Explorer 8 support. One of the biggest problems with IE8 is that it doesn’t support CSS media queries, which play an important role in implementing responsive design within the framework.

It’s been a lot of headache for developers when it comes to trying to make sites work perfectly on old browsers, so this a big move. If you need IE8 support, then keep using Bootstrap 3.

Glyphicons Font Dropped

Bootstrap 3 comes with over a dozen reusable glyphicons components which can be used for different purposes. However there is no clear statement about this as of the moment.

Support for Opt-in Flexbox

Flexbox is basically a simple flexible layout options in CSS. It provides alignment of content within a parent element vertically with equal height columns via grid-based layouts.

There are three steps to activate Flexbox mode in Boostrap 4 alpha.

• Open the scss file and find the boolean variable $enable-flex.
• Change it from false to true.
• Recompile and all grid components will turn into Flexbox mode.

Say Hello to Cards

Cards are new components in Boostrap 4 alpha that can be used to display information as a page or a container. It has replaced wells, panels and thumbnails. It supports different kinds of content such as links, text, images, headers, footers and many more with a variety of background colors.

From Normalize.css to Reboot.css

If you’ve used Bootstrap 3 you’ll notice that it used Normalize.css as its CSS reset. Bootstrap 4 alpha it uses Reboot.css file.

Reboot was built upon Normalize.css and it’s a collection of element-specific CSS to provide a simple baseline which are styles using only element selectors.

Improved Auto-Placement of Tooltips and Popovers

Tooltips and popovers help a lot of developers when it comes to ease of use. Thanks to Tether, a third-party library it has improved.

If you want to use this you can simply include tether.min.js just before the bootstrap.js.

Enhanced Media Queries

In Bootstrap 3, media queries used pixels to control its responsive layout. In Bootstrap 4 alpha this was converted to em instead.

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

New Class ‘Inverse’ for Tables

Bootstrap 4 alpha has a new prefix –inverse class that gives a background to the table itself. To use this check out the code below.

<table class="table table-inverse">
<thead>
<tr>
<th>Label 1</th>
<th>Label 2</th>
<th>Label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>

The code above will output the image below.

JavaScript Plugins are Rewritten

In order to maximize the power of Bootstrap 4 alpha, every plugin has been rewritten in ES6 which now comes with UMD support, methods, options and more.

Wrapping Up

There are a lot of new features to expect in Bootstrap 4. Remember that this is just an alpha version which means even more things will come with the beta version.

Anticipating what will come by the time Bootstrap 5 is released, there will be more intensive changes on classes and prefixes. I believe it will drop more support on the older versions of browsers, which are messing up website layouts, and will focus more on modern browsers, making the developer’s job a lot easier.

Have you used Bootstrap 4 alpha yet? Share your experiences in the comments.