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/

3. New placeholder class

It is a class which can be used to enhance the experience of your web application.  The main purpose is to show users that a particular section of the web is loading data.

4. Optimize accordion component

New accordion component is optimized to be easier to use than ever.

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.

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/