Bootstrap Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
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)

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

Image Circle

image

Image with thumbnail

image

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

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>

									
								
All Rights Reserved by Severny. Designed and Developed by WrapPixel.