Update 1: Bootstrap 4 is out of Beta!
We’ve updated the article to talk about a bunch of stuff that B4 brings. Scroll to the bottom for the deets!
The wait is finally over! Mark Otto, and Jacob Thornton, the creators of the much-beloved Bootstrap, released a stable Bootstrap 4 beta earlier this year (Woohoo!).
Bootstrap is already synonymous with responsive web design, a feature that you simply cannot do without in this day and age. Mobile traffic makes up over half the traffic for most sites! With this new update, Bootstrap’s gone truly mobile-first as a web framework.
We’ve tried summarizing the 7 major feature changes in this version that offer it an advantage over its predecessor.
Read on!
1. Less LESS, More SASS!
Until now, Bootstrap had used LESS as its CSS preprocessor. But from this update onwards, Bootstrap’s source is Sass!
This is great because, over the years, front-end developers have all grown to love CSS preprocessor, and this one in particular. Look at this Google trend, for instance.
There’s no surprise to the growing interest towards SASS, looking at the immense power it offers to the developers, making life easier.
Many customization options — rounded-corner angles, gradients, transitions, shadows, etc — are now handled as Sass variables, and not in a stand-alone style sheet. There’s no denying how much easier this makes managing web styling.
Also, the fact that SASS compiles faster than LESS, thanks to Libsass (a C/C++ implementation of a SASS compiler) – makes this update all the more efficient.
2. Flexbox: What The Flex?
Bootstrap was already known for its responsive grids. Now with this update, they’ve gone a step ahead and fully embraced flexbox, by providing opt-in flexbox support, making their responsive grid all the more powerful.
The Bootstrap official guide states:
More specifically, [Flexbox] provides
-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.
Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way. Only use the opt-in flexbox feature if you don’t need to provide support for IE9.
But since this is an opt-in, and not a feature change per se, to opt-in flexbox, locate the _variables.scss file, and set the value of $enable-flex as true. Recompile this file, and your components will be flex based.
3. Exit: Panels, Wells, Thumbnails. Enter: Cards.
Bootstrap defines Cards 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
With the introduction of cards, the panels, wells, and thumbnails see a way out the door. Based on flexbox, cards offer easy alignment and mix well with other bootstrap elements. Needless to say, they also provide a ton of control and customization! Also, to keep things familiar, the Bootstrap team has gone ahead with the familiar title, header, and footer elements for cards.
Have a look at the code snippet below
This will generate the card as displayed: 
Many devs have tried experimenting with this component, and have come up with some great codepens. Check them out for some inspiration, or, head over to the official guide and explore more of this beautifully flexible UI component!
4. Hello, Reboot!
Earlier, Normalize.css was Bootstrap’s CSS reset, but from this update on, it’s changed to Reboot.css. Reboot can be simply seen as the extension of Normalize. Bootstrap just extended the features of Normalize, by building more rules upon it. The primary aim of the move was to include all generic CSS selectors and reset styles in a single, easy-to-use SCSS file. Take a look at the source code to dive deeper.
Another feature is that the new reset styles set the box-sizing property to border-box on the root (<html>) element. This makes each element on the page inherit the same styling. These changed style rules make responsive layouts a lot more manageable.
Head over to this handy demo to get more clarity on the difference between border-box and content-box layouts.
5. Dynamic Typography using REMs
From this version on, the default font size has been changed to 16px, from 14px, which means the overall webpage will be textually more visible, and bigger.
Bootstrap has also based its font sizing completely on ‘rem’s. The W3C defines rem as
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
Check this out, for instance.
The use of rems has also brought in a new typographic component: DISPLAY HEADING
These headings allow the developer to give a nice “stand-out” style to any element. Bootstrap 4 has four sizes for display headings (class: display-*). Read the code snippet below and its output to see how it works.
The above code produces
Icons also see a major change in this update, with Bootstrap completely dropping the Glyphicon icon font.
6. Sorted Padding and Margins
Bootstrap already had utility classes, like the ones that changed floating, or the clearfix. Those were practical and really useful. But this update takes a step further here, by providing new spacing classes, with easily understandable syntax, thereby allowing developers to quickly manage padding and margins on the website
The above code is both intuitive and easy to understand. Take the ‘.p-a-0’ class for instance. The ‘p’ prefix stands for ‘padding’, ‘a’ for ‘all’, and 0 denotes the value. So, quite simply, we can say “provide 0 padding on all sides for the element we’ve applied this class on”. Easy, right?
Just like that, to play with the margins, use ‘m’ as the prefix instead of ‘p’, and watch the magic happen! Head over to the docs to get more details on these utility classes, and more.
7. Improved Button Styling
Bootstrap has introduced the .btn-outline-* classes and dropped the gradients on the buttons. They’ve also definitely gone flatter this time.
This is how the buttons looked in Bootstrap 3:
Bootstrap 4 onwards, these buttons are much more flat, and look like this:
The second button here uses the “.btn-outline-*” class. Look at the following code snippet of the above output
In Conclusion
The BETA version is still going through some checks and some bug fixes. When Bootstrap 4 finally gets released, looking at all the changes, it’s going to be huge. So, for those of you who are unfamiliar with this framework, this is the best time to get your hands on it.
For those of you looking to migrate to the latest version, head over to the official guide, or, follow this article.
Keep checking this space as we keep you posted with updates!
Update:
Bootstrap 4 is out of Beta!
There are no breaking changes since the Beta version, but some of the tricky bugs have been resolved. Other than that, there are some much-needed improvements:
- Utility classes and print styles have seen an update. There’s an improvement in the way the printed pages are rendered. This has been done to ensure that pages are sized reasonably and not rendered as mobile devices.
- Additive border utilities (ex. border-top) have been included. It has been defaulted to a solid 1px light gray border. This update makes it easier to quickly add all borders or a subset of borders to your elements.
- For those who’re living on the edge and don’t want to use SASS, this new update adds Theming documentation for using Bootstrap provided CSS variables.
- To ensure more control over the flexbox grid, the update brings responsive .order-0 and .order-last classes.
One thing that designers, developers, and SEO consultants will agree on – is that a better looking site is a better performing lead channel. Here are some useful statistics on how UX influences performance.
In addition to this, there are noticeable improvements to extending and reusing variables, and general code cleanup.
Further, Bootstrap has added brand new examples for the stable version. Some of the outdated examples have been removed and a few others have been completely overhauled. Some of the new/updated examples include:
- The album example: This example has been updated to include more content and improved mobile rendering.
- Pricing: This is one of the brand new examples for this release. This is a fully custom, responsive page built using Bootstrap’s card and utility components.
- Checkout: Another brand new example, this is an extensive form that includes form layouts, vaidation styles, grids, and much more.
- Products: A cheeky riff on Apple-styled marketing pages, this example is largely built with Bootstrap’s utility classes.
- Blogs: This is one of those examples that has seen a massive overhaul. Gone is the two-column layout that sported a blue header. The new design features a magazine-style layout with responsive navigation and featured posts.
- Dashboard: The overhauled Bootstrap dashboard features a live ChartJS example and an improved sidebar with Feather icons.
Bootstrap 4 has laid out further release plans on GitHub using project boards. They’ve also announced the overhaul of the Bootstrap Themes this year. We can’t say anything about the exact timeline, but these could be available as early as “the first quarter launch”. About to feature at least ten brand new themes, we hope the overhaul happens sooner than later.
Till then, stay tuned!
