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.
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 an 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
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.
Keep checking this space as we keep you posted with updates!