What’s new in Bootstrap 5

(Remark: This article is written as of Sep 5, 2021 when version of Bootstrap 5 is v5.1.0)

In web development field, very few developers don’t know “Bootstrap”, the popular front-end framework which has been developed continuously up to version 5. The stable version was officially released on May 5, 2021. (The first alpha version was released on June 16, 2020)

Let’s see what’s new in Bootstrap 5 and what’s changed from Bootstrap 4.

1. New logo

Bootstrap 5 came with the redesigned logo and many cool icons for users. For more information, please see https://icons.getbootstrap.com/

2. New offcanvas component

Offcanvas is a new component of Bootstrap 5. It can be switched between show and hide via JavaScript. Below is the offcanvas image. For more details, please see https://getbootstrap.com/docs/5.1/components/offcanvas/

5. Updated and new forms component

• The basic components of forms such as checkbox, radio, select, file have been simplified and enabled to show the same result in all web browsers.
• Floating labels are the new components which many developers have waited for a long time and finally the Bootstrap development team has provided it in this version.

• File input components have been customized to be easy to use without specifying additional class like in version 4.

• Creating a web layout is much easier than ever. Some classes have been removed and many classes have been improved to run better, look better and reduce the complexity of the code. For more details, please see https://getbootstrap.com/docs/5.1/forms/layout/

6. Adding right-to-left web support (RTL)

Many languages in the world are written from right to left, so the Bootstrap development team added right-to-left web design, so that developers don’t need to code by themselves.

7. Overhauled utilities

In this Bootstrap 5, the development team has added new utilities and improved the original utilities for many points as below.

• Utility API is for extending default set of utility class in Bootstrap 5 to fulfill needs of developers. For more information, please see https://getbootstrap.com/docs/5.1/utilities/api/
• Utility Class contains classes to enhance web design to be more beautiful and flexible. For more details, please see https://getbootstrap.com/docs/5.1/utilities/
• More code examples are provided for implementation. See more details in https://getbootstrap.com/docs/5.1/examples/

8. Browser support

To use new and updated features, Bootstrap 5 doesn’t support the following older browsers anymore.

• Microsoft Edge Legacy
• Internet Explorer 10 and 11
• Firefox 60 or older
• Safari 10 or older
• iOS Safari 10 or older
• Chrome 60 or older
• Android 6 or older

9. JavaScript

One of the big changes of Bootstrap 5 is that it removed dependency with jQuery, so its components can be used easily with other popular frontend frameworks such as react.js, vue.js. Anyway, the developers who want to use jQuery can still use the components in Bootstrap 5 with jQuery.

Besides the above, Bootstrap 5 has many other improved things. If you want to see more details, please access to the official website of Bootstrap 5 here. https://getbootstrap.com/docs/5.1/getting-started/introduction/

Resources

• _{https://blog.getbootstrap.com/2021/05/05/bootstrap-5/}
• _{https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/}
• _{https://getbootstrap.com/docs/5.1/getting-started/introduction/}