Images
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Breadcrumbs
  1. Pages
  1. Pages
  2. Menu
  1. Pages
  2. Menu
  3. Sub Menu
<ol class="breadcrumb">
 <li><a href="#">Pages</a></li>
 <li><a href="#">Library</a></li>
 <li class="active">Data</li>
</ol>
Pagination
<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>
Tooltips

This is just an example of tooltip in a paragraph content written by Author. You can set the tooltip position easily withTooltip options.

Popovers

This is just an example of popover use in a paragraph content without a title written by Author, also you can set a popover trigger on hover event like this popover.

Progress bars
Simple 40%
Striped 60%
Animated 70%
Stacked30% Complete (success)
20%20% Complete (info)
25%25% Complete (warning)
15%15% Complete (danger)
Progress bars dark background
Simple 40%
Dropdowns
<div class="dropdown">
	<a class="button-classes" href="#" id="ddm1" data-toggle="dropdown">
		Dropdown
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
		<li class="dropdown-header">Dropdown Header</li>
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
Contextual Colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quidem?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, necessitatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ullam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, obcaecati!

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Labels and Badges
Type Label Badge
Default Default 25
Primary Primary 6
Success Success 8
Info Info 3
Warning Warning 5
Danger Danger 54
List Group
14 Cras justo odio24 Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
<ul class="list-group">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>