Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <a class="dropdown-item" href="#">Anything else</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Cool, Support Divider</a>
  </div>
</div>

Directions

Trigger dropdown menus above elements by adding .dropup, .dropright, .dropleft to the parent element.

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">
      Another action
    </a>
    <a class="dropdown-item" href="#">
      Something else here
    </a>
    <a class="dropdown-item" href="#">
      Anything else
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
      Cool, Support Divider
    </a>
  </div>
</div>

Variants

Trigger dropdown menus on hover by adding data-dropdown-event="hover" to the parent element. dropdown also support any content

Another action Something else here Anything else
Cool, Support Divider
Hello from dropdown

Nunc placerat mi id nisi interdm they mtolis. Praesient is haretra justo ught scel erisque placer. 

<div class="dropdown" data-dropdown-event="hover">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    Dropdown Hover
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <a class="dropdown-item" href="#">Anything else</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Cool, Support Divider</a>
  </div>
</div>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">
  Dropdown Content
</button>
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1"
        placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1"
        placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>
</div>

<div class="dropdown" style="width: 300px">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">
  Dropdown Large
</button>
<div class="dropdown-menu">
  <div class="p-4">
    <h6>
      Hello from dropdown <i class="far fa-smile text-primary"></i>
    </h6>
    <p class="mb-0">
      Nunc placerat mi id nisi interdm they mtolis. Praesient is haretra justo ught scel
      erisque placer.
    </p>
  </div>
</div>
</div>

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the data-display="static" attribute and use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
    data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

<div class="btn-group">
  <a href="#" class="iconbox border dropdown-toggle no-caret" data-toggle="dropdown"
    data-display="static" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-v"></i>
  </a>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

For more details please visit Bootstrap official site. Bootstrap Documentation