What’s New in Bootstrap 4?

  •  5 Comments

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.

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

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.

Bootstrap 4 Grid System

Dropped Support for IE8

Bootstrap 4 alpha is drops 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

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. If you want to learn more about Flexbox, I would recommend this site.

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

Boostrap 4 Cards

Cards are new components in Boostrap 4 alpha which 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

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

Newsletter

5 Comments
  1. Kris Voten Sep 3, 2:28 pm

    Awesome! Can’t wait to try this out!

    Indeed a new era of features are coming.

    Thanks!

  2. Andrea Brandi Sep 8, 5:49 pm

    Actually ems for breakpoints are going to be dropped for turning back to pixels. And “finally” B4 will switch to JQuery 2.x by default after that IE8 is gone. I hope many others will follow these advices and just leave older browsers to their fate (IE9 and older if you ask me). It’s really time to move forward.

  3. Joshua Pinter Sep 16, 7:35 pm

    Thanks for the summary, guys. Any plans to update your Flat UI to support Bootstrap 4?

    Thanks,

    Josh

    • Adrian Sep 16, 9:00 pm

      Hi, we don’t have plans to update the Flat UI.

      Sorry.

      • Joshua Pinter Sep 16, 9:28 pm

        That’s fair. Thanks for the reply. I suppose you’ve opened it up to others filling that gap with your market place.

        Cheers.

        Josh

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!