Bootstrap Dropdowns
The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list.
Before creating dropdown menu, we have to know about its class, that is given below:
- The .dropdown class is used to indicate a dropdown menu.
- The .dropwn-menu class is used to create dropdown menu.
- The .dropdown-toggle and data-toggle="dropdown" class is used to open the dropdown menu.
Let us see an example of Bootstrap Dropdowns:
<div class="container">
<h2>Example of Dropdowns</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Material design</a></li>
<li><a href="#">Pure CSS</a></li>
</ul>
</div>
</div>
Try Now
Bootstrap Dropdown Divider
The bootstrap dropdown divider is used to separate the links inside the dropdown menu with a thin horizontal border.
Let us see an example of Bootstrap Dropdown Divider:
<div class="container">
<h2>Example of Dropdowns</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Material design</a></li>
<li class="divider"></li>
<li><a href="#">Pure CSS</a></li>
</ul>
</div>
</div
Try Now
Bootstrap Dropdown Header
We can create dropdown header menu by using its class
.dropdown-header. We can not select page header while using drowdown header menu. It is like a level that help to understand what is the work.
Let us see an example of Bootstrap Dropdown Header:
<li class="dropdown-header">Dropdown header 1</li>
Try Now
Bootstrap Disable and Active Items
In bootstrap, we can disable and active items by using its
.disabled class.
Let us see an example of Bootstrap Disable and Active Items:
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li
Try Now
Bootstrap Dropdown Position
We can add dropdown position using its class. To create right-align the dropdown, add the
.dropdown-menu-right class.
Let us see an example of Bootstrap Disable and Active Items:
<ul class="dropdown-menu dropdown-menu-right">
Bootstrap Dropup
In Bootstrap, we can create dropdup menu. All the dropdown menu will be show on the top of the menu. We have to change the <
div> element with
.dropdown class to
.dropup.
Let us see an example of Bootstrap Dropup:
Try Now