Developer News, More

Bootstrap 4 Alpha:Top Features And An Overview

Bootstrap-4-alpha-top-features

All we know that yesterday was the 4th birthday of Bootstrap.And on this occasion the developer team of bootstrap released the features of upcoming Bootstrap 4 and there is some major changes on the upcoming version of bootstrap 4.It has been a massive undertaking that touches nearly every line of code.

Here in this article I would like to overview the features of Bootstrap 4.

Bootstrap 4 Alpha:Top Features And An Overview

In Bootstrap 4 it’s going to dropped the IE8 support.And the size of bootstrap.min.css  has been reduced from ~123kb to ~88kb.

Improved Grid System

In modified grid system of Bootstrap 4, there will be 3 major components- container, row and column. Container will be used for fixed width. For full width you can use container-fluid.

There are 5 grid tiers- extra small, small, medium, large and extra large. Each of the tier can be used on the basis minimum width. If you use .col-sm-4 then it will be working on small, medium, large and extra large devices.

Here is an example of 4 columns in a row:

 

Opt-in flexbox support

Another major features is the flexbox support.It is easy for the developer to flexbox support by using Bootstrap 4 – just need to switch a boolean and css also need to be recompiled.

Flexbox support is available for a number of Bootstrap’s components:

  • The entire grid system (mixins and predefined classes), which switch from floats to display: flex;.
  • Input groups, which move from display: table; to display: flex;.
  • The media component moves from display: table; and a number of hacky styles to a simple display: flex;.

Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt.

Checkout flexbox in original documentation.

 

Moved from Less to Sass

As Bootstrap 4 is moving SASS  from less it’s css will be more faster than ever.When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts.Here is the example:

 

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

 

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

 

Brand new customization options

Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, Bootstrap 4 moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.

 

Rewrote all our JavaScript plugins

Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.

 

New Documentation:

Forget about bootstrap 3 when you are working with Bootstrap 4. Documentation has changed completely. It is brand new documentation for bootstrap 4.

Get the original documentation.

There are a lots of other features coming in Bootstrap 4.

Take a short look of the major features coming in Bootstrap 4

  • Moved from Less to Sass
  • Improved grid system
  • Opt-in flexbox support is here
  • Dropped wells, thumbnails, and panels for cards
  • Consolidated all our HTML resets into a new module, Reboot
  • Brand new customization options
  • Dropped IE8 support and moved to rem and em units
  • Rewrote all our JavaScript plugins
  • Improved auto-placement of tooltips and popovers
  • Improved documentation

Check the official announcement of Bootstrap 4 Alpha Release

 

You Might Also Like

Leave a Reply