Bootstrap

Button with Dropdown

<!-- Example single danger button -->
<div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Split button dropdowns

<!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-danger">Action</button>
     <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-warning">Action</button>
     <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-success">Action</button>
     <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-info">Action</button>
     <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-secondary">Action</button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light">Action</button>
     <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-dark">Action</button>
     <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>

Light Button with Dropdown

<!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-danger text-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-info text-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-primary text-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-warning text-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-success text-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button class="btn btn-light-secondary text-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

Light Split button dropdowns

<!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-danger text-danger">Action</button>
      <button type="button" class="btn btn-light-danger text-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-warning text-warning">Action</button>
      <button type="button" class="btn btn-light-warning text-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-success text-success">Action</button>
      <button type="button" class="btn btn-light-success text-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-info text-info">Action</button>
      <button type="button" class="btn btn-light-info text-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-secondary text-secondary">Action</button>
      <button type="button" class="btn btn-light-secondary text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>

Large button dropdowns

<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary font-medium btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary font-medium btn-lg" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button
    </button>
    <button type="button" class="btn btn-lg btn-light-secondary text-secondary font-medium dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Use a `.btn-lg` classes to create instant button

Small button dropdowns

<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary font-medium btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary font-medium btn-sm" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
    </button>
    <button type="button" class="btn btn-sm btn-light-secondary text-secondary font-medium dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Use a `.btn-sm` classes to create instant button

Large Dark Dropdown

<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dark Dropdown
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary btn-lg" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dark Dropdown
    </button>
    <button type="button" class="btn btn-lg btn-light-secondary text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Use `dropdown-menu-dark` for dark dropdown buttons.

Small Dark Dropdown

<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dark Dropdown
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-light-secondary text-secondary btn-sm" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dark Dropdown
    </button>
    <button type="button" class="btn btn-sm btn-light-secondary text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Use `dropdown-menu-dark` for dark dropdown buttons.

Animated Dropdowns

<!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated flipInX">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated flipInY">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated lightSpeedIn">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated slideInUp">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated bounce">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated rubberBand">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated rubberBand">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
      </button>
      <ul class="dropdown-menu animated rubberBand">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Light Animated Dropdowns

<!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-danger text-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated flipInX">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-info text-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated flipInY">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-primary text-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated lightSpeedIn">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-warning text-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated slideInUp">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-success text-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated bounce">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light-secondary text-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Action
     </button>
     <ul class="dropdown-menu animated rubberBand">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Animated Dropdowns with icon

<!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-danger dropdown-toggle text-white" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="mail" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated flipInX">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="trash-2" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated flipInY">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i data-feather="heart" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated lightSpeedIn">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="inbox" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated slideInUp">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="clipboard" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated bounce">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <!-- Example single danger button -->
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="bell" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated rubberBand">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-light dropdown-toggle text-dark" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="calendar" class="feather-sm text-dark fill-white"></i>
     </button>
     <ul class="dropdown-menu animated rubberBand">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>
 <div class="btn-group mb-2">
     <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="camera" class="feather-sm fill-white text-white"></i>
     </button>
     <ul class="dropdown-menu animated rubberBand">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
         <li><hr class="dropdown-divider"></li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
 </div>

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Light Animated Button Dropdowns with icon

<!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-danger text-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="mail" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated flipInX">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-info text-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="trash-2" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated flipInY">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-primary text-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i data-feather="heart" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated lightSpeedIn">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-warning text-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="inbox" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated slideInUp">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-success text-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="clipboard" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated bounce">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>
  <!-- Example single danger button -->
  <div class="btn-group mb-2">
      <button type="button" class="btn btn-light-secondary text-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="bell" class="feather-sm fill-white"></i>
      </button>
      <ul class="dropdown-menu animated rubberBand">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
  </div>

Button with Dropdown

Split button dropdowns

Light Button with Dropdown

Light Split button dropdowns

Large button dropdowns

Use a `.btn-lg` classes to create instant button

Small button dropdowns

Use a `.btn-sm` classes to create instant button

Large Dark Dropdown

Use `dropdown-menu-dark` for dark dropdown buttons.

Small Dark Dropdown

Use `dropdown-menu-dark` for dark dropdown buttons.

Animated Dropdowns

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Light Animated Dropdowns

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Animated Dropdowns with icon

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Light Animated Button Dropdowns with icon

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Direction of the Dropdown

Trigger dropdown menus above elements by adding `.dropup` to the parent element.

Dropdowm Right Side

Dropdown Up Side

Dropdown Left Side

Menu Alignment

Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.

Responsive Alignment

Different Menu Content

Dropdown Options

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Dropdowns

$58,256

Button with Dropdown

Split button dropdowns

Light Button with Dropdown

Light Split button dropdowns

Large button dropdowns

Use a .btn-lg classes to create instant button

Small button dropdowns

Use a .btn-sm classes to create instant button

Large Dark Dropdown

Use dropdown-menu-dark for dark dropdown buttons.

Small Dark Dropdown

Use dropdown-menu-dark for dark dropdown buttons.

Animated Dropdowns

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class

Light Animated Dropdowns

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class

Animated Dropdowns with icon

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class

Light Animated Button Dropdowns with icon

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class

Direction of the Dropdown

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

Dropdowm Right Side

Dropdown Up Side

Dropdown Left Side

Menu Alignment

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.

Responsive Alignment

Different Menu Content

Dropdown header

Dropdown Options

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Use a `.btn-lg` classes to create instant button

Use a `.btn-sm` classes to create instant button

Use `dropdown-menu-dark` for dark dropdown buttons.

Use `dropdown-menu-dark` for dark dropdown buttons.

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Give class to the button `animated flipInX, flipInY, lightSpeedIn, slideInUp` use any animations class

Trigger dropdown menus above elements by adding `.dropup` to the parent element.

Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.