Everyone loves Bootstrap! Being the most popular CSS framework in the world, web designers and developers got thrilled when its creators, Mark Otto and Jacob Thornton, took it to the next level with Bootstrap 4. Bootstap 4 alpha version came out in August of 2015. While it may not be wise to use it yet but let us see what it is going to have soon. Bootstrap 3 has been tremendously successful and so there is going to be some pressure from expectations to keep that going. There will be continuous support for version 3 if you were worried in any ways. The transition though, looks like a massive overhaul to include the best of everything with over 120,000 lines of code changes in the newest version.
Here are some of the major changes and confirmed features of Bootstrap 4 alpha.
From Less to Sass
One of the biggest changes in Bootstrap 4 alpha is moving from Less to Sass, thanks to Libsass. Bootstrap 3 used Less on its release, although there is a separate release for Sass. The reason behind this change is that Sass has a huge community of users or developers and are taking advantage of its faster compilation.
New Sass Customization Options
In Bootstrap 4 alpha all of the variable options for transitions, gradients and so on were moved to one single file and can be customized into Sass variables. You can take a look at here for all of the options that you can customized.
Enhanced Grid System
In Bootstrap 3 there are specific classes to target an element on different screen sizes via pixels but in Bootstrap 4 alpha there is this new smaller (-sm) tier to better target mobile devices. This time it’s in rem (for typography) and em units instead of pixels.
Check out the comparison table below to learn more.
Dropped Support for IE8
Bootstrap 4 alpha is drops Internet Explorer 8 support. 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.
It’s been a lot of headache for developers when it comes to trying to make sites work perfectly on old browsers, so this a big move. If you need IE8 support, then keep using Bootstrap 3.
Glyphicons Font Dropped
Bootstrap 3 comes with over a dozen reusable glyphicons components which can be used for different purposes. However there is no clear statement about this as of the moment.
Support for Opt-in Flexbox
Flexbox is basically a simple flexible layout options in CSS. It provides alignment of content within a parent element vertically with equal height columns via grid-based layouts. If you want to learn more about Flexbox, I would recommend this site.
There are three steps to activate Flexbox mode in Boostrap 4 alpha.
- Open the scss file and find the boolean variable $enable-flex.
- Change it from false to true.
- Recompile and all grid components will turn into Flexbox mode.
From Normalize.css to Reboot.css
If you’ve used Bootstrap 3 you’ll notice that it used Normalize.css as its CSS reset. Bootstrap 4 alpha it uses Reboot.css file. Reboot was built upon Normalize.css and it’s a collection of element-specific CSS to provide a simple baseline which are styles using only element selectors.
Improved Auto-Placement of Tooltips and Popovers
Tooltips and popovers help a lot of developers when it comes to ease of use. Thanks to Tether, a third party library it has improved. If you want to use this you can simply include tether.min.js just before thebootstrap.js.
Enhanced Media Queries
In Bootstrap 3, media queries used pixels to control its responsive layout. In Bootstrap 4 alpha this was converted to em instead.
New Class ‘Inverse’ for Tables
Bootstrap 4 alpha has a new prefix –inverse class that gives a background to the table itself. To use this check out the code below.
In order to maximize the power of Bootstrap 4 alpha, every plugin has been rewritten in ES6 which now comes with UMD support, methods, options and more.
Say Hello to Cards
Cards are new components in Bootstrap 4 alpha 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.