Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add badges and breadcrumbs with Bootstrap 5.
Badges
Badges scale to match the size of the immediate parent element by using font sizing and em units.
They no longer have focus or hover style for links in Bootstrap 5.
For example, we can write:
<h1>heading <span class="badge bg-secondary">New</span></h1>
<h2>heading <span class="badge bg-secondary">New</span></h2>
<h3>heading <span class="badge bg-secondary">New</span></h3>
<h4>heading <span class="badge bg-secondary">New</span></h4>
<h5>heading <span class="badge bg-secondary">New</span></h5>
<h6>heading <span class="badge bg-secondary">New</span></h6>
to add the badge with the badge class.
They can also be added to the buttons.
For example, we can write:
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">100</span>
</button>
We can also add screenreader-only text to disambiguate badge text:
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">100</span>
<span class="sr-only">unread messages</span>
</button>
We have a span with the sr-only class which is only read by screen readers and isn’t visible on the screen.
Background Colors
The background colors can be changed with various classes.
For example, we can write:
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
to add badges with various styles.
The bg-* classes are the styling classes.
Pill Badges
We can also make badges display in pill style.
For example, we can write:
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
We add the rounded-pill class to make them display as pills.
Breadcrumb
Breadcrumbs are used to indicate the current page’s location with a navigational hierarchy that automatically adds separators with CSS.
For example, we can write:
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
</nav>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Profile</li>
</ol>
</nav>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Profile</a></li>
<li class="breadcrumb-item active">Settings</li>
</ol>
</nav>
We add breadcrumbs with ol and li elements with the breadcrumb class to add the breadcrumbs.
li has the breadcrumb-item class to add them as items.
Changing the Separator of the Breadcrumb
We can change the separator of the breadcrumb with the $breadcrumb-divider SASS variable.
For instance, we can write:
$breadcrumb-divider: quote(">");
to change it to a > .
And we can write:
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
to change it to an SVG.
We can remove it with:
$breadcrumb-divider: none;
Conclusion
We can add badges and breadcrumbs easily with Bootstrap 5.
The only change from the previous version is that there’s no hover effects for badges.
