Regular Components

go.raybo.org/B5N02_03

A lot of components have changed in this new version, so let's check them out.

Badges

  • Removed: badge-*
  • badge-pill to rounded-pill
  • slightly bigger padding

Try it

One of the changes is to remove the badge color classes, so you can use the background utilities instead, so bg-primary instead of badge-primary.

The badge-pill class is also gone, so replace it with the rounded-pill class when needed.

There's also just a bit more padding added on these.

Breadcrumbs

  • Removed classes
  • --bs-breadcrumb-divider

Try it

Breadcrumbs are a pretty simple component with some minor changes. padding, background color and border-radius have been removed.

In addition to that, you can easilly customize the divider with a new CSS custom property.

Buttons

  • Removed: Toggle Buttons
  • Removed: btn-block

The ability to toggle buttons is now more easily achievable with forms, so make sure you review those notes. They are much simpler to use now and don't require any javascript.

Also, the btn-block has been removed, you can do the same with using the new display-grid class with the gap classes.

NavBars

  • Require container

Try it

The big change in navbars is that they now require a container class. That makes it easier for bootstrap to style this component and I don't know about you, but I almost always added this anyways. Just be careful if you're updating from Bootstrap 4.

Close Button

  • close to btn-close
  • Uses SVG
  • btn-close-white

Try it

This is a super minor change, but it will bite you when migrating. The close button that is used often in many components has been renamed to btn-close. The old name was a bit too generic, so watch out when updating your sites.

Also, before the button used a literal &times character. now it uses an actual embedded SVG.

And there's also a white optin that you can use.

Removed Layouts

  • card-deck card-columns
  • jumbotron
  • media

Examples

The layout variants for components have been removed including two classes for cards. One was card-deck and the other card-columns.

Another popular component was the jumbotron, which has also been nixed, so make sure you look for those in your code when migrating.

The media layout component has also been removed.

If you want to duplicate these styles, you can do it with the grid or column classes. A good place to go is the examples page.