General

  1. Base UI
  2. General

Popovers

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

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

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

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.

Custom Rounded Pagination

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

<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

Border spinner

Use spinner-border class for a lightweight loading indicator.

Growing spinner

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

<!-- 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>
© Velzon.
Design & Develop by Themesbrand