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

Primary focus Secondary focus Success focus Danger focus Warning focus Info focus Light focus Dark focus

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

Icon link Icon link Icon link
Icon link Icon link Icon link Icon link Icon link Icon link Icon link

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

###### Select Custome Colors

Default
Red
Purple

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