General UI
Badges
Add any of the below mentioned modifier classes to change the appearance of a badge.
Pill badges
Use the .badge-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.
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!
Additive Border
Add borders to custom elements
Subtractive Border
Or remove borders.
Border Opacity
To change that opacity, override --bs-border-opacity via custom styles or inline styles.
Border Width
Add classes to an element to easily width apply.
Color
Change the border color using utilities built on our theme colors.
Border Radius
Add classes to an element to easily round its corners.
Rounded Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5, and can be configured by modifying the utilities API.
