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