General UI Elements header small text goes here...

Alerts

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>

Alerts Color NEW

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>

Notes

Note with icon!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.

Note with end 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>

Badges NEW

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-inverse rounded-0">badge-square</span>

Pagination

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

Progress bar

Basic
Striped
Animated
Stacked
Stacked
Stacked
<!-- 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>
App Settings
Header Fixed
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage