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

<!-- Dropdown -->
<div class="btn-group dropdown">
    <button class="btn btn-light 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 dropdown-menu-right">
        <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 -->

<!-- Dropup -->
<div class="btn-group dropup">
    <button class="btn btn-light 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 dropdown-menu-right">
        <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>
<!-- /Dropup -->

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