Back to Blog Home

Whats New In Bootstrap 4

Ranvijay Kumar Bhaskar| Front End | 7 months



Finally the wait is over and Bootstrap 4.0 stable version is now released. Bootstrap over the the years has become the de facto standard for front end development. For this version, the entire library is re-written from scratch including many new features which leverage HTML5 and advanced web technologies, were added. While new features now enable many advanced new UI look and feel,  at the same time it has made Internet Explorer 9 and 8 and iOS 6 outdated as Bootstrap has ended their support.

Bootstrap 4.0 has lot of new and interesting stuff. Some of the fresh things about it are :

  • Support for Glyphicons has been dropped
  • Bootstrap 4 is now 30% smaller than Bootstrap 3
  • Bootstrap 4 size is only 88 kb (approx.)
  • Now, it’s extremely safe to use JQuery with new Bootstrap. It will improve performance. JQuery 2.0 is much smaller, faster and loaded with rich features.
  • Bootstrap plugins are written in ES6 and compiled with Babel. 

Let’s go in-depth and understand what is there in Bootstrap 4.0 and what got deprecated.

 

What’s new in Bootstrap 4.0?

 

Flex

Flex is one of the most awaited feature that is now included with Bootstrap 4.0 by default. Flex helps to easily manage element’s alignment, layout using few classes.

Let’s see how flex simplifies our life in Bootstrap.

Controlling direction of elements using flex

<div class=”d-flex flex-row-reverse bg-info”>

<div class=”p-2">enpointer 1</div>

<div class=”p-2">enpointer 2</div>

<div class=”p-2">enpointer 3</div>

</div>

Will result in

Controlling order of elements using flex

<div class=”d-flex flex-nowrap”>

<div class=”order-3 p-2">First enpointer item</div>

<div class=”order-2 p-2">Second enpointer item</div>

<div class=”order-1 p-2">Third enpointer item</div>

</div>

Will result in

 

The example are many like flex-column-reverse, flex-column, flex-row, justify-content, align-items, and so on, Flex can turn any application into an awesome looking UI with awesome design. You can refer more details in official bootstrap site about Flex.

 

Float

Say bye to pull that was there till bootstrap v3.o, now this has been replaced by float. It sounds much better now. Let’s have a look at before and after

Bootstrap 4.0

<div class=”float-left”>enpointer Float to the left!</div>

Bootstrap 3.0

<div class=”pull-left”>enpointer Float to the left!</div>

 

Display and Print

Display and Print has been fully updated in bootstrap 4.0 using flex. Now it supports all display values. Syntax:- d-{breakpoint}-{value}

Breakpoint can be sm, md, lg, xl, print.

Value is display property eg:- none can be a display property

Example:-

<div class=”d-md-none”>Hide on screens wider than md</div>

 

Height and Width Simplified

Now working with height and width are super simple. It’s a piece of cake now. Let’s look at few self-explanatory examples to see how simple it has become.

<div class=”w-50">Width 50%</div>

<div class=”h-50">Height 50%</div>

<div class=”mh-100">Max-Height 100%</div>

 

Text Alignment and Font

Similar to height and width, Text alignment and fonts have also been improved. Let’s see self-explanatory examples. Again flex is playing very important role here.

<p class=”text-left”>Text is left aligned!</p>

<p class=”text-xl-center”>Text is centered only on extra large screens!</p>

 

Colors and Border in Bootstrap 4.0

New colors are now added to pre-existing color library. Now we can make UI brighter and better than before. Border is a newly introduced feature which helps us to add border quickly to any element. Let see few self-explanatory examples.

<p class=”text-light bg-info”>enpointer</p>

Makes text light and background to blue

 

<p class=”text-light bg-info border border-danger”>enpointer</p>

Adds red border around

 

Target Only The Latest Modern Browsers

You heard it right! If you are thinking to use bootstrap 4.0 in your project, make sure that you are targeting new browsers. Since Bootstrap 4.0 is using flex, which is incompatible with older browsers like internet Explorer 9 & 8. Also iOS 6 is outdated for Bootstrap 4.0. That’s a good news as well, because now you can target better browsers and put rich contents and a better User Experience. So please target Internet Explorer 10+ and iOS7+ while designing websites using bootstrap 4.0. So, if you are migrating an existing project to Bootstrap 4.0, make sure to check browser dependency. Bootstrap 4.0 might not be for you.

 

Welcome to Sass

Bootstrap is now officially Sass first project.
 “_variables.scss” contains all the settings you need to modify or customize your theme.
 “bootstrap.scss” will hold all the import directives now. So now you can selectively apply only those imports that you require.

Now you can customize grid breakpoints, as described below

$grid-breakpoints: (

xs: 0px,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px

) !default;

 

Bootstrap 4.0 Reboot

Reboot is an element specific CSS changes which has been introduced in Bootstrap 4.0 to provide consistent base to build upon. Reboot builds on top of Normalize, and provide many HTML elements with styles using only element selectors. There is no classes here to make changes to elements. It modifies elements at pure level. Few important resets are box-sizing: border-box change, em to rem, and many form of element resets.

Some changes introduces by Reboot are:-

  • Changed from .img-responsive to .img-fluid
  • Changed from .img-rounded to .rounded
  • Changed from .img-circle to .rounded-circle
  • Changed from .control-label to .col-form-label
  • Changed from .btn-default to .btn-secondary
  • Changed from .divider to .dropdown-divider

 

 

Cards instead of Panels and Wells

Bootstrap 4.0 has now removed Panels and Wells that we used to see in older versions. Now it has introduced Cards which seems to be taking place of Panels and Wells. Card is very flexible and offers headers and footer option along with content, background and lots more as a configuration option. This card design is similar to Google’s material design.

Let’s see one awesome example that will explain why well and panels are no more needed.

<div class=”card” style=”width: 18rem;”>

<img class=”card-img-top” src=”https://i.imgur.com/TGq6WgL.png" alt=”Card image cap”>

<div class=”card-body”>

<h5 class=”card-title”>Enpointer</h5>

<p class=”card-text”>Wow!! Amazing !! Awesome!! This is the best community ever.</p>

<a href=”#” class=”btn btn-primary”>Go somewhere</a>

</div>

This results in awesome and sexy card, similar to Google’s material design

 

That was all about new features introduced in Bootstrap 4. Hope you liked it. Please do share with your friends and comment which of these features you liked the most. Stay tuned for more updates. 

 

 

 

 

 



Join 1000+ People Who Subscribe to Weekly Blog Updates

Back to Blog Home