General UI
Badges
Add any of the below mentioned modifier classes to change the appearance of a badge.
Soft Badge
Pill badges
Use the
.rounded-pill
modifier class to make
badges more rounded (with a larger
border-radius
and additional horizontal
padding
).
Useful if you miss the badges from v3.
Soft Badge
Badges in Buttons
Badges can be used as part of links or buttons to provide a counter.
Badges Position Examples
Example of Badges Position
Popovers
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
Tooltips
Hover over the links below to see tooltips:
Pagination
Default Example
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
un-clickable and
.active
to
indicate the current page.
Sizing
Fancy larger or smaller pagination? Add
.pagination-lg
or
.pagination-sm
for additional
sizes.
Alignment
Change the alignment of pagination components with flexbox utilities.
Border spinner
Use the border spinners for a lightweight loading indicator.
Growing spinner
If you donât fancy a border spinner, switch to the grow spinner. While it doesnât technically spin, it does repeatedly grow!
Close Button
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
aria-label
.
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
background-image
.
