On 19th August, 2015 Bootstrap Team has celebrated their 4th birthday with an announce of alpha release most loved front-end framework of the planet, Bootstrap 4. A framework of choice for many web developers. There is a ton of major changes to Bootstrap 4. So, without any further ado, I am going to dive right into the framework and show you all the new features the bootstrap 4 has to offer.
1. Less to Sass
Bootstrap 4 moved to Sass from Less. Mainly Two main reason, faster compilation and huge community base of Sass.
Altough, Bootstrap 3 has an official separate Sass version on Github.
2. Opt-in flexbox support
To enable flexbox you have to set $enable-flex boolean true in the _variables.scss file. After recompile all grid components will use Flex Box. Cool.
flexbox provides simpler and more flexible layout options in CSS. As per B4:
- Easy vertical alignment of content within a parent element.
- Easy reordering of content across devices and screen resolutions with the help of media queries.
- Easy CSS-only equal height columns for your grid-based layouts.
3. Dropped IE8 support
IE8, every web developers worst nightmare. B4 No longer support IE8. If you still want use bootstrap in ie8 then continue with B3.
4. Improved Grid System
As B4 dropped ie8 support. Pixels have been swapped for rems and ems. now, A container now has max-width set in rems. Due to spacing accuracy in rems grid system will be more mobile devices friendly.
5. Improved Media Queries
Media queries has been written in em instead of pixel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @media (min-width: 34em) { .container { max-width: 34rem; }}@media (min-width: 48em) { .container { max-width: 45rem; }}@media (min-width: 62em) { .container { max-width: 60rem; }}@media (min-width: 75em) { .container { max-width: 72.25rem; }} |
6. Welcome, Cards
Cards make it easy to show the same information visually across many different screen sizes. Cards are usually very flexible, placed on top of one another, but they can also be used like a “page” or an extensible content container.
check out this example:
7. Bye Bye panels, wells, and thumbnails
In B4 cards replace our old panels, wells, and thumbnails.
You can implement these functionality easily with modifier classes for cards.
8. Reboot.css
For css reset Bootstrap 4 forked Normalize.css and after adding some own style created reboot.css
9. ES6 support in all JavaScript plugins
all of the plugins has been rewritten in ECMAScript6 to take advantage of the latest JavaScript enhancements. They also now come with UMD support.
10. jQuery 2
As earlier I have mentioned ie8 support has been dropped. It’s safe to use jQuery 2.0 with Bootstrap 4.
11. Tether
B4 provides tooltips with better auto-placement using Tether
12. Display Headings
class display-$ has been using to give a larger heading over h tags. here is an example:
Conclusion
There is a lot of excitement and buzz around Bootstrap 4 at the moment. Lots more features have also been included. Already 1340 commits and 122,000 lines of changes by 50 contributors in v4 so far and they are not even done yet! this still in alpha !!
The general development and release plan according to bootstrap:
# A few alpha releases while things are still in flux.
# Two beta releases after features and functionality are locked down to really test things out.
# Two release candidates (RCs) to really test things out closer to production environments.
Then, the final release!
Meanwhile, you can check our b4 alpha excellent docs & examples here.
