Bootstrap 4: Top 5 features
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Bootstrap 4 has been around for a long while now; but it was officially released on the 19th of January 2018 - with a whole host of changes and new tricks compared to its predecessor.
These are the top 5 features or changes that we've come to love:
1. The Flexbox Grid
One of the biggest overhauls has been the change from floats to flexbox for the grid system. This came with a small downside in the form of losing support for browsers such as Internet Explorer 9. However, with it came all the new powers that flexbox holds.
With the power of flexbox, we can align our columns in almost any way we want using classes such as .justify-content-center or .align-items-end. We can change the direction of our rows, making vertical layouts much easier to implement while maintaining responsiveness.
Without going into too much detail, all the new classes and responsive utilities can be found on the Bootstrap 4 Grid documentation page. Here are a couple of examples:
Columns without a specific value will now take up space, based on how many columns are in a row. The following code is an example taken from the Bootstrap documentation showing how a basic 2 column and 3 column layout would be made.
<div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>
Fully responsive and mobile-first
The new grid is completely optimised for a mobile-first approach to web development and the new responsive classes make it super easy to get a great layout no matter what device you're using. As you can see from the example below, the columns will stack up on smaller devices and then stretch out on anything larger than the defined sm breakpoint (by default 576px).
<div class="row"> <div class="col-sm-8">col-sm-8</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
2. Grid Tiers
With Bootstrap 3 we had the following tiers:
- xs: less than 768px
- sm: 768px and up
- md: 992px and up
- lg : 1200px and up
These seem perfectly acceptable but - with the rise of phablets and smaller devices covering such a wide array of actual sizes - I think it's time we had a little more control.
With Bootstrap 4 we've had an improvement:
- sm: 576px and up
- md: 768px and up
- lg: 992px and up
- xl: 1200px and up
It may not seem like such a drastic difference but that extra step in the phablet to tablet range allows so much more control over changes.
We don't have to stick to a single column layout all the way up to 768px; we can blow things out and simply make use of the real estate.
3. Syntactically Awesome Style Sheets (SASS)
If you've ever used Bootstrap 3, you'd know it was all or nothing in terms of the styles you'd be including, unless you decided to opt for a custom version or made use of the bootstrap-sass package.
Now, with Bootstrap 4 all the styles make use of SASS, a widely-used and very popular CSS preprocessor. This allows complete control and customisation of what parts of Bootstrap you include.
Prefer to use the original Normalize.css instead of the new Reboot? Don't include it!
Hate modals and quiver at the thought of using them? Throw them aside!
This will of course only be possible if you use a package manager to pull Bootstrap into your project and process all your styles via some form of bundler/build process (such as Gulp or Webpack). This is highly recommended if you want to get the full power from Bootstrap!
The team around Bootstrap must have noticed that a few of their components were being used for similar (if not the same) purpose, as we now have the general purpose Card component.
This has replaced wells, thumbnails and panels as a "content container". They can be used in a multitude of situations, such as a profile cards or tiles for a beautifully laid out information page.
They integrate perfectly with a number of Bootstrap's features, such as the navigation to add extra information or sub-content to your standard navigation. With the new Flexbox-based grid, sizing and positioning cards is also a breeze; by default they don't have any kind of fixed width and will constrain to the setup they are placed into. However, if you would like more control there are a handful of sizing utilities (.w-50, .w-75) for you!
5. Spacing utilities
One of my pet peeves is working out the spacing of elements in a layout.
Usually, you'd have to add specific margins and paddings to a class that could interrupt the purpose of the class, or create different spacing classes yourself.
However, how much granularity do you need? Do you base it all off of your layout system and make classes based on your standard gutter size?! What about responsive classes!?!
Bootstrap 4 has you covered! It takes all the hassle out of the implementation by giving you a set of utilities that make good sense and are completely configurable.
Need to add a little padding to the top and bottom of your shiny hero? Throw on a .py-3!
As noted above, they're completely configurable via SASS variables as shown here:
So, we've arrived at the end. These are just 5 great things about Bootstrap 4.
With how long ago this version was released, we'll probably have Bootstrap 5 in the very near future!
I wonder what will make it into our next top 5...