Starting mid-August in 2011 for Twitter, Bootstrap has been a powerhouse of front-end frameworks and is arguably the most widely used framework to date. In its version 2 (v2) update Bootstrap added “responsive functionality to the entire framework” and in the v3 update it was focused on mobile usability. More recently version 4 has come out and there is a plethora of changes. Some for the better, some not. I will be going over some of the major changes and summarizing the update.
Firstly, we’ll focus on the topic of mobile usability. V4 now officially supports Android v5.0 Lollipop’s built-in browser and WebView. However, v4 has also dropped support for IE8, IE9, and iOS 6 and is now only supporting IE10+ and iOS 7+. Looking at the grid system, we find v4 has added a new grid tier called Extra small (xs). This new xs tier is for devices smaller than 576 pixels, and the “new” sm tier is for 576 pixels and up. This new xs tier has shifted each tier above it by one, making the old medium (md) tier (originally 992 pixels and up) to be called large (lg). The old lg tier (1200 and up) is now the xl tier. There are now 5 tiers in place to fit to a multitude of possible devices. We found this explanation to be a little confusing so here’s a visual representation of the change.
| Ver | xs | sm | md | lg | xl |
| 3 | < 768px | ≥ 768px | ≥ 992px | ≥ 1200px | – |
| 4 | < 576px | ≥ 576px | ≥ 768px | ≥ 992px | ≥ 1200px |
Moving on, changes have been made to improve usability in the adoption of Flexbox. Flexbox supports vertical and horizontal alignments, which is important for creating responsive designs for mobile devices such as cell phones and tablets that have a screen rotate feature. Another of the major differences in v4 is the replacement of panels, thumbnails, and wells with the new alternative cards. Cards are an “all-encompassing component” made by bootstrap to streamline the usage of content containers. Rather than having many different components, cards are streamlined to encompass the usability of all three of the replaced components. Users can now utilize the many different options of cards to attain their goal.
A surprising change in this update is discontinuation of Glyphicons in favor of external linkage. Those who still desire to use Glyphicons can access them through their website, but the small icons are no longer included in the Bootstrap code. Bootstrap officials also suggest the use of Octicons and Font Awesome as other alternatives.
There are a sizeable number of updates and changes, mostly consisting of renamed options and combining entities together to make Bootstrap simpler. The final take away for this version update is that Bootstrap will be easier to customize and mold for specific needs of individual projects. For specific version change information, visit Bootstrap’s website and read their migration page.
Related Links
https://v4-alpha.getbootstrap.com/about/history/
https://v4-alpha.getbootstrap.com/components/card/
https://getbootstrap.com/docs/4.0/migration/
