4 New Favorites in Bootstrap 4
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.
Let's start off with the big one, the one that's solved some of the big questions in life, such as "how can I make these the same height" and "how can I center this vertically". The grid system in Bootstrap 4 now comes loaded up with Flexbox, meaning you can now match height of columns and vertically center elements without those javascript hacks. It also offers the ability to switch the ordering of columns on different screen sizes, which is another common problem that has raised it's head every other project. These handful of things seem simple but had no real elegant solution until now, so not only does it make your site faster (not having to load those JS solutions) but it also means the code is cleaner. If you've not delved into the world of "display: flex;" yet, you're about to save yourself a whole lot of time.
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.
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.
Last but definitely not least is a new concept to Bootstrap called cards. A card is essentially a content container that offers a load of classes you can use to format your content. You can think of it as something that might hold a blog post on a listing page. It offers an array of useful options like thumbnail images, inline footers and titles. My favorite feature of cards though is the Masonry style layout it provides. Masonry has never been the most bulletproof solution in the world and that's before you mention having to load two separate Javascript libraries to get it to work. So as well as making life a little bit easier it also speeds up loading times, it's a win win.
