General
Badges
Add any of the below mentioned modifier classes to change the appearance of a 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.
Badges in Buttons
Badges can be used as part of links or buttons to provide a counter.
Badge Outline
Badges can be used as part of links or buttons to provide a counter.
Badges Position Examples
Example of Badges Position
Badge Outline Pill
Badges can be used as part of links or buttons to provide a counter.
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.
Rounded Example
Add .pagination-rounded-pill for
rounded-pill
pagination.
Rounded Example
Add .pagination-rounded for rounded
pagination.
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!
Spinner Size
Add .spinner-border-* and
.spinner-grow-* to
make a smaller
spinner that
can quickly be used within other components
Loading Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
