Bootstrap dropdown

In bootstrap dropdown are used to show links which toggleable properties. It makes the dropdown responsive while different bootstrap classes can used like contextual etc.

Example of dropdown

In this example bootstrap class dropdown is used and inside it a menu for drown is inserted.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownButton" data-toggle="dropdown">
  Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownButton">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Linke 3</a>
  </div>
</div>

Output of above code


Dropdown Divider

In this example a basic dropdown is used and inside the dropdown menu a bootstrap class dropdown-divider is inserted to make another dropdown list inside the dropdown menu.

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  Courses
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Course 1</a>
    <a class="dropdown-item" href="#">Course 2</a>
    <a class="dropdown-item" href="#">Course 3</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Mega Menu</a>
  </div>
</div>

Output of above code


Dropup menu

In this example bootstrap class dropup class is used to show links in upper side.

<div class="dropup show">
  <button class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
  Dropup links
  </button>

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a>
  </div>
</div>

Output of above code


Dropleft menu

In this example bootstrap class dropleft is used to show links in left side.

<div class="dropleft show">
  <button class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
  Dropup links
  </button>

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a>
  </div>
</div>

Output of above code








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.