General

Badges

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

Default
Primary Success Info Warning Danger Dark
Soft Badge
Primary Success Info Warning Danger Dark

Pill Badges

Use the .rounded-pill modifier class to make badges more rounded.

Default
Primary Success Info Warning Danger Dark
Soft Badge
Primary Success Info Warning Danger Dark

Badges in Buttons

Badges can be used as part of links or buttons to provide a counter.

Badges Position Examples

Example of Badges Position

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.

Pagination Disabled and Active

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

Pagination Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Pagination Alignment

Change the alignment of pagination components with flexbox utilities.

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

Focus ring New

Click directly on the link below to see the focus ring in action.

Icon link New

Take a regular add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.

Close Button

Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.

Disable Close Button

Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.

Close Button White Variant

Change the default .btn-close to be white with the .btn-close-white class. This class uses the filter property to invert the background-image.

© Dason.
Design & Develop by Themesbrand