Introduction
Bootstrap has been my favorite css framework because of it’s large amount of components and its well css structure. Bootstrap is currently the largest CSS framework which means it also has the most resources. Bootstrap has definately help me with my css workflow. I usually let bootstrap take care of the major layouts and RWD. After the layout is confirmed, I’ll dig in to each individual block and customize each block with my own css.
Recently Bootstrap 4 beta has been released. It was in alpha for A LONG TIME (~ 1 year). Since beta is released, I decided to use it with my current project. Here are some of my thoughts on this.
Big Upgrades
flexbox
The biggest upgrade in V4 is that it uses flexbox. Flexbox is one of newer features in css. It was released in 2016 and is quickly popularized. It’s purpose is to replace float for CSS layout. Flexbox offers an easier and powerful way of designing css layout. We are given more tools and flexability in bootstrap layouts especially in navigation, grid, and spacing.
We can customize that a specific margin to applied only in a certain width. For example, by applying .mt-4 .mt-sm-0, we can margin-top 4rem but when window width is larger than small we get margin-top zero. Before to accomplish this in bootstrap 3, we need to write custom media queries.
The downside of this major upgrade is that bootstrap 4 is not supported by ie8 or ie9. So if you still need to support those browsers, you can use bootstrap 3.
Others
- Other upgrades such as 2 more grid size xl and xs.
- Bootstrap uses sass instead of less. To customize bootstrap we can just edit the variable.scss
- We get more utilities in many components, grid, typography.
- Bootstrap also drop glyicons to reduce size.