Bootstrap - Dropdowns
We have styled all Bootstrap elements just as you want!
Basic Dropdown
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Dropup
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup
to the parent.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropup -->
Right Alignment
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown text-right">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu3">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Headers & Dividers
Add a header to label sections of actions in any dropdown menu. Add a divider to separate series of links in a dropdown menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li class="dropdown-header">Basic Actions</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">More Actions</li>
<li><a href="#">Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu5">
<li class="dropdown-header">Basic Actions</li>
<li><a href="#">Action</a></li>
<li class="disabled"><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">More Actions</li>
<li><a href="#">Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->