# General UI Elements header small text goes here...

× Success! This is a success alert with an example link.
<div class="alert alert-success fade show"> <span class="close" data-dismiss="alert">×</span> <strong>Success!</strong> This is a success alert with <a href="#" class="alert-link">an example link</a>. </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>

#### Note with icon!

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

#### Note with right 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 right icon --> <div class="note note-warning note-with-right-icon"> <div class="note-icon"><i class="fa fa-lightbulb"></i></div> <div class="note-content text-right"> <h4><b>Note with right icon!</b></h4> <p> ... </p> </div> </div>

#### Labels & Badges NEW

Danger Warning Yellow Lime Green Success
Primary Info Purple Indigo Dark
Pink Secondary Default Light
label
badge
badge-square
<!-- label --> <span class="label label-inverse">label</span> <!-- badge --> <span class="badge badge-secondary">badge</span> <!-- badge-square --> <span class="badge badge-default badge-square">badge-square</span>

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- Previous
- Next

- ← Older
- Newer →

<!-- pagination --> <ul class="pagination"> <li class="page-item disabled"><a href="#" class="page-link">«</a></li> <li class="page-item active"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">»</a></li> </ul> <!-- pager --> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
Basic
Striped
Animated
Stacked
Stacked
Stacked
<!-- default --> <div class="progress rounded-corner"> <div class="progress-bar" style="width: 80%">Basic</div> </div> <!-- striped --> <div class="progress rounded-corner progress-striped"> <div class="progress-bar bg-warning" style="width: 80%"> Striped </div> </div> <!-- animated --> <div class="progress rounded-corner progress-striped active"> <div class="progress-bar bg-purple" style="width: 80%"> Animated </div> </div> <!-- stacked --> <div class="progress rounded-corner"> <div class="progress-bar bg-dark" style="width: 25%"> Stacked </div> <div class="progress-bar bg-grey" style="width: 25%" >Stacked </div> <div class="progress-bar bg-lime" style="width: 25%"> Stacked </div> </div>