Bootstrap Dropdown
Bootstrap dropdown menu allows uses to select one value from the defined list. Dropdown menu provides fancy and responsive dropdown. You can add toggle effect using the .dropdown-toggle class.
Bootstrap Dropdown Example
Let us understand Dropdown with basic example
Example
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
|
The above example will produce following example-
If you click on the above button it will open the dropdown like this –
Bootstrap dropdown class Explaination
- .dropdown Defines the dropdown menu.
- .dropdown-toggle Binds the trigger event with the link.
- .caret Adds the icon which points the dropdown menu.
- .dropdown-menu is added in unordered list. It contains the list items to create link items.
Bootstrap Dropdown Divider
Dividers are used to separate the two link items in dropdown menu. Class .divider is used to create divider between the two link items.
Example
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
|
The output of the above example will produce the following output-
Bootstrap Dropdown Header
If you want to add headers in dropdown list use the class .dropdown-header class in <li> tag.
Example
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Header Example</li>
<li><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
|
The output of the above example will produce the following output-
More Examples
Bootstrap Dropdown menu in navigation bar
Here is an example of Dropdown in Navigation bar-
Example
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Account</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Settings <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Home</a></li>
<li><a href="#">Settingss</a></li>
</ul>
</li>
</ul>
|
The above method will generate the below output-
Bootstrap Dropdown Button Group Example
Here is simple button groups example with dropdown-
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Button One</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
Dropdown Button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Button One</a></li>
<li><a href="#">Dropdown Button Two</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Button One</button>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown">
Dropdown Button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Button One</a></li>
<li><a href="#">Dropdown Button Two</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Button One</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown">
Dropdown Button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Button One</a></li>
<li><a href="#">Dropdown Button Two</a></li>
</ul>
</div>
</div>
|
Following output will be produced-
Advertisements
