Here at Steady Go our front-end framework of choice has always been Bootstrap 3. It’s quick to set up, offers great responsive actions and has some of the most useful built in JS functions I’ve found on the web (Bootstrap’s nav has saved me countless hours). But over the past couple months Twitter have started to roll out the new and improved Bootstrap 4, which is now in alpha stage. With the update they’ve rebuilt the framework and loaded it up with some incredibly powerful new features, so after building a couple of projects in this new version, I thought it was about time I listed some of my favorite new additions.
1. Flex Grid
2. Text Align
One of the biggest problems I used to run into with Bootstrap 3 was the “text-align” class and how stubborn it would be if I wanted to change the text position on mobile. As a rule of thumb I try to avoid using CSS Important rule where I can, as too many can really muddy the water. So when I had to overwrite a “text-align” class using the important rule it would always leave me thinking there had to be a better way. Fortunately, Bootstrap 4 has found that better way by introducing a range of extra media queries. I can now sleep easy knowing I can add a “text-md-center” class with no extra CSS required. It may seem like a small thing but the small things are the ones that really bug developers.
3. That New Breakpoint
One of the greatest tricks Bootstrap 3 has up it’s sleeve is the media breakpoints. The four breakpoints it has packaged in (XS, SM, MD, LG) cover almost all screen sizes and saves trying to remember what’s the width of a landscape iPad. The only screen size that Bootstrap 3 doesn’t quite lend itself to is landscape mobile devices. They kind of fall into this weird grey area between mobile and tablet. Bootstrap 4 has combated this issue though by adding an extra breakpoint, XL. This provides more flexibility over those pesky landscape mobile devices without having to create your own breakpoints.