Canarys | IT Services


what’s new features are coming in Bootstrap4


What is Bootstrap?

Bootstrap is a collection of tools for creating responsive websites in web applications. It is  free and open source framework . In which Twitter Bootstrap is currently the most popular frontend framework. It enables developers to build mobile-first and responsive websites.

List of Bootstrap4 Features Coming in 2016

1.  Replace LESS with Sass

One of the biggest changes in Bootstrap 4 is moving from LESS to Sass. Till now Bootstrap has used LESS. Sass Complier written in C/C++. Now Bootstrap 4 will compile much faster than before.

2.  New Grid System for Smaller Screens

Bootstrap 3 currently has 4 grid classes for columns, .col-xs-* for mobile phones, .col-sm-*(768px & up)  for tablets, .col-md-*(992px & up)  for desktops, and .col-lg-*(1200px & up) for larger desktops. Bootstrap 4 will increase the grid system with a fifth one that will facilitate developers to target smaller devices under 480px viewport width.

3. Added Outline Buttons

Bootstrap 4 has added some new button styles with “Outline Buttons”. Outline Buttons appear hollow or are simply inverses of a regular button.


4.  Brand New Bootstrap Cards

Cards are new components in Bootstrap4 which can be used to display information as a page or a container. It has replaced wells, panels and thumbnails. It supports different kinds of content such as links, text, images, headers, footers and many more with a variety of background colors.


5.     Convert From Normalize.css to Reboot.css

In Bootstrap 3 we use Normalize.css as its CSS reset. Bootstrap 4 alpha it uses Reboot.css file. Reboot was built upon Normalize.css and it is a collection of element-specific CSS to provide a simple baseline which are styles using only element selectors.

6.  Added New Classes for Spacing

Bootstrap 3 already has classes like floating or the clearfix, but Bootstrap 4 adds even more. The new spacing classes allow developers to quickly change paddings and margins on their sites.

For example adding the .m-a-0 class links a style rule that sets margins to 0 on all sides of the given element (margin-all-0). While margins use the m- prefix, paddings are styled with the p- prefix. 


7.  Tooltips and Popovers Powered By Tether

With the help of third party library (tether), we can easily use tooltip and popover in websites. If you want to use this you can simply include tether.min.js just before the bootstrap.js.

8.  Improved Media Queries

In Bootstrap 3, media queries used pixels to control its responsive layout. In Bootstrap 4 this will convert to em.


9.       New Class ‘Inverse’ for Tables 


  10. 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. There is four different sizes right now. The larger the number, the larger the heading size


11. Footprint will be 30% Smaller

Bootstrap 4 will be 30% smaller than the latest Bootstrap 3 build. It previously was around ~123kb and now will be a mere ~88kb. This is a huge reduction for not losing any features.

12.  Bootstrap4 will not Support for IE8

Bootstrap 4 will not be support Explorer 8. One of the biggest problems with IE8 is that it doesn’t support CSS media queries, which play an important role in implementing responsive design within the framework. If you need IE8 support, then keep using Bootstrap3.

13.  Dropped Glyph icons Font

Bootstrap 3 comes with over a dozen reusable glyph icons components which can be used for different purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.