What's New in Bootstrap 5

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.

Continue reading What’s New in Bootstrap 5 on SitePoint.

Similar Posts