Add any of the below mentioned modifier classes to change the appearance of a badge.
.rounded-pill modifier class to make
badges more rounded (with a larger
and additional horizontal
Useful if you miss the badges from v3.
Badges in Buttons
Badges can be used as part of links or buttons to provide a counter.
Badges Position Examples
Example of Badges Position
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
Hover over the links below to see tooltips:
Pagination links indicate a series of related content exists across multiple pages.
Disabled and active states
Pagination links are customizable for
different circumstances. Use
.disabled for links that appear
indicate the current page.
Fancy larger or smaller pagination? Add
.pagination-sm for additional
Change the alignment of pagination components with flexbox utilities.
Use the border spinners for a lightweight loading indicator.
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Provide an option to dismiss or close a component with
.btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default
background-image. Be sure to include text for screen readers, as we’ve done with
Disable Close Button
Disabled close buttons change their
opacity. We’ve also applied
pointer-events: none and
user-select: none to preventing hover and active states from triggering.
Close Button White Variant
Change the default
.btn-close to be white with the
.btn-close-white class. This class uses the
filter property to invert the