What's New in Bootstrap 5

Even if you find Bootstrap "boring", most of us frontend devs will be seeing more of the new Bootstrap 5 version very soon. It's now available in beta. And who knows, maybe these new improvements will make you fall in love ❤️ with Bootstrap again.

Javascript (No More jQuery!)

You may have already heard that Bootstrap 5 no longer requires jQuery. This is obviously a big deal as now using Bootstrap won't conflict with your other Javascript frameworks like React and Vue.js. (Explore further on using Bootstrap 5 with React)

The move towards pure JS also provides support for ES modules which make it easier to import bootstrap and its components modularly as needed.

What you need to know:
The data-* attributes have been replaced with data-bs-* in Bootstrap 5. These Bootstrap namespaced HTML attributes are
used to enable JavaScript behaviors. For example, here's a button that uses the Collapse component to toggle the #navbar menu...

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

No more jQuery also means that things like Tooltips, Popovers and Toast must be initialized with Javascript...

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

New Offcanvas Component

As of Bootstrap 5 beta 3, there is now a Offcanvas component. As the docs state, use the Offcanvas to "Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin".

---

CSS

RTL Support

The big news on the Bootstrap CSS front is RTL (right-to-left) support.

What you need to know:
To align with RTL support, the concept of left and right have been replaced with start and end. For example, the old margin utility as ml-auto is now ms-auto.

Converting from LTR Bootstrap 4 classes to Bootstrap 5...

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
*-right => *-start
*-left => *-end

New XXL Breakpoint

Bootstrap 5 adds a new sixth breakpoint for screen widths wider than 1400px. This makes it possible to control responsive behavior on a wide range of viewports.

New Utility Classes

There are a few new handy additions to the Bootstrap 5 Utilities.

Positioning

In addition to the existing position-(fixed|relative|absolute|static|sticky) classes, there are new top-, start-, end-, and -bottom classes for 0%, 50%, and 100%. For example, end-50 equivocates to end: 50%. These are helpful for relative, absolute, and fixed positioning. Also handy for Bootstrap 5 Toasts. CSS translate has also been added (ie: translate-middle-x).

CSS Grid

While the Grid system (row, cols, etc...) is still flexbox based, there are new display-grid and gap utility classes. IMO, this is not really useful until CSS grid child classes become available.

Line Height

A simple, yet useful addition is the line-height utility classes:

lh-1
lh-sm
lh-base
lh-lg

Interactions

These are new utility classes for user-select and pointer-events CSS properties.

---

SASS

Most devs aren't recompiling the Bootstrap CSS using the SASS source. But, if you are there's some cool new stuff.

The new Utility API now provides state for pseudo-class variations (hover, focus, etc..). I really like this feature. For example, you could change the background color on hover...

Customize the utilities SASS map background-color with state...

$utilities: (
  "background-color": (
      property: background-color,
      class: bg,
      state: hover,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
  )
);

Which outputs this CSS...

.bg-danger-hover:hover { background-color: ... }
.bg-info-hover:hover { background-color: ... }
.bg-warning-hover:hover { background-color: ... }
.bg-success-hover:hover { background-color: ... }
.bg-primary-hover:hover { background-color: ... }
.bg-light-hover:hover { background-color: ... }
.bg-dark-hover:hover { background-color: ... }

Finally, use it in your HTML markup. Here's a card that changes from bg-dark to bg-info when hovered.

<div class="card bg-dark bg-info-hover">
    ....
</div>

Utility API SASS demo

The Utility API is very powerful. With it you can add any utility classes you want. For example, add opacity-* classes:

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Take it a step further making the opacity classes responsive (responsive: true) which ties them to the Bootstrap 5 breakpoints:

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

The resulting CSS now contains 5 classes for opacity at each breakpoint! ___ opacity-(0|25|50|75|100) opacity-sm-(0|25|50|75|100), opacity-md-(0|25|50|75|100), etc...

---

Upgrading from Bootstrap 4

As with prior versions, there are many breaking changes that you'll need to migrate if you want to upgrade from Bootstrap 4 to Bootstrap 5. Want to convert Bootstrap 4 markup to Bootstrap 5?

Here's a quick list of classes changes:

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
no-gutters => g-0
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu-*-left => dropdown-menu-*-start
dropdown-menu-*-right => dropdown-menu-*-end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end
font-weight-* => fw-*

---

Bootstrap 5 is currently beta 1 beta 3. When more changes come online, I will be updating this Bootstrap 5 migration guidance accordingly.

You can also start playing with the latest Bootstrap 5 on Codeply.

What do you think? Will you be taking a look at Bootstrap 5? What other updates would you like to see added? Let me know in the comments.

Comments

[Bart Calixto]

I like this way better:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(tooltipTriggerEl){new bootstrap.Tooltip(tooltipTriggerEl)})

[Seanmclem]

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

Still just feels so old-school

[Carol Skelly]

Maybe, but not as old school as jQuery

[Bartosz Wójcik]

I would even encourage you to compile Bootstrap yourself, try to learn how to create new components and modify existing ones. I'm using Prepos to do it more quickly.