What’s New in Bootstrap 5

August 17, 2021

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:

<body data-bs-no-jquery="true">
</body>

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:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

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:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

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 <figure> 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:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

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

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>

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:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

Becomes in Bootstrap 5:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

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 <select> elements with multiple.
The .card-deck class has been removed in favor of grid classes.
Negative margins have been disabled by default.
.embed-responsive-item elements are now removed in favor of applying the styling on all the children of ratios, which was previously Responsive embeds (more on that in the next section).

What’s New

Finally, Bootstrap brings a lot of exciting additions to its library in version 5. Some of these changes include new features, new supported concepts, new components, new utility classes and more.

Responsive Font Sizes is now enabled by default

Responsive Font Sizes (RFS) was in previous versions of Bootstrap, but it was disabled by default. Bootstrap 5 enables RFS by default, making fonts in Bootstrap more responsive. RFS is a side project created by Bootstrap to initially scale and resize font sizes responsively. Now, it’s capable of doing the same for properties like margin, padding, box-shadow, and more.

What it does is basically to calculate the most fitting values based on the browser dimensions, and these calculations are translated to calc functions when it’s compiled. Using RFS also ditches the previous usage of px to use rem, as it helps achieve better responsiveness.

If you’re using the Sass files for Bootstrap, you can now use mixins made by RFS, including font-size, margin, padding, and more, which allow you to make sure your components and styles are responsive.

Right-to-left support

Bootstrap 5 adds tight-to-left (RTL) support using RTLCSS. As Bootstrap is used all around the world, it’s a big and important step to make RTL support available out of the box. For that reason, Bootstrap 5 has ditched specific naming for directions (for example, usage of left and right) in favor of start and end. This makes Bootstrap flexible enough to work with both left-to-right (LTR) and RTL websites. For example, .dropleft is now .dropstart, .ml-* is now .ms-*, and more.

To make Bootstrap recognize and apply RTL stylings on your website, you need to set the dir of <html> to rtl, and add a lang attribute with the RTL language of the website. For example, lang="ar".

Finally, you’ll need to include Bootstrap’s RTL CSS file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

And with that, your website will support RTL.

New breakpoint

Bootstrap 5 brings support for the new breakpoint xxl targeting devices with width greater than or equal to 1400px. Previously, the highest breakpoint was xl, which targeted devices with width greater than or equal to 1200px. This change allows for better responsiveness for devices with larger screens, as the xl breakpoint was not enough.

Using the new breakpoint is similar to all of the other breakpoints. For example, to apply padding for devices width greater than or equal to 1400px, you can do that using the class .p-xxl-2.

Improved documentation

Although this is not part of the library itself, it’s good to note the improvement in the documentation of Bootstrap. Documentation in Bootstrap 5 has better organization of content, as components that have more extensive details in them have their own sections now. For example, the Form component in Bootstrap 4 was just one page with all the components crammed inside it. In Bootstrap 5, the Form component’s documentation is a section on its own, with subsections for different subcomponents including Form Control, Select, Input Groups, and more.

Additionally, the navigation in the documentation is easier now through the sidebar, especially for smaller screens. In Bootstrap 4, the table of content sidebar can’t be seen on smaller devices, making it harder to find the section required on the page. In Bootstrap 5, the table of content is always seen on all screen sizes.

Moreover, in Bootstrap 5 you can find all the Sass variables, mixins and functions for each component on its page. Previously, there was just a Theming page that had some details on how to change the theme variables in Bootstrap. Now, there’s a customization section on its own that has more details on how to customize Bootstrap’s theme.

New components

Bootstrap 5 brings some new components into the library. Some of these components were part of other components and are now standalone components.

Accordion

Previously, Accordion was part of the Collapsible component, rather than it being its own component. In Bootstrap 5, Accordion is a new component. With Accordion comes a new class, .accordion, that holds inside it a list of accordion items. Additionally, Accordions have a new style compared to the previous style in Bootstrap 4. Here’s an example of the accordion component:

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

Bootstrap 5 also adds some classes to change the styling of the Accordion. For example, .accordion-flush removes some of the styling of the default Accordion like the background or border colors. You can also make an accordion item always open by removing the data-bs-parent attribute from its .accordion-collapse element.

Offcanvas

Another new component is Offcanvas, which allows you to create an overlaying sidebar. It’s the sidebar that’s usually used on websites to show the menu on smaller devices. You can place it on any side of the page by using .offcanvas-start for left in LTR, .offcanvas-top for top, .offcanvas-end for right in LTR, and .offcanvas-bottom for bottom. You can also specify whether the Offcanvas should have a backdrop or not. Here’s an example of using the Offcanvas component:

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

Floating Label

Floating Label is a new component part of the Form components. It allows you to create an input whose label looks like a placeholder at first, then when the input receives focus the label floats to the top of the input above the value. It also works on <select> elements and <textarea> elements. Here’s an example of using floating labels:

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

Other additions

Other than the new components, there are new classes for existing components, new utility classes, new helper classes, and more. Here’s a list of all the other new additions in Bootstrap 5:

Class .row-cols-auto has been added, which allows the columns to take their natural width.
A new utility class has been added to justify content called .justify-content-evenly.
Previously, gutters between columns were achieved using spacing utilities. Now, you can set the gutter between columns using the new Gutter layout utility. To set a horizontal gutter, use .gx-*. To set vertical gutter, use .gy-*. To set gutter both horizontally and vertically, use .g-*.
A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.
Vertical alignment utility classes can now be used with tables.
A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.
There’s now the option to change the divider in Breadcrumb using the CSS variable --bs-breadcrumb-divider.

Here’s an example of changing the divider to >>:

See the Pen
Bootstrap 5 Breadcrumbs Divider by SitePoint (@SitePoint)
on CodePen.
There’s a new dark variant for carousels using the class .carousel-dark, and a new dark variant for dropdowns using .dropdown-menu-dark.
There’s a new auto close option in Dropdown that can change the default behavior of when the Dropdown menu closes. By default, dropdown menus close when clicking outside the dropdown or one of the dropdown items. You can change that by setting the data-bs-auto-close data attribute to inside, which makes the dropdown close when clicking on one of the dropdown items but not when clicking outside. You can also set it to outside, which will make the dropdown close only when clicking outside the dropdown. Finally, you can set it to false to make it only close when the dropdown button is clicked again. If you’re initializing the dropdown with JavaScript, you can use the autoClose option instead of the data attribute. Here’s an example of its usage:

See the Pen
Bootstrap 5 Dropdown autoClose by SitePoint (@SitePoint)
on CodePen.
There’s now improved styling for file inputs in forms.
A new color input has been added, using the class .form-control-color.
A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

See the Pen
Bootstrap 5 Form Inputs by SitePoint (@SitePoint)
on CodePen.
New color tints and shades have been added in Sass variables.
There are two new display heading sizes .display-5 and .display-6.
There’s a new white variant for close buttons .btn-close-white.
Dropdowns can now have .dropdown-items wrapped in <li> elements.
Items in List groups can now be numbered using the new class .list-group-numbered.
There are transition properties to links in Pagination component, which improves its style.
There’s a new .bg-body class that sets the background color of the body to white.
There are new position utility classes to set the top, left, right or bottom properties of an element. For example, .top-0.
New .translate-middle-x and .translate-middle-y classes have been added to easily center absolute elements horizontally and vertically respectively.
There are new border width utility classes .border-* ranging from 1 to 5.
There’s a a new display utility .d-grid and new gap utility .gap.
There are new line height utilities .lh-1, .lh-sm, .lh-base and .lh-lg.
There are new ratio helpers replacing what previously was responsive embed helpers. The class names are renamed by replacing embed-responsive with ratio and by with x. For example, what previously was .embed-responsive-16by9 is now .ratio-16x9.
A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.
There are .fs-* utilities for font sizes, as RFS is now enabled by default.

Conclusion

Bootstrap has been one of the leading CSS libraries for most of the past decade. It allows developers to easily build responsive websites and deliver a good user experience. With Bootstrap 5’s additions and changes, this process will be even easier and will allow for improving website’s designs and providing a good user experience. If you’re using Bootstrap 4 and you’re thinking of migrating to Bootstrap 5, the migration is easy and you probably won’t need to make a lot of changes.