Bootstrap has earned a reputation as a convenient, broadly supported path to get a good-looking Web interface up and running in short order. With version 4 of the framework on the horizon, major changes are in store. Given that it's a change to the left of the decimal point, you can expect a lot of breaking updates.
Here's a rundown of crucial alterations in Bootstrap that designers looking to migrate to the new framework need to keep in mind. Note that while version 4 is still an alpha release, there's a good chance the described changes are set to appear in the finished version as well.
Less Less, more Sass
Originally, Bootstrap used the Less CSS preprocessor as a way to compile variables (media widths, color choices) into its CSS for release. For version 4, Bootstrap uses Sass, widely regarded as the more powerful of the two, with a broad developer community. Many of the customization options -- rounded-corner angles, gradients, transitions, shadows, and so on -- are now handled as Sass variables, rather than in a stand-alone style sheet.
This shouldn't matter much if you're downloading and using Bootstrap as-is. But if you're customizing Bootstrap's look with an add-on style sheet or using Bootstrap's existing Less customizations, it's time to bone up on Sass and learn what options are handled where.
Note that you can automate a lot of the build process by using Bootstrap's customizer, which can be configured with either a check box matrix or an uploaded
config.json file. The customizer hasn't been upgraded for Bootstrap 4 yet, but it's an inevitability.
Flexible boxes, aka "flexbox," is a new layout mode for CSS that's designed to better accommodate the positioning of elements across multiple screen sizes, layouts, and resolutions.
Bootstrap didn't support flexbox before, in large part because not all browsers supported it yet. Version 4 provides flexbox as an opt-in ingredient that requires a CSS recompilation -- although, again, it can most likely be done with the online customizer when that's updated for version 4.
Say good-bye to wells, thumbnails, and panels, and say hello to cards, a generic consolidation of and replacement for a number of different block-style layout elements in Bootstrap. Cards can create anything from image galleries to flowing Pinterest-like layouts. But remember that they're replacements for the above-mentioned elements, not complements, so there's no transition period.
Icons are gone
Bootstrap 3 came with a subset of the Glyphicons icon font, a handy way to add iconography to a site. Now Glyphicons is gone, and there's nothing slated to replace it. You can stick with Bootstrap 3 for the time being to continue using Glyphicons, or you can swap in, say, the MIT-licensed Ionicons as a replacement -- though the latter will require manual integration with Bootstrap. (Bootstrap had entries in its CSS file that mapped certain Glyphicons to certain styles; the same can be done with Ionicons.)
Sign up for CIO Asia eNewsletters.