Code Here:

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

									
								

Pill badges

Code Here

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

									
								

Button Badges

Code Here

									
<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-primary">
    Profile <span class="badge badge-light">9</span>
    <span class="sr-only">unread messages</span>
</button>

									
								

Collapse (Toggle)

Code Here

									
<p>
    <a class="btn btn-info" data-toggle="collapse" href="#collapseExample"
        aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-success" type="button" data-toggle="collapse"
        data-target="#collapseExample" aria-expanded="false"
        aria-controls="collapseExample">
        Button with data-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

									
<!-- 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>
<!-- 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>
<!-- 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="../assets/images/big/img1.jpg" alt="image"
class="img-fluid img-rounded" width="200">
<hr>
<h4 class="card-title">Image Circle</h4>
<img src="../assets/images/users/8.jpg" alt="image" class="rounded-circle"
width="290">
<hr>
<h4 class="card-title">Image with thumbnail</h4>
<img src="../assets/images/users/8.jpg" alt="image" class="img-thumbnail"
width="290">
									
								

Fluid jumbotron

Code Here

									
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire
            horizontal space of its parent.</p>
    </div>
</div>