What's coming up in

BOOTSTRAP 4

A little history

Bootstrap 1.0

Released in 2011, Bootstrap 1.0 wasn’t even responsive

Bootstrap 2.0,

It went fully responsive and they slowly started phasing out Internet Explorer 7 support.

Bootstrap 3.0.

They went “flat” and removed gradients, added a ton of new features, and upgraded their grid to be insanely more powerful:

Now, we’ve arrived at Bootstrap 4.0

With so much features and changes to talk about!

Let's have a look at

them!

Goodbye less, Hello sass

In all versions, it used Less as its main preprocessor.

Improved grid system based on "rems"

So what's the effect? Nothing much.
HTML structure is same as Bootstrap 3.
But, values like width, padding and margins are converted to rems.
An example is here.

An opt-in Flex Box grid

Internet Explorer 9 doesn’t support Flex Box.
This is optional.Change $enable-flex value in _variables.scss and recompile.
One of these benefits are: matched heights of columns with Flex Box.

Cards

Cards replace Bootstrap 3’s old panels and wells.
A demo here:

Quick Starts

You can include Bootstrap 4 through:

git clone https://github.com/twbs/bootstrap.git

bower install bootstrap

npm intstall bootstrap

composer require twbs/bootstrap

meteor add twbs:bootstrap

New Unit (rems) for Typography

Typography is completely based on the rem.
All font sizes are relative to the root element (aka, the html tag).

Display headings

Display headings are like lead text for your headings. This allows you to give a nice custom “stand-out” style to any element.
Here's a pen

A 30% Smaller Footprint

Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build!
From ~123kb to ~88kb.

Then

Now,

Spacing utility classes

Quickly add spacing in any direction via margin or padding using a utility class.

<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

Here’s the pattern: [margin or padding]-[direction]-[size]
or m/p-a/t/r/b/l/x/y-0/<blank>/md/lg

Some of the other changes:

Completely dropped IE8 support.
Glyphicons gone!
New reset component called Reboot.css replaced old Normalize.css.
Tooltips are enhanced with Tether.
Pro themes from Bootstrap.

And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Plus, they’re not even done yet!