What is Bootstrap?
What’s New With Bootstrap 4?
So, now that we’ve gotten the Bootstrap introduction out of the way, I’ll take a moment to cover a few of the most important changes and updates in the latest Bootstrap revision. While there is no definitive release date scheduled for Bootstrap 4, and with 400+ issues still remaining for the v4 branch (as of writing this article), it’s probably safe to assume that a tentative launch is just around the corner as soon as remaining issues are resolved. Now, without further ado… here are just a few exciting updates to look forward to in Bootstrap 4…
Moving from LESS to SASS
Many web developers have heeded the CSS preprocessor call and migrated to the promise-land over the past few years. Here at Imagine Monkey, we’ve advocated the use of CSS preprocessors in our development stack because of the time it saves us using them by utilizing DRY as in Don’t repeat yourself (as opposed to WET, or Write everything twice). Akin to Foundation’s choice to use Sass as their preprocessor, Bootstrap 4 has also been built from the ground-up using Saas as opposed to Less due in favor of its ability to use variables & mixins (it also compiles faster thanks to Libsass).
Optional Flexbox Support
Flexbox, or “CSS Flexible Box Layout Module” is used mainly in responsive websites to provide a cleaner arrangement of page elements. Flexbox accommodates said elements inside flexible boxes that ensure that every feature is displayed properly, in any screen size or resolution.
Undoubtedly, from a front-end developers perspective, one of the neatest features of Flex-Box (hence the term “Flex”), is that the heights of columns will automatically match without needing to use “hacks”. No more forcing the height manually if your content doesn’t align properly. Yay.
New “Card” Component
Where there were once “.panel” and .”well” components in Bootstrap 3, these components have been depreciated in favor of the “.card” component. Cards are defined as:
– a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
ES6 Support & jQuery 2.0 Support
At Imagine Monkey, we’re advocates of client-side performance over fancy frills and other fancy elements which may bloat a website. Luckily, Bootstrap 4 is ~88kb compared to Bootstrap 3, which was ~123kb in size. That’s just a bit over a 30% increase in performance. And, when pulling Bootstrap in via MaxCDN – that’s 30% better performance when loading this offsite resource.
Wrapping things up, it’s not stretch of the imagination to believe that Bootstrap 4 will be anything less than a great advancement in the front-end UI framework world. Judging by the improvements and dedication from the core developers that we’ve seen so far, Bootstrap 4 appears to be shaping up as great leap-forward in modern front-end web development.
If you would like to learn more about Bootstrap 4, please find these additional resources: