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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 |
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:
|
1 2 3 |
<li class="dropdown-header">Dropdown header 1</li> |
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:
|
1 2 3 4 |
<li class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li |
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:
|
1 2 3 |
<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:
|
1 2 3 |
<div class="dropup"> |