Dropdowns
Single button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
</div>
</div>Rounded button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-default btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-primary btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-success btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-info btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-warning btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-danger btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
</div>
</div>Split button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-success">Action</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class=" fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-warning">Action</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class=" fa fa-angle-up"></b>
</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>
</div>
</div>Rounded Split button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-default">Action</button>
<button type="button" class="btn btn-pill btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-primary">Action</button>
<button type="button" class="btn btn-pill btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-success">Action</button>
<button type="button" class="btn btn-pill btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-info">Action</button>
<button type="button" class="btn btn-pill btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-warning">Action</button>
<button type="button" class="btn btn-warning btn-pill dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class=" fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-danger">Action</button>
<button type="button" class="btn btn-pill btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
</div>
</div>Single Square outline button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
</div>
</div>Rounded button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-primary btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-success btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-info btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-warning btn-pill dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
</div>
</div>Split button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-primary">Action</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-success">Action</button>
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-info">Action</button>
<button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-warning">Action</button>
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-outline-danger">Action</button>
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
</div>
</div>Rounded Split button dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-outline-primary">Action</button>
<button type="button" class="btn btn-pill btn-outline-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class=" fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-outline-success">Action</button>
<button type="button" class="btn btn-pill btn-outline-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-outline-info">Action</button>
<button type="button" class="btn btn-pill btn-outline-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-outline-warning">Action</button>
<button type="button" class="btn btn-outline-warning btn-pill dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-pill btn-outline-danger">Action</button>
<button type="button" class="btn btn-pill btn-outline-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up"></b>
</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>
</div>
</div>Dropup variation
Html
<div class="dropup btn-group mt-2 mb-2">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropup1
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<!-- Split dropup button -->
<div class="dropup btn-group mt-2 mb-2">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Dropup2
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>Icon Drop Downs dropdowns
Html
<div class="panel panel-default">
<div class="panel-body p-0">
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-facebook btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-facebook"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-twitter btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-twitter"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-google btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-google"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-youtube btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-youtube "></i><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-vimeo btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-vimeo"></i><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
<div class="btn-group mt-2 mb-2">
<button type="button" class="btn btn-github btn-pill dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-github"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-plus-title">
Dropdown
<b class="fa fa-angle-up" aria-hidden="true"></b>
</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>
</div>
</div>