General UI

Default Alert use class .alert-* for default color alter.

Show Code 

<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>

Alert with icon use class .alert-* for default color alter.

Alert!

Danger alert preview. This alert is dismissable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.

Information!

Info alert preview. This alert is dismissable.

Warning!

Warning alert preview. This alert is dismissable.

Success!

Success alert preview. This alert is dismissable.

Primary

Primary alert preview. This alert is dismissable.
Show Code 

<div class="alert alert-danger alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<h4><i data-feather="alert-circle"></i> Alert!</h4>
	Danger alert preview. This alert is dismissable. There are many variations of passages of Lorem
	Ipsum available, but the majority have suffered alteration in some form, by injected humour.
</div>
<div class="alert alert-info alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<h4><i data-feather="info"></i> Information!</h4>
	<p> Info alert preview. This alert is dismissable.</p>
</div>
<div class="alert alert-warning alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<h4><i data-feather="alert-triangle"></i>Warning!</h4>
	Warning alert preview. This alert is dismissable.
</div>
<div class="alert alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<h4><i data-feather="check-circle"></i> Success!</h4>
	Success alert preview. This alert is dismissable.
</div>
<div class="alert alert-primary alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<h4><i data-feather="check-circle"></i> Primary</h4>
	Primary alert preview. This alert is dismissable.
</div>

Badge Examples

Primary Secondary Success Danger Warning Info Light Dark
Show Code 

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Pill Badges Examples

Primary Secondary Success Danger Warning Info Light Dark
Show Code 

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Links Badges Examples

Primary Secondary Success Danger Warning Info
Show Code 

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>

Links Pill Badges Examples

Primary Secondary Success Danger Warning Info
Show Code 

<a href="#" class="badge badge-pill badge-primary">Primary</a>
<a href="#" class="badge badge-pill badge-secondary">Secondary</a>
<a href="#" class="badge badge-pill badge-success">Success</a>
<a href="#" class="badge badge-pill badge-danger">Danger</a>
<a href="#" class="badge badge-pill badge-warning">Warning</a>
<a href="#" class="badge badge-pill badge-info">Info</a>

Outline Badges Examples

Primary Secondary Success Danger Warning Info Purple Dark
Show Code 

<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-secondary">Secondary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-danger">Danger</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-info">Info</span>
<span class="badge badge-outline-purple">Purple</span>
<span class="badge badge-outline-dark">Dark</span>

Outline Pill Badges Examples

Primary Secondary Success Danger Warning Info Pink Dark
Show Code 

<span class="badge badge-pill badge-outline-primary">Primary</span>
<span class="badge badge-pill badge-outline-secondary">Secondary</span>
<span class="badge badge-pill badge-outline-success">Success</span>
<span class="badge badge-pill badge-outline-danger">Danger</span>
<span class="badge badge-pill badge-outline-warning">Warning</span>
<span class="badge badge-pill badge-outline-info">Info</span>
<span class="badge badge-pill badge-outline-pink">Pink</span>
<span class="badge badge-pill badge-outline-dark">Dark</span>

Buttons Examples

Show Code 

<button type="button" class="btn btn-primary btn-sm">
 Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-secondary btn-sm">
 Notifications <span class="badge badge-light">4</span>
</button>

Buttons With Icon Examples

Show Code 

<button type="button" class="btn btn-primary btn-rounded  mr-2">
	<i data-feather="bell"></i>
</button>
<button type="button" class="btn btn-info btn-rounded  mr-2">
	<i data-feather="bell"></i>
</button>
<button type="button" class="btn btn-warning btn-rounded  mr-2">
	<i data-feather="bell-off"></i>
</button>
<button type="button" class="btn btn-danger btn-rounded ">
	<i data-feather="bell-off"></i>
</button>

Default Example pagination links indicate a series of related content exists across multiple pages.

Show Code 

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul><!--end pagination-->
</nav><!--end nav-->

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">«</span>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Next">
				<span aria-hidden="true">»</span>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul><!--end pagination-->
</nav><!--end nav-->

Disabled and active states use .disabled for links that display un-clickable and .active to indicate the current page.

Show Code 

<nav aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
		</li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#">Next</a>
		</li>
	</ul><!--end pagination-->
</nav><!--end nav-->

Sizing Example use .pagination-lg or .pagination-sm for additional sizes.

Show Code 

<nav aria-label="...">
	<ul class="pagination pagination-lg">
		<li class="page-item active" aria-current="page">
			<span class="page-link">
				1
				<span class="sr-only">(current)</span>
			</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">4</a></li>
		<li class="page-item"><a class="page-link" href="#">5</a></li>
	</ul><!--end pagination-->
</nav><!--end nav-->

<nav aria-label="...">
	<ul class="pagination pagination-sm">
		<li class="page-item active" aria-current="page">
			<span class="page-link">
				1
				<span class="sr-only">(current)</span>
			</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">4</a></li>
		<li class="page-item"><a class="page-link" href="#">5</a></li>
	</ul><!--end pagination-->
</nav><!--end nav-->

Alignment ExampleChange the alignment of pagination components with flexbox utilities.

Show Code 

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul><!--end pagination-->
</nav><!--end nav-->

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#">Next</a>
		</li>
	</ul><!--end pagination-->
</nav><!--end nav-->

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-end">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#">Next</a>
		</li>
	</ul><!--end pagination-->
</nav><!--end nav-->

Basic Checbox use .checkbox-*

Show Code 

<div class="checkbox">
	<input id="checkbox0" type="checkbox">
	<label for="checkbox0">	Default	</label>
</div>
<div class="checkbox checkbox-primary">
	<input id="checkbox2" type="checkbox" checked="">
	<label for="checkbox2">	Primary	</label>
</div>
<div class="checkbox checkbox-success">
	<input id="checkbox3" type="checkbox">
	<label for="checkbox3">Success</label>
</div>
<div class="checkbox checkbox-info">
	<input id="checkbox4" type="checkbox">
	<label for="checkbox4">Info</label>
</div>
<div class="checkbox checkbox-warning">
	<input id="checkbox5" type="checkbox" checked="">
	<label for="checkbox5">Warning</label>
</div>
<div class="checkbox checkbox-danger">
	<input id="checkbox6" type="checkbox" checked="">
	<label for="checkbox6">Danger</label>
</div>

Circled Checkbox use .checkbox-circle

Show Code 

<div class="checkbox checkbox-circle">
	<input id="checkbox7" type="checkbox">
	<label for="checkbox7">	Simply Rounded</label>
</div>
<div class="checkbox checkbox-info checkbox-circle">
	<input id="checkbox8" type="checkbox" checked="">
	<label for="checkbox8">Info	</label>
</div>
<div class="checkbox checkbox-primary checkbox-circle">
	<input id="checkbox-9" type="checkbox">
	<label for="checkbox-9">Primary	</label>
</div>
<div class="checkbox checkbox-success checkbox-circle">
	<input id="checkbox-10" type="checkbox" checked="">
	<label for="checkbox-10">Success</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
	<input id="checkbox-11" type="checkbox">
	<label for="checkbox-11">	Warning	</label>
</div>
<div class="checkbox checkbox-danger checkbox-circle">
	<input id="checkbox-12" type="checkbox" checked="">
	<label for="checkbox-12">Danger	</label>
</div>

Inline checkboxes simple inline checkboxes

Show Code 

<div class="checkbox form-check-inline">
	<input type="checkbox" id="inlineCheckbox1" value="option1">
	<label for="inlineCheckbox1"> Inline One </label>
</div>
<div class="checkbox checkbox-success form-check-inline">
	<input type="checkbox" id="inlineCheckbox2" value="option1" checked="">
	<label for="inlineCheckbox2"> Inline Two </label>
</div>
<div class="checkbox checkbox-warning form-check-inline">
	<input type="checkbox" id="inlineCheckbox3" value="option1">
	<label for="inlineCheckbox3"> Inline Three </label>
</div>
<div class="checkbox form-check-inline">
	<input type="checkbox" id="inlineCheckbox11" value="option1">
	<label for="inlineCheckbox11"> Inline One </label>
</div>
<div class="checkbox checkbox-primary form-check-inline">
	<input type="checkbox" id="inlineCheckbox22" value="option1">
	<label for="inlineCheckbox22"> Inline Two </label>
</div>
<div class="checkbox checkbox-danger form-check-inline">
	<input type="checkbox" id="inlineCheckbox33" checked="" value="option1">
	<label for="inlineCheckbox33"> Inline Three </label>
</div>

<div class="checkbox  checkbox-warning form-check-inline">
	<input type="checkbox" id="inlineCheckbox111" value="option1" checked="">
	<label for="inlineCheckbox111"> Inline One </label>
</div>
<div class="checkbox  form-check-inline">
	<input type="checkbox" id="inlineCheckbox222" value="option1">
	<label for="inlineCheckbox222"> Inline Two </label>
</div>
<div class="checkbox checkbox-danger form-check-inline">
	<input type="checkbox" id="inlineCheckbox333" value="option1">
	<label for="inlineCheckbox333"> Inline Three </label>
</div>

Disabled Checkbox add disabled attribute.

Show Code 

<div class="checkbox">
	<input id="checkbox9" type="checkbox" disabled="">
	<label for="checkbox9">Can't check this	</label>
</div>
<div class="checkbox checkbox-custom">
	<input id="checkbox10" type="checkbox" disabled="" checked="">
	<label for="checkbox10">This too</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
	<input id="checkbox110" type="checkbox" disabled="" checked="">
	<label for="checkbox110">And this circle waring</label>
</div>
<div class="checkbox checkbox-success">
	<input id="checkbox13" type="checkbox" disabled="" checked="">
	<label for="checkbox13">This success too</label>
</div>

Grid-Example

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-12
Show Code 

<div class="text-center">
<div class="row">
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
	<div class="col-sm-1"><span class="border py-2 bg-light d-block mb-2">.col-sm-1</span></div>
</div>

<div class="row">
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
	<div class="col-sm-2"><span class="border py-2 bg-light d-block mb-2">.col-sm-2</span></div>
</div>

<div class="row">
	<div class="col-sm-3"><span class="border py-2 bg-light d-block mb-2">.col-sm-3</span></div>
	<div class="col-sm-3"><span class="border py-2 bg-light d-block mb-2">.col-sm-3</span></div>
	<div class="col-sm-3"><span class="border py-2 bg-light d-block mb-2">.col-sm-3</span></div>
	<div class="col-sm-3"><span class="border py-2 bg-light d-block mb-2">.col-sm-3</span></div>
</div>

<div class="row">
	<div class="col-sm-4"><span class="border py-2 bg-light d-block mb-2">.col-sm-4</span></div>
	<div class="col-sm-4"><span class="border py-2 bg-light d-block mb-2">.col-sm-4</span></div>
	<div class="col-sm-4"><span class="border py-2 bg-light d-block mb-2">.col-sm-4</span></div>
</div>

<div class="row">
	<div class="col-sm-6"><span class="border py-2 bg-light d-block mb-2">.col-sm-6</span></div>
	<div class="col-sm-6"><span class="border py-2 bg-light d-block mb-2">.col-sm-6</span></div>
</div>

<div class="row">
	<div class="col-sm-12"><span class="border py-2 bg-light d-block">.col-sm-12</span></div>
</div>
</div>