Dropdowns

Basic example

Action Another action Something else here
Action Another action Something else here 

<div class="dropdown mr-4">
  <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="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-primary 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="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Dropup variation .dropup

Action Another action Something else here
Action Another action Something else here 

<div class="dropdown dropup mr-4">
  <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="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Dropdown mega menu with .dropdown-extend-menu

Components 

<div class="dropdown">
  <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Components
  </a>
  <div class="dropdown-menu dropdown-extend-menu" role="menu">
    <div class="row">
      <div class="col-md-3">
        <a class="dropdown-item" href="#">Alerts</a>
        <a class="dropdown-item" href="#">Animations</a>
        <a class="dropdown-item" href="#">Badges</a>
        <a class="dropdown-item" href="#">Buttons</a>
      </div>
      <div class="col-md-3">
        <a class="dropdown-item" href="#">Button groups</a>
        <a class="dropdown-item" href="#">Cards</a>
        <a class="dropdown-item" href="#">Carousel</a>
        <a class="dropdown-item" href="#">Accordion</a>
      </div>
      <div class="col-md-3">
        <a class="dropdown-item" href="#">Call to action</a>
        <a class="dropdown-item" href="#">Dropdowns</a>
        <a class="dropdown-item" href="#">Forms</a>
        <a class="dropdown-item" href="#">Input groups</a>
      </div>
      <div class="col-md-3">
        <a class="dropdown-item" href="#">List groups</a>
        <a class="dropdown-item" href="#">Modals</a>
        <a class="dropdown-item" href="#">Navs</a>
        <a class="dropdown-item" href="#">Tables</a>
      </div>
    </div>
  </div>
</div>

Dropdown menu inverse with .dropdown-menu-inverse

Heads up! This can also be used in navbar menus.

Components 

<div class="dropdown-menu dropdown-menu-inverse" role="menu">
  <a class="dropdown-item" href="#">Alerts</a>
  <a class="dropdown-item" href="#">Animations</a>
  <a class="dropdown-item" href="#">Badges</a>
  <a class="dropdown-item" href="#">Buttons</a>
  <a class="dropdown-item" href="#">Navs</a>
  <a class="dropdown-item" href="#">Tables</a>
</div>