#### General UI

#### Badges

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

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 (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.

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.

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

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

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

##### Settings

###### Choose Layouts

Light Mode
Dark Mode
RTL Mode
Dark RTL Mode