As in our previous article Materialize vs. Bootstrap?, we have revealed some useful info now here we proceed with the Bootstrap 4 and what new features it offers.

Bootstrap is a free front-end and open-source library for creating websites as well as web applications. It comprises of HTML- and CSS-based design templates for typography, buttons, forms, navigation and many other interface components, alongside optional JavaScript extensions. But, what about the latest Boostrap4! There are lot more new features that are different from its previous version.

What’s New in Bootstrap 4

What’s New in Bootstrap 4


In Bootstrap4, .panel and .well have been replaced by .card. This is a great advancement as cards are most helpful tool for making mobile responsive websites. However, new layouts and content options are also new added feature. New layouts are available for use and these are concise, grouped, and of same height.


In New Bootstrap4, there are new 5 break points that can make web developer’s web development process an easy going job. Let’s check the last 5 options or accommodating wide variety of devices and screen width. These 5 options are XS, SM, MD, XG, SL. These new changes are user friendly and they support typical portrait and landscape screen width.

In BS 4 there is an additional tier. The additional tier allows users to target smaller devices less than 544 px, and generate layouts specifically for this screen width.

Font is Larger:

In New Bootstrap4, font is minimum 16px, and new “Display headings” has been included that really standalone item. The new `em` based sizing is a great option.

Some components have been taken away from Bootstrap 4. The Glyph icons icon fonts are no more available, but other fonts like Font Awesome, Oct icons or Ion icons are good to use. The Affix jQuery plugin has also been removed. The new option is using HTML5 position: sticky poly fill instead.

Utility Classes:

One of the notable new features in Bootstrap4 is the addition of responsive floats that allows users to float a component (right,left, etc..) grounded on the grid tier. For example, if developers can consider a situation where they prefer to impose right-align elements (float:right) on exact breakpoints, and else gets returned to the dodging behavior of float:none. Here pull-md-right is applied to float right only on the mid grid tier.

Bootstrap 4 Alpha 4 Released:

Now when Bootstrap 4 alpha 4 is released, the Bootstrap developers have declared that they are paused development on Bootstrap 3, to make faster progress on Bootstrap 4.

These are the new elements in Bootstrap4; however, development process is still ongoing. We need to keep our eyes fixed for next updates.

Hope you found article is interesting and worth to read, if you still have any query on responsive web design and UI design then kindly contact UI Design Company Bangalore and get your doubt cleared.