General

Popovers

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

HTML Preview

<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

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

HTML Preview

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

Indicate the current page’s location within a navigational hierarchy

HTML Preview

<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

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.

1
2 (current)
3

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.

Custom Rounded Pagination

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

HTML Preview

<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="visually-hidden">(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="visually-hidden">(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

Border spinner

Use spinner-border class for a lightweight loading indicator.

Growing spinner

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

HTML Preview

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

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

Top Brands

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$ 1250

Stillbird Helmet

$990

$1258.58

Notifications 4

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

General

Popovers

HTML Preview

Tooltips

HTML Preview

Breadcrumb

HTML Preview

Pagination

Default Pagination

Disabled and Active states

Sizing

Alignment

Custom Separated Pagination

Custom Rounded Pagination

HTML Preview

Spinners

Border spinner

Growing spinner

HTML Preview

Hi, Raquel Murillo 👋

Theme Customizer

Layout

Vertical

Horizontal

Two Column

Color Scheme

Light

Dark

Layout Width

Fluid

Boxed

Boxed Layout Body Images

Boxed

Boxed

Boxed

Boxed

Layout Position

Topbar Color

Light

Dark

Brand

Sidebar Size

Default

Compact

Small (Icon View)

Small Hover View

Sidebar View

Default

Detached

Sidebar Color

Light

Dark

Gradient

Sidebar Images

Preloader

Enable

Disable