Bootstrap 4 is coming. Are you ready?
Published in Web Design
In August of 2015, the makers and shakers of the Bootstrap core team announced an alpha release of Bootstrap 4. Currently, almost a year later, the release remains. Today I dive into the new features coming for the next stable release. Are you ready?
There are a lot of new features according to the blog on get bootstrap.com. I think the best feature of all is fallback support for Bootstrap 3 users.
In the blog post the team mentions:
When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.
This is huge for apps, websites, and any other platform that can’t quickly migrate to the most recent version.
At this point other features include:
Porting all Less instances to Sass
Bootstrap now utilizes Libsass which is a C/C++ port of the Sass engine original built upon Ruby. Users now no longer are dependent of Ruby which is both more universal and quicker.
Grids & Flexbox
Wanna use the default Bootstrap grids? How about Flexbox grids? Well, you have that option now based on a few configurations.
- When opting in for Flexbox the entire grid will switch from
- Input groups move from
- The media component moves from
Hopefully, you see the pattern. Flex box by nature was built to provide more flexible layout patterns all while using similar parameters.
How to enable Flexbox support
- If you want to make the switch to flexbox you’ll need to open the
_variables.scssfile and find the
- Change it from
- Recompile and save.
You also have the option to reduce bloat and remove the source Sass files for grids. Find out more here.
Wells, panels, and thumbnails become cards
If you are familiar with Bootstrap 3 you may recall wells. In version 4 of Bootstrap, wells, panels, and thumbnails get replaced by cards.
The drive of a card is to provide a flexible content container. You can include headers and footers as well as a variety of content, backgrounds, and display options.
Cards are also a commonality in web and application design today. They stand apart and offer great support for multiple screen sizes.
A basic example of the markup looks like this:
<div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>
Which renders to this:
A huge list of other options and features can be found on the current documentation page.
An opinionated reset known as Reboot
Bootstrap 4 builds upon the Normalize.css file and takes a more opinionated approach all within a single Sass file they call reboot.
Some common approaches for reboot include but are not limited to:
remunits instead of
ems for scalable component spacing
margin-topaltogether. Vertical margins can collapse and cause unexpected results.
- Keep any
fontdeclarations to a minimum, while using inherit when possible.
Customizations now come embedded in the Sass as opposed to v3 where an additional stylesheet was required for theming purposes. Updating simple variables can now complete transform the appearance wherever you wish
So long IE8
Finally, Bootstrap drops support for IE8. This means framework can now take advantage of more modern units such as
rems which provides a much richer and less hacky experience for designers and developers. Pixels are no more in Bootstrap 4.
All Bootstrap 4 plugins have been updated and rewritten to take advantage of ES6. Read more about ES6 and what’s to come for the future of applications worldwide.
A new side project is now available which is a market for Bootstrap themes. These tap into the newest version of Bootstrap offering stylish downloadable themes that are pre-configured to suit your needs. If you want to save loads of time an official bootstrap theme may be exactly what you are looking for.
There’s always more than meets the eye with Bootstrap. I’m still finding features I’ve never used. With everything now being ported to Sass its like I can breathe again! I’m excited to see how Bootstrap 4 shapes the web. Be sure to keep an eye on the alpha docs as well as the official bootstrap blog for more updates regarding the official release.
You can also follow the progress of development on Github if you’re interested in getting down to the fine details.