Example heading New

Code Here:

                                    
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-success">New</span></h2>
<h3>Example heading <span class="badge bg-info">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-danger">New</span></h5>
<h6>Example heading <span class="badge bg-warning">New</span></h6>

                                
                            

Pill badges

Code Here

                                    
<span class="badge me-2 badge-pill bg-secondary">Default</span>
<span class="badge me-2 badge-pill bg-primary">Primary</span>
<span class="badge me-2 badge-pill bg-success">Success</span>
<span class="badge me-2 badge-pill bg-info">Info</span>
<span class="badge me-2 badge-pill bg-warning">Warning</span>
<span class="badge badge-pill bg-danger">Danger</span>
                                    
                                

Button Badges

Code Here

                                    
<button type="button" class="btn btn-light-primary text-primary font-medium">
Notifications <span class="badge bg-success">4</span>
</button>
<button type="button" class="btn btn-light-primary text-primary font-medium">
Profile <span class="badge bg-danger">9</span>
<span class="sr-only">unread messages</span>
</button>

                                
                            

Collapse (Toggle)

Code Here

                                    
<p>
    <a class="btn btn-light-info font-medium text-info px-4 rounded-pill" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
    </a>
    <button class="btn btn-light-warning font-medium text-warning px-4 rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

                                
                            

Active & Disabled Pagination

Code Here

                                    
<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)"
                tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">1</a></li>
        <li class="page-item active">
            <a class="page-link" href="javascript:void(0)">2 <span
                class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">Next</a>
        </li>
    </ul>
</nav>

                                    
                                

Pagination Sizing

Code Here

                                  
<h4 class="card-title">Small Pagination</h4>
<!-- Small -->
<nav aria-label="...">
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)"
                tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">1</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">Next</a>
        </li>
    </ul>
</nav>
<hr>
<h4 class="card-title">Pagination Alignment</h4>
<!-- Alignment -->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)"
                tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">1</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">Next</a>
        </li>
    </ul>
</nav>
<hr>
<h4 class="card-title">Large Pagination</h4>
<!-- Large -->
<nav aria-label="...">
    <ul class="pagination pagination-lg">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)"
                tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">1</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link"
            href="javascript:void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">Next</a>
        </li>
    </ul>
</nav>
                                  
                                

Image with round corner

Code Here

                                    
<h4 class="card-title">Image Rounded</h4>
<img src="../admin-pro/src/assets/images/users/8.jpg" alt="image"
    class="img-fluid rounded" width="200">
<hr>
<h4 class="card-title">Image Circle</h4>
<img src="../admin-pro/src/assets/images/users/8.jpg" alt="image" class="rounded-circle"
    width="290">
<hr>
<h4 class="card-title">Image with thumbnail</h4>
<img src="../admin-pro/src/assets/images/users/8.jpg" alt="image" class="img-thumbnail"
    width="290">