#### General

#### Popovers

Show Code

Popovers example are available with follwing options , Directions are mirrored when using Bootstrap in RTL.

    <div class="hstack flex-wrap gap-2">
        <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on top
        </button>
        <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on right
        </button>
        <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on bottom
        </button>
        <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on left
        </button>
        <button tabindex="0" class="btn  btn-success" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
    </div>

#### Tooltips

Show Code

Tooltip example are available with follwing options, Directions are mirrored when using Bootstrap in RTL.

    <!-- Tooltips -->
    <div class="hstack flex-wrap gap-2">
        <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
            Tooltip on top
        </button>
        <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
            Tooltip on right
        </button>
        <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
        </button>
        <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
            Tooltip on left
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
            Tooltip with HTML
        </button>
    </div>

#### Breadcrumb

Show Code

Indicate the current page’s location within a navigational hierarchy

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Home</li>
        </ol>
    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Base UI</a></li>
            <li class="breadcrumb-item active" aria-current="page">General</li>
        </ol>
    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="ri-home-5-fill"></i></a></li>
            <li class="breadcrumb-item"><a href="#">Base UI</a></li>
            <li class="breadcrumb-item active" aria-current="page">General</li>
        </ol>
    </nav>

#### Pagination

Show Code

##### Default Pagination

Use `pagination` class to ul element to indicate a series of related content exists across multiple pages.

##### Disabled and Active states

Use `disabled` class to links that appear un-clickable and `active` class to indicate the current page.

##### Sizing

Use `pagination-lg` or `pagination-sm` to set different pagination sizes.

##### Alignment

Use `justify-content-start`, `justify-content-start`, or `justify-content-start`, class to pagination class to change the alignment of pagination respectively.

##### Custom Separated Pagination

Use `pagination-separated` class to pagination class to set custom separated pagination.

- ←
- 1
- 2
- 3
- 4
- 5
- →

- ←
- 1
- 2
- 3
- 4
- 5
- →

- ←
- 1
- 2
- 3
- 4
- 5
- →

##### Custom Rounded Pagination

Use `pagination-rounded` class to pagination class to set custom rounded pagination.

- ←
- 1
- 2
- 3
- 4
- 5
- →

- ←
- 1
- 2
- 3
- 4
- 5
- →

- ←
- 1
- 2
- 3
- 4
- 5
- →

    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>

    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <i class="mdi mdi-chevron-left"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <i class="mdi mdi-chevron-right"></i>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Pagination Disabled & Active -->
    <nav aria-label="...">
        <ul class="pagination">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active">
                <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
            </li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

    <nav aria-label="...">
        <ul class="pagination">
            <li class="page-item disabled">
                <span class="page-link"><i class="mdi mdi-chevron-left"></i></span>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active">
                <span class="page-link">
                    2
                    <span class="sr-only">(current)</span>
                </span>
            </li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#"><i class="mdi mdi-chevron-right"></i></a>
            </li>
        </ul>
    </nav>

    <!-- Pagination sizing -->

    <!-- Pagination Large -->
    <nav aria-label="...">
        <ul class="pagination pagination-lg">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

    <!-- Pagination Small -->
    <nav aria-label="...">
        <ul class="pagination pagination-sm">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

    <!-- Pagination Alignment -->

    <!-- Center Alignment -->
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

    <!-- Right Alignment -->
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

    <!-- Pagination Rounded -->
    <ul class="pagination pagination-rounded">
        <li class="page-item disabled">
            <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item active">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a>
        </li>
    </ul>

#### Spinners

Show Code

##### Border spinner

Use `spinner-border` class for a lightweight loading indicator.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

##### Growing spinner

Use `spinner-grow` class for a lightweight spinner with growing effect.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

    <!-- Border spinner -->
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-secondary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-success" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-info" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-warning" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-danger" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-dark" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-light" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <!-- Growing spinner -->
    <div class="spinner-grow text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-secondary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-success" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-info" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-warning" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-danger" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-dark" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-light" role="status">
        <span class="sr-only">Loading...</span>
    </div>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark