Typography
General
<!-- Dropdown -->
<div class="btn-group dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon fa fa-gears mr-2"></i> Dropdown Button
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-user-o mr-2"></i> Profile</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-envelope-o mr-2"></i> Inbox <span class="badge badge-primary float-right mb-0 mr-0">3</span></a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-lock mr-2"></i> Lock</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-sign-out mr-2"></i> SignOut</a>
</div>
</div>
<!-- /Dropdown -->
<!-- Dropdown -->
<div class="btn-group dropup">
<button class="btn btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon fa fa-gears mr-2"></i> Dropup Button
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-user-o mr-2"></i> Profile</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-envelope-o mr-2"></i> Inbox <span class="badge badge-primary float-right mb-0 mr-0">3</span></a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-lock mr-2"></i> Lock</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-sign-out mr-2"></i> SignOut</a>
</div>
</div>
<!-- /Dropdown -->
<!-- Dropdown -->
<div class="btn-group dropdown">
<button class="btn btn-primary dropdown-toggle no-caret"
type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon fa fa-gears mr-2"></i> Dropup Button
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-user-o mr-2"></i> Profile</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-envelope-o mr-2"></i> Inbox <span class="badge badge-primary float-right mb-0 mr-0">3</span></a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-lock mr-2"></i> Lock</a>
<a href="#" class="dropdown-item"><i class="icon fa fa-fw fa-sign-out mr-2"></i> SignOut</a>
</div>
</div>
<!-- /Dropdown -->
States
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
<!-- /Dropdown Menu -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
<!-- /Dropdown Menu -->