Brace for these 5 big changes in Bootstrap 4
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.
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.
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.)
This almost goes without saying, but IE8 support is dropped entirely from Bootstrap 4. Good riddance -- unless, of course, you're building apps in an environment where IE8 is mandated. In that case, stick with Bootstrap 3, as the makers of Bootstrap have pledged to support 3 "for the forseeable future ... with critical bug fixes and documentation improvements."