Developer News, More

Bootstrap 4 Alpha:Top Features And An Overview


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:

<div class="container">
<div class="row">
<div class="col-sm-3">
One of four columns
<div class="col-sm-3">
One of four columns
<div class="col-sm-3">
One of four columns
<div class="col-sm-3">
One of four columns


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

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,
  // Medium screen / tablet
  md: 48em,
  // Large screen / desktop
  lg: 62em,
  // Extra large screen / wide desktop
  xl: 75em
) !default;

$grid-columns:      12;
$grid-gutter-width: 1.5rem;



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

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();

// Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

// Set a width (to be used in or out of media queries)
@mixin make-col-span($columns) {
  width: percentage(($columns / $grid-columns));

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
@mixin make-col-pull($columns) {
  right: percentage(($columns / $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