Bootstrap Dropdowns
A Dropdown is a list item which appear after clicking on a button. To use dropdown in bootstrap just wrap the menu within .dropdown class. To appear the dropdown menu you should use a button with .dropdown-toggle class and data-toggle="dropdown" attribute. You should also use the .dropdown-menu class insinde a <ul> tag to create the dropdown menu. A .caret class inside <span> tag will show an arrow icon, which is an identification of a dropdown menu.
Here is an example using all the elements:
Example:
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"> dropdown 1 </a></li>
<li><a href="#"> dropdown 2 </a></li>
<li><a href="#"> dropdown 3 </a></li>
</ul>
</div>
Run Example
Bootstrap Dropdown Header
If you want a header within the dropdown menu then you can use .dropdown-header class.
Example:
Bootstrap Dropdown Divider
To separate the menu inside the dropdown you can use .divider class. It will separate the menus with a horizontal border.
Example:
Bootstrap Dropdown Disable/Active Items
If you want a header within the dropdown menu then you can use .dropdown-header class.
Example:
Bootstrap Dropdown Position
You can set the position of dropdown at right using .dropdown-menu-right class. By default the dropdown is left aligned.
Example:
<li><a href="#"> dropdown 1 </a></li>
<li><a href="#"> dropdown 2 </a></li>
<li><a href="#"> dropdown 3 </a></li>
</ul>
Run Example
Bootstrap Dropup
You can expand the dropdown menu upward instead of the downward using .dropup class instead of .dropdown class.
Example:
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"> dropdown 1 </a></li>
<li><a href="#"> dropdown 2 </a></li>
<li><a href="#"> dropdown 3 </a></li>
</ul>
</div>
Run Example