Badges

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Success Info Warning Danger Dark
Primary Success Info Warning Danger Dark

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.

Primary Success Info Warning Danger Dark
Primary Success Info Warning Danger Dark

Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Tooltips

Hover over the links below to see tooltips:

Pagination

Default Example

Pagination links indicate a series of related content exists across multiple pages.

Previous Next
Alignment

Change the alignment of pagination components with flexbox utilities.

Sizing

Fancy larger or smaller pagination? Add size="lg" or "sm" for additional sizes.

Previous Next Previous Next

Border spinner

Use the border spinners for a lightweight loading indicator.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

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!

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...