#### Bootstrap Badges

# Example heading New

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

Default Primary Success Info Warning Danger

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

Link with href

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.

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

#### Small Pagination

#### Pagination Alignment

#### Large Pagination

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

#### Image Rounded

#### Image Circle

#### Image with thumbnail

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

This is a modified jumbotron that occupies the entire horizontal space of its parent.

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