Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Dropdown menus are toggled on hover in navigation panels.
Bootstrap documentation

Action Another action Something else here
Cards

You can use the .card and .list-styled components inside dropdowns to achieve a different look of your dropdown menus.

<div class="dropdown">

  <!-- Toggle -->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonTwo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown card
  </button>

  <!-- Menu -->
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonTwo">
    <div class="card">
      <div class="card-body">
        <ul class="list-styled mb-0">
          <li class="list-styled-item">
            <a class="list-styled-link" href="#!">Action</a>
          </li>
          <li class="list-styled-item">
            <a class="list-styled-link" href="#!">Another action</a>
          </li>
          <li class="list-styled-item">
            <a class="list-styled-link" href="#!">Something else here</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</div>