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

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

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

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