What's New in Bootstrap 5
Tags: css, javascript, frameworks, bootstrap
Published: 2020-12-17 17:08:08

---
title: What's New in Bootstrap 5
published: true
description: A quick rundown of improvements and need to knows
tags: css, javascript, frameworks, bootstrap
cover_image: https://imgur.com/Mj3H69v.png
---

Even if you find Bootstrap "boring", most of us frontend devs will be seeing more of the **[new Bootstrap 5](https://getbootstrap.com/)** version very soon. It's [now available in beta](https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/). 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](https://dev.to/codeply/is-bootstrap-5-react-worthy-4493))

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](https://dev.to/codeply/bootstrap-finally-has-an-off-canvas-component-41dl). 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](https://getbootstrap.com/docs/5.0/getting-started/rtl/).

> ***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](https://getbootstrap.com/docs/5.0/utilities/api/).

[Positioning](https://getbootstrap.com/docs/5.0/utilities/position/)

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](https://codeply.com/p/CKwcEJUWuz). CSS translate has also been added (ie: `translate-middle-x`).

[CSS Grid](https://getbootstrap.com/docs/5.0/utilities/display/)

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](https://getbootstrap.com/docs/5.0/utilities/text/#line-height)

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

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

[Interactions](https://getbootstrap.com/docs/5.0/utilities/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](https://getbootstrap.com/docs/5.0/utilities/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](https://codeply.com/p/4GX8tE4hAS)

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](https://www.codeply.com/p?starter=Bootstrap%205).

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.