Bootstrap Ui
Bootstrap Badges
ExElite heading New
ExElite heading New
ExElite heading New
ExElite heading New
ExElite heading New
ExElite heading New
Code Here:
<h1>ExElite heading <span class="badge bg-secondary">New</span></h1>
<h2>ExElite heading <span class="badge bg-success">New</span></h2>
<h3>ExElite heading <span class="badge bg-info">New</span></h3>
<h4>ExElite heading <span class="badge bg-primary">New</span></h4>
<h5>ExElite heading <span class="badge bg-danger">New</span></h5>
<h6>ExElite heading <span class="badge bg-warning">New</span></h6>
Pill badges
Default
Primary
Success
Info
Warning
Danger
Code Here
<span class="badge rounded-pill bg-secondary">Default</span>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
Button Badges
Code Here
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-light">4</span>
</button>
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-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-bs-toggle="collapse" href="#collapseExElite"
aria-expanded="false" aria-controls="collapseExElite">
Link with href
</a>
<button class="btn btn-success" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExElite" aria-expanded="false"
aria-controls="collapseExElite">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExElite">
<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 exElite">
<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
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>