What’s New in Bootstrap 5 – SitePoint

Bootstrap is one of the most popular CSS libraries. It allows developers to easily use beautiful styles and components and create responsive websites. Using Bootstrap can save developers time, especially with components that are used in almost every project.
Bootstrap 5 (the current major version, released in May 2021) has brought with it tons of changes and improvements, including the addition of new components, new classes, new styling for old components, updated browser support, the removal of some old components, and much more.
In this article, we’ll cover what has changed in Bootstrap 5, what has been dropped, and, most excitingly, what’s new.
When to Use Bootstrap (and when not)
Bootstrap bills itself as “the world’s most popular framework for building responsive, mobile-first sites”, and with 152k stars on GitHub, I don’t think that claim is too far-fetched. Especially for beginners, Bootstrap is a great way to start creating modern and clean websites. It makes it easy to realize complicated, mobile-first designs and provides many components that you’ll likely need across multiple projects.
Bootstrap has a low learning curve and lends itself well to static websites that don’t require a build step, as you can just reference the library from Bootstrap’s CDN. This is in contrast to some other popular CSS frameworks that might be optimized for use with a bundler or task runner.
You should also be aware, however, that Bootstrap isn’t a silver bullet. For the uninitiated, Bootstrap makes it easy to produce messy and convoluted markup. It’s also a relatively heavy library in terms of kilobytes (although this is improving with each release), so it might not be the best choice if you’re only using one or two of its features. As with any abstraction, it will help enormously if you have a good grasp of the underlying technology and can make an informed decision on when to use it.
Upgrading from Bootstrap 4 to 5
Upgrading from Bootstrap 4 to 5 is generally pretty easy. Most of the components, their classes and utility classes that were available in Bootstrap 4 are still available in Bootstrap 5. The main thing you should focus on when migrating is whether or not the classes or components you’re using have been dropped. If they’ve been dropped, there are replacements or ways to achieve the same result using utility classes. The second thing you should focus on is switching from data-* attributes to data-bs-* in components that require JavaScript as a part of their functionalities. (We’ll cover this more in the next section.)
If you use Bootstrap’s Sass files, there are some variables and mixins that have been renamed. Bootstrap 5 has an extensive and detailed section all about customization, as well as details about the Sass variables and mixins for each component in their respective documentation pages.
What’s Changed
Bootstrap 5 brings core changes to Bootstrap as a library, with a change in required dependencies, browser support and more. It also brings changes to the components and classes that we’ve always used in previous versions.
jQuery no longer a dependency
As a major change from the previous versions, jQuery is no longer a dependency of Bootstrap. Now, you can use Bootstrap in its full glory without it, but you still need Popper.js. This change makes it easier to use Bootstrap in projects that don’t require or use jQuery — such as when using Bootstrap with React.
You can still use jQuery with Bootstrap if it’s a part of your website. If Bootstrap detects jQuery in the window object, it will automatically add all components to jQuery’s plugin system. So, if you’re migrating from v4 to v5, you don’t need to worry about this change, and you can still use jQuery with Bootstrap as necessary.
But what if you use jQuery in your website, but you don’t want Bootstrap to use jQuery? You can do that by adding the attribute data-bs-no-jquery to the body element of the document:

How does Bootstrap work without jQuery? For example, in v4 you would use the following code in JavaScript to create a Toast element:
$(‘.toast’).toast()

In Bootstrap 5, you can use that same code to create a Toast element if your website already uses jQuery. Without jQuery, you’ll need to use something like the following code to create a Toast element:
const toastElList = […document.querySelectorAll(‘.toast’)]
const toastList = toastElList.map((toastEl) => {
return new bootstrap.Toast(toastEl)
})

This just uses Vanilla JavaScript to query the document for elements having a .toast class, then initializes a Toast component on the element using new bootstrap.Toast().
Browser support change
Up until v4, Bootstrap used to support Internet Explorer (IE) 10 and 11. As of Bootstrap 5, support for IE has been fully dropped. So, if you need to support IE in your website, you probably should be careful when migrating to v5.
Other changes in browser support include:
Firefox and Chrome support now starting from version 60
Safari and iOS support now starting from version 12
Android Browser and WebView support now starting from version 6
Change in data attributes
Bootstrap 5 has changed the naming of the data attributes that are generally used by its components that use JavaScript as part of their functionality. Previously, most components that relied on some JavaScript functionalities would have data attributes starting with data-. For example, to create a Tooltip component in Bootstrap 4:

Notice the usage of data-toggle and data-placement. In Bootstrap 5, data attributes for these components now start with data-bs to easily namespace Bootstrap attributes. For example, to create a Tooltip component in Bootstrap 5:

Instead of using data-toggle and data-placement, we use data-bs-toggle and data-bs-placement. If you use JavaScript to create components in Bootstrap, there’s probably no need to make any changes. However, if your components rely only on data attributes to function, you need to change all data attributes that start with data to start with data-bs.
Bugs fixed
In Bootstrap 4’s documentation under Browsers and devices, there’s a list of bugs that occur on some browsers. These bugs are no longer listed in the same list for Bootstrap 5. The list includes the following:
Hover styling was being applied to elements on touch events on iOS, which wasn’t desirable as it was considered as an unexpected behavior.
Using .container in Safari 8 and above caused a small font size on printing.
Border radius was being overridden by validation feedback (but could be fixed by adding an extra .has-validation class).
The list of bugs and issues in Bootstrap 4’s documentation also details bugs that happened on browser versions that are no longer supported.
Other changes
There are many more changes that are either minor or don’t cause a drastic, noticeable change. These changes are:

Bootstrap 5 now uses Popper v2. Make sure to upgrade your version of Popper. Popper v1 won’t work anymore, as Bootstrap 5 requires @popperjs/core instead of the previous popper.js.

Bootstrap 5 can now be used as a module in the browser using a version of Bootstrap built as an ECMAScript module.

As Libsass and Node Sass (which were used in Bootstrap 4) are now deprecated, Bootstrap 5 uses Dart Sass to compile the source Sass files to CSS.

There’s been a change in some Sass variable values, like $zindex-modal that changed from 1050 to 1060, $zindex-popover from 1060 to 1070, and more. For that reason, it’s recommended to check the Sass variables of each component or utility classes on Bootstrap 5’s documentation.

Previously, to make an element hidden but keep it discoverable for assistive technologies, the class .sr-only was used. This class is now replaced with .visually-hidden.

Previously, to make an interactive element hidden but keep it discoverable for assistive technologies, you needed to use both .sr-only and .sr-only-focusable classes. In Bootstrap 5, you just need to use .visually-hidden-focusable without .visually-hidden.

Blockquotes with a named source are now wrapped by a

element.
Here’s an example of how Blockquotes are now in Bootstrap 5:

See the Pen Bootstrap 5 Blockquotes by SitePoint (@SitePoint)on CodePen.

In previous versions, table styles were inherited. This means that if a table is nested inside another table, the nested table will inherit the parent table. In Bootstrap 5, table styles are independent of each other even if they are nested.

Border utilities now support tables. This means that you can now change the border color of a table using the border color utilities.
Here’s an example of using border utilities with tables in Bootstrap 5:

See the Pen Bootstrap 5 Bordered Tables by SitePoint (@SitePoint)on CodePen.

The default styling of breadcrumbs has been changed, removing the default grey background, padding and border radius that was in previous versions.
Here’s an example of the style of Breadcrumbs in Bootstrap 5:

See the Pen Bootstrap 5 Breadcrumbs by SitePoint (@SitePoint)on CodePen.

Naming of classes that used left and right to refer to the position to use start and end has been changed. For example, .dropleft and .dropright in dropdowns are replaced with .dropstart and .dropend respectively.

Similarly to the previous point, utility classes that uses l for left and r for right now use s for start and e for end respectively. For example, .mr-* is now .me-*.

The .form-control-range class that was used for range inputs is now .form-range.

Gutters are now set in rems rather than the previous px.

.no-gutters has been renamed to .g-0 as part of the new gutter classes added (more on that in later sections).

Links are now underlined by default, even when not hovered.

Custom form element class names have changed from .custom-* to be part of the form components classes. For example, .custom-check is replaced by .form-check, .custom-select is replaced by .form-select, and so on.

Adding .form-label to labels is now required.

Alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips now use the same padding values using the $spacer variable.

Default padding in badge elements is now changed from .25em/.5em to .35em/.65em.

Wrappers for toggle buttons are used with checkboxes and radio buttons. The markup is also now simplified. In Bootstrap 4, a toggle button checkbox was achieved with the following markup:

In Bootstrap 5, it can be done in a simpler manner:

The active and hover states of buttons have increased contrast now in color.

Carousel chevron icons now use SVG from Bootstrap Icons.

The close button class is now renamed from .close to .btn-close, and uses an SVG icon instead of ×.

Dropdown dividers are now darker for better contrast.

Navbar content should now be wrapped within a container element. For example in Bootstrap 4:

Becomes in Bootstrap 5:

The .arrow class in popover components is now replaced by .popover-arrow, and class .arrow in Tooltip components is now replaced by .tooltip-arrow.

The popover option whiteList has been renamed to allowList.

The default Toast duration is changed to 5 seconds.

The default value for fallbackPlacements in tooltip, dropdown and popover components has been changed to the array [‘top’, ‘right’, ‘bottom’, ‘left’].

.text-monospace has been renamed to .font-monospace.

.font-weight-* has been renamed to .fw-* and .font-style-* to .fst-*.

.rounded-sm and .rounded-lg have now been replaced by a range of rounded classes .rounded-* from 0 to 3.

What’s Been Dropped
Change can come at a cost. As a new version comes out that brings changes and enhancements, it also drops a few of the old features that it previously supported. With this ne release, some of Bootstrap’s components, utility classes or other features have been dropped.
Most of the items that were dropped from Bootstrap 5 were dropped because the same can be achieved by using utility classes instead of making them a standalone component. Also, some items that have been dropped had proven to be unused or unnecessary.
Here’s a list of what’s been dropped from Bootstrap 5:

As mentioned in the previous section, support for IE has been completely dropped.

Badge color classes (for example, .badge-primary) have been dropped in favor of using the color utility classes (for example, .bg-primary).

The .badge-pill badge class, which gave a badge a pill style, has been dropped in favor of using .rounded-pill, which achieves the same result.

The .btn-block button class has been removed, as the same result can be achieved by using display utility classes like .d-block.

The Masonry .card-columns card layout that was previously available has been dropped, as it had a lot of side effects.

The flip option for dropdown components has been removed, in favor of Popper’s configurations.

The Jumbotron component has been dropped, as the same result can be achieved by using utility classes.

Some of the order utility classes (.order-*) have been dropped, as they previously ranged from 1 to 12. Now they range from 1 to 5.

The media component has been dropped, as the same result can be achieved with utility classes.

The .thead-light and .thead-dark classes have been dropped, as .table-* variant classes can be applied to all table elements.

The .pre-scrollable class has been dropped, as it’s not used much.

The .text-justify class has been dropped, due to responsiveness issues, as has the .text-hide class, because its method is old and shouldn’t be used. And the .text-* classes don’t add hover or focus states to links anymore. Those .text-* classes should be replaced with .link-* classes.

Input groups that have multiple inputs or components don’t need to use .input-group-append and .input-group-prepend anymore. Elements that should be in the group can just all be added directly as children of the .input-group.
Here’s an example of using input groups with multiple inputs:

See the Pen Bootstrap 5 Input Group by SitePoint (@SitePoint)on CodePen.

.form-group, .form-row, and .form-inline have all been dropped in favor of layout classes.

.form-text doesn’t have a set display property anymore. The element’s display will depend on whether the element itself is a block or inline element.

Validation icons have been removed for elements and