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>

Try it »

The above example will produce following example-

Bootstrap dropdown

If you click on the above button it will open the dropdown like this –

Dropdown menu example bootstrap

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>

Try it »

The output of the above example will produce the following output-

Bootstrap divider in dropdown

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>

Try it »

The output of the above example will produce the following output-

Dropdown header bootstrap


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>

Try it »

The above method will generate the below output-

Dropdown in navbar bootstrap

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>

Try it »

Following output will be produced-

dropdown in bootstrap button group


Advertisements

Add Comment

📖 Read More