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

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!

Questions?

Thanks

Bootstrap 4

By ktasim

Made with Slides.com

Bootstrap 4

  • 273

More from ktasim