General UI Elements header small text goes here...
Success!
This is a success alert with an example link.
<div class="alert alert-success alert-dismissible fade show">
<strong>Success!</strong>
This is a success alert with
<a href="#" class="alert-link">an example link</a>.
<button type="button" class="btn-close" data-bs-dismiss="alert"></span>
</div>
Primary alert with an example link.
Info alert with an example link.
Purple alert with an example link.
Indigo alert with an example link.
Success alert with an example link.
Green alert with an example link.
Lime alert with an example link.
Warning alert with an example link.
Yellow alert with an example link.
Danger alert with an example link.
Pink alert with an example link.
Dark alert with an example link.
Secondary alert with an example link.
Light alert with an example link.
<div class="alert alert-primary fade show">...</div>
<div class="alert alert-secondary fade show">...</div>
<div class="alert alert-success fade show">...</div>
<div class="alert alert-danger fade show">...</div>
<div class="alert alert-warning fade show">...</div>
<div class="alert alert-yellow fade show">...</div>
<div class="alert alert-info fade show">...</div>
<div class="alert alert-lime fade show">...</div>
<div class="alert alert-purple fade show">...</div>
<div class="alert alert-light fade show">...</div>
<div class="alert alert-dark fade show">...</div>
<div class="alert alert-indigo fade show">...</div>
<div class="alert alert-pink fade show">...</div>
<div class="alert alert-green fade show">...</div>Note with icon!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.
Note without icon!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.
<!-- default -->
<div class="note note-primary">
<div class="note-icon"><i class="fab fa-facebook-f"></i></div>
<div class="note-content">
<h4><b>Note with icon!</b></h4>
<p> ... </p>
</div>
</div>
<!-- with end icon -->
<div class="note note-warning note-with-end-icon">
<div class="note-icon">...</div>
<div class="note-content text-end">
...
</div>
</div>
Danger
Warning
Yellow
Lime
Green
Success
Primary
Info
Purple
Indigo
Dark
Pink
Secondary
Default
Light
Badge pill
Badge square
<!-- badge -->
<span class="badge bg-primary">badge</span>
<!-- badge-pill -->
<span class="badge bg-danger rounded-pill">badge-pill</span>
<!-- badge-square -->
<span class="badge bg-dark rounded-0">badge-square</span><!-- pagination -->
<div class="pagination">
<div class="page-item disabled"><a href="#" class="page-link">«</a></div>
<div class="page-item active"><a href="#" class="page-link">1</a></div>
<div class="page-item"><a href="#" class="page-link">2</a></div>
<div class="page-item"><a href="#" class="page-link">3</a></div>
<div class="page-item"><a href="#" class="page-link">4</a></div>
<div class="page-item"><a href="#" class="page-link">5</a></div>
<div class="page-item"><a href="#" class="page-link">»</a></div>
</div>
<!-- pagination rounded -->
<div class="pagination">
<div class="page-item me-auto">
<a href="#" class="page-link rounded-pill px-3">Previous</a>
</div>
<div class="page-item">
<a href="#" class="page-link rounded-pill px-3">Next</a>
</div>
</div><!-- default -->
<div class="progress">
<div class="progress-bar fs-10px fw-bold" style="width: 80%">Basic</div>
</div>
<!-- striped -->
<div class="progress progress-striped">
<div class="progress-bar bg-warning" style="width: 80%">
Striped
</div>
</div>
<!-- animated -->
<div class="progress progress-striped active">
...
</div>
<!-- stacked -->
<div class="progress">
<div class="progress-bar bg-dark" style="width: 25%">...</div>
<div class="progress-bar bg-grey" style="width: 25%">...</div>
<div class="progress-bar bg-lime" style="width: 25%">...</div>
</div>