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

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

##### Theme Customizer

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Layout Position

Fixed
Scrollable

###### Topbar Color

Light
Dark

###### Sidebar Size

###### Sidebar Color

###### Direction

LTR
RTL