After many years of development, Bootstrap had an official 4.0 release on January 18th, 2018. Bootstrap has been a popular front-end framework for several years and the release of the new version is really exciting!
Because of its popularity, there have always been lots of new front-end developers looking to learn Bootstrap and with the recent release of Bootstrap 4, I’ve been writing a Bootstrap & SASS course for Evolving Web. If you’re interested in learning Bootstrap 4 and SASS, you can find out about the course over here.
This post outlines a few of the differences between Bootstrap 3 and Bootstrap 4.
SASS
When Bootstrap 3 was first released in 2013, the only CSS pre-compiler option was to use LESS. A few years later, a SASS version was released.
From the get-go, Bootstrap is SASS only. This may sound like bad news, but the CSS community has rallied around SASS over LESS for the last few years. By creating a single SASS-based codebase, this means developers can focus on only one branch of the framework.
The Bootstrap documentation has information on many build tools that you can use to compile the SASS files.
Flexbox
In Bootstrap 3, the layout and grid system was based on the CSS float property. This worked well for most people. Bootstrap 4 is now based on Flexbox. If you're not familiar with Flexbox, check out this guide from CSS tricks.
Basing the layout and grid system on Flexbox allows for some handy options when creating your layouts.
One quick example: Have you ever had a grid of “cards” of varying content length that you wanted to all be the same height? Before, you would have to use some JavaScript to detect the height of the tallest one, then apply that height with inline CSS to get them to match.
With Flexbox? You can do this with a purely CSS solution. Just one example where Flexbox makes layout much easier.
Grid System
If you’ve used Bootstrap 3, you’re likely familiar with the list of breakpoint prefixes:
- xs (extra small)
- sm (small)
- md (medium)
- lg (large)
If you wanted to create different column layouts for each screen size, you would use these prefixes in your CSS classes, such as: ‘col-sm-6 col-md-9’.
The default breakpoints for these media queries were a little bit limiting too (though you could override them if you prefer). Here’s how they stacked up:
- col-xs-* : (phones, less than 768px)
- col-sm-* : (tablets, 768px and up)
- col-md-* : (desktops, 992px and up)
- col-lg-* : (large desktops, 1200px and up)
In Bootstrap 4, these media queries, breakpoints, and prefixes have changed. Here’s the list with their media queries:
- col-* : (extra small, less than 576px)
- col-sm-* : (small, 575px and up)
- col-md-* : (medium, 768px and up)
- col-lg-* : (large, 992px and up)
- col-xl-* : (extra large, 1140px and up)
In Bootstrap 4’s defaults, we’ve been given another breakpoint, “extra large”.
The other thing to note is that we no longer write a prefix for “extra small”. We simply write ‘col-*’ and it’s implied that it’s extra small.
One frustrating thing I found about Bootstrap 3 was layout options for smartphones, especially ones with larger screens. It always felt a little bit underbaked. But now with two breakpoints underneath the “tablet” breakpoint, this makes layout on those devices much easier.
One more thing to note with Bootstrap 4’s grid system is that, with Flexbox, if you don’t use a column prefix on your div elements, Flexbox is smart enough to figure out the width of each one. Or, if you have a 3-column layout, and only give a column prefix to one of those columns, the other two columns will have expand to fill the remaining space in the rest of the row.
Utility Classes
While using Bootstrap 3, I often found I had to write a separate file for little ‘helper’ CSS classes. Sometimes, I just want to add a little bit of margin or padding on a single element, so I had to create a specific CSS class so that I could apply it to my element.
Luckily, in Bootstrap 4, there’s a full set of default utilities that allow you to apply things like colors, positioning, border styles, alignment, and visibility of elements.
Want to add a border to an element, but only on the top? There’s a utility class for that. Want to add some some padding on just the right-hand side of an image? Yep, utility class for that. Want to float an element to the right, but only on medium-sized screens? You got it.
Browser Support
Bootstrap 3 supported all major mobile browsers and Internet Explorer 8+, though some CSS3 and HTML5 properties weren’t fully supported.
Bootstrap 4 also supports all major mobile browsers, however official support for Internet Explorer 8 and 9 has been removed. The framework only officially supports Internet Explorer 10 and up.
Documentation
This may seem strange to say, but one thing I love about Bootstrap 4 reading the documentation.
When visiting a section in Bootstrap 3’s documentation, you were presented with a very long page detailing everything within that section. Mentally, I found this taxing.
In Bootstrap 4, each section has sub-sections with their own page. This may seem like a small thing, but I found I was much more focused on the thing that I was trying to accomplish while reading the documentation. The Bootstrap framework comes with a lot of bells and whistles and, in Bootstrap 3, I constantly found myself reading something, scrolling down a bit too far, and then getting distracted by another component.
Bootstrap 4’s documentation structure also makes more sense to me and seem much more human-centric. The sections now are:
- Getting Started
- Layout
- Content
- Components
- Utilities
- Extend
The ‘Content’ section is essentially for how basic typography, images, and tables are displayed in the browser, while 'Components' focus on functional elements like buttons, navigation, forms, etc.
And if you ever get confused, the documentation also has an auto-complete search box that quickly gets you to the sub-section you're looking for.
Using Bootstrap 4 with Drupal
Now that Bootstrap 4 is out and ready to use, there are many Drupal front-end developers eager to start using it. For the moment, the Bootstrap theme doesn't have a release that uses Bootstrap 4, but you can use it yourself by downloading the SASS files and compiling them along with your own styles in your theme.
Creating a theme from scratch like this has downsides (you have to figure out where to put classes, and do the work of deciding which parts of Bootstrap to use) but it also gives you more flexibility in how you adopt the framework. If you have experience creating Drupal themes and want to take advantage of Bootstrap 4's features, this is a great approach.
Conclusion
The changes between Bootstrap 3 and Bootstrap 4 are significant, but there are lots of improvements to take advantage of. It won't be hard for Bootstrap users to adapt to the new version of the framework, and it will be easier to pick up for those learning Bootstrap for the first time. But it will take time to upgrade from Bootstrap 3 to Bootstrap 4 on your existing projects.