General

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

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

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 for 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...
© Materio made with by websolutionhelp