Images
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="img-thumbnail">
Breadcrumbs
  1. Home
  1. Home
  2. Menu
  1. Home
  2. Menu
  3. Sub Menu
<ol class="breadcrumb">
   <li><a href="#" class"breadcrumb-item">Home</a></li>
   <li><a href="#" class"breadcrumb-item">Menu</a></li>
   <li class="breadcrumb-item active">Sub Menu</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 with Tooltip 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)
Dropdowns
Dropdown Header
ActionAnother actionSomething good is waiting
Separated link
Action Another action Good actions Something else here
Separated link 
<div class="dropdown">
    <a class="button-classes dropdown-toggle" href="#" id="ddm1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </a>
    <div class="dropdown-menu">
        <div class="dropdown-header">Dropdown Header</div>
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
        <div class="dropdown-divider">
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</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>
Badges
Type Badge Badge Pill
Default Default 25
Primary Primary 6
Success Success 8
Info Info 3
Warning Warning 5
Danger Danger 54
List Group
Cras justo odio14Dapibus ac facilisis in24 Morbi leo risusPorta ac consectetur acVestibulum at eros
<div class="list-group">
    <a class="list-group-item d-flex list-group-item-action">
        <span class="text">Cras justo odio</span>
        <span class="badge badge-pill badge-secondary"></span>
    </a>
    <a class="list-group-item d-flex list-group-item-action active">
        <span class="text">Dapibus ac facilisis in</span>
        <span class="badge badge-pill"></span>
    </a>
    <a class="list-group-item d-flex list-group-item-action">
        <span class="text">Morbi leo risus</span>
    </a>
    <a class="list-group-item d-flex list-group-item-action">
        <span class="text">Porta ac consectetur ac</span>
    </a>
    <a class="list-group-item d-flex list-group-item-action disabled">
        <span class="text">Vestibulum at eros</span>
    </a>
</div>