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.