General

  1. Base UI
  2. 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.

Breadcrumb

Indicate the current page’s location within a navigational hierarchy

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.

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.