General

Badges

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

PrimarySuccessInfoWarningDangerDark
PrimarySuccessInfoWarningDangerDark

Pill badges

Use the .rounded-pillmodifier class to make badges more rounded(with a larger border-radiusand additional horizontal padding). Useful if you miss the badges from v3.

PrimarySuccessInfoWarningDangerDark
PrimarySuccessInfoWarningDangerDark

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 .disabledfor links that appear un-clickable and .activeto indicate the current page.

Sizing

Fancy larger or smaller pagination? Add .pagination-lgor .pagination-smfor additional sizes.

Alignment

Change the alignment of pagination components with flexbox utilities.

Rounded Example

Add .pagination-roundedfor rounded pagination.

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...