Servage Magazine

The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework.

The New Grid

While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is equal to col-lg-4 in Bootstrap 4.

Changes in Components

Components, the main building blocks of Bootstrap, have changed dramatically in version 4. Panels, wells, and thumbnails have all been removed. A new component called card is meant to replace all of them. Cards are flexible components that can be customized enough to cover most of what panels, wells and thumbnails could do in Bootstrap 3.

In addition to these three, Glyphicons have also been removed. From now on, the Bootstrap team recommends using alternatives such as Font Awesome or Octicons. If you prefer Glyphicons, you can still manually add them to your project.

Utility Classes

In Bootstrap 3, you could hide certain elements based on the viewport size of a browser. For example, the hidden-xs class hides an element on extra small devices. In version 4, these utility classes have been replaced with other similar classes that also modify the display CSS property. For example, d-sm-none adds a property “display: none” to small devices, which does the same thing as hidden-sm.

To center block elements, you should now use the md-auto, which adds “margin: auto” to medium-sized devices. The old way was to use the center-block class. The text-center class still works for centering text.

Global Changes

While these are not directly related to JavaScript or the CSS classes provided by Bootstrap, there are some global changes too. The default font size has been increased from 14px to 16px, and units are primarily expressed in rems instead of pixels. Another important change is the move from LESS to SASS, to the SCSS syntax more specifically.

Conclusion

Bootstrap is a big framework, and as usually, major versions bring some breaking changes. Bootstrap 4 is still in development and version 3 won’t be deprecated anywhere in the near future. This gives some time to prepare using Bootstrap 4 in new projects and upgrading old projects to the new version if you decide to upgrade them.