<div class="card">
  <div class="card-header code-header">
    <h5>Single Button and Link Dropdown</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown 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>
      </ul>
    </div>
    <div class="dropdown">
      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
      </a>
      <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>
      </ul>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Dropdown submenu Menu</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <div class="app-dropdown">
      <button class="btn btn-primary border-0" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
        Clickable Submenu
      </button>
      <div class="dropdown-menu mb-3">
        <a href="#" class="dropdown-item">
          <span>Action</span>
          <i class="ti ti-user-plus ms-auto"></i>
        </a>
        <a href="#" class="dropdown-item">
          <span>Another action</span>
          <i class="ti ti-circles-relation ms-auto"></i>
        </a>
        <a href="#" class="dropdown-item">
          <span>Something else here</span>
          <i class="ti ti-message-circle ms-auto"></i>
        </a>
        <hr class="dropdown-divider">
        <a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <span>More Option</span>
          <i class="ti ti-arrow-badge-right ms-auto"></i>
        </a>
        <div class="dropdown-menu sub-menu">
          <a href="#" class="dropdown-item">
            <span>Action</span>
            <i class="ti ti-user-plus ms-auto"></i>
          </a>
          <a href="#" class="dropdown-item">
            <span>Another action</span>
            <i class="ti ti-circles-relation ms-auto"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="hover-dropdown app-hover-dropdown">
      <button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">
        Hover able Dropdown
      </button>
      <ul class="dropdown-menu bg-dark">
        <li class="dropdown-item">
          <a href="#">
            <span>Action</span>
          </a>
          <i class="ti ti-user-plus ms-auto"></i>
        </li>
        <li class="dropdown-item">
          <a href="#">
            <span>Another action</span>
          </a>
          <i class="ti ti-circles-relation ms-auto"></i>
        </li>
        <li class="dropdown-item">
          <a href="#">
            <span>Something else here</span>
          </a>
          <i class="ti ti-message-circle ms-auto"></i>
        </li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li class="hover-dropdown">
          <a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">
            More Option
          </a>
          <ul class="dropdown-menu hover-submenu">
            <li class="dropdown-item">
              <a href="#">
                <span>Action</span>
              </a>
              <i class="ti ti-user-plus ms-auto"></i>
            </li>
            <li class="dropdown-item">
              <a href="#">
                <span>Another action</span>
              </a>
              <i class="ti ti-circles-relation ms-auto"></i>
            </li>
            <li class="dropdown-item">
              <a href="#">
                <span>Something else here</span>
              </a>
              <i class="ti ti-message-circle ms-auto"></i>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Menu Content Dropdown</h5>
  </div>
  <div class="card-body">
    <div class="d-flex flex-wrap gap-2">
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Header <i class="mdi mdi-chevron-down"></i>
        </button>
        <div class="dropdown-menu">
          <div class="dropdown-header noti-title">
            <h5 class="text-muted text-truncate mn-0">Welcome Jessie!</h5>
          </div>
          <!-- item-->
          <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 class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Text <i class="mdi mdi-chevron-down"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-md p-3">
          <p>
            Some example text that's free-flowing within the dropdown menu.
          </p>
          <p class="mb-0">
            And this is more example text.
          </p>
        </div>
      </div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Forms <i class="mdi mdi-chevron-down"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-md form-dropdown p-4">
          <form>
            <div class="mb-2">
              <label class="form-label" for="exampleDropdownFormEmail">Email address</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
            </div>
            <div class="mb-2">
              <label class="form-label" for="exampleDropdownFormPassword">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password">
            </div>
            <div class="mb-2">
              <div class="form-check custom-checkbox">
                <input type="checkbox" class="form-check-input" id="rememberDropdownCheck">
                <label class="form-check-label" for="rememberDropdownCheck">Remember me</label>
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Dropdown Color Variant</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Primary
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Secondary
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Success
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Danger
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Warning
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Info
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Light
        </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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dark
        </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>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Sizing Dropdown</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-3">
    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-bs-toggle="dropdown" 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>
    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-secondary btn-lg">Large split button</button>
        <button type="button" class="btn btn-secondary opacity-75 btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">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>
    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" 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>
    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-danger btn-sm">Small split button</button>
        <button type="button" class="btn btn-danger opacity-75 btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">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>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Dropdown Outline Variant</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Primary</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Secondary</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Success</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Danger</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Warning</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Info</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-light">Light</button>
        <button type="button" class="btn btn-outline-light dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Light</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>

    <div>
      <div class="btn-group btn-rtl">
        <button type="button" class="btn btn-outline-dark">Dark</button>
        <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split p-2" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Dark</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>

  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Alignment Options</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2 alignment-dropdown">
    <div class="btn-group btn-rtl">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown <i class="ti ti-arrow-big-down-line"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group btn-rtl">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned menu <i class="ti ti-arrow-big-down-line"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group btn-rtl">
      <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        right-aligned lg <i class="ti ti-arrow-big-down-line"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group btn-rtl">
      <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        left-aligned lg <i class="ti ti-arrow-big-down-line"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group dropstart">
      <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="ti ti-arrow-big-left-line"></i> Dropstart
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group dropend">
      <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend <i class="ti ti-arrow-big-right-line"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>

    <div class="btn-group dropup">
      <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup <i class="ti ti-arrow-big-up-line"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Dropdown Light Variant</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-primary">Primary</button>
        <button type="button" class="btn btn-light-primary dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-secondary">Secondary</button>
        <button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-success">Success</button>
        <button type="button" class="btn btn-light-success dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-danger">Danger</button>
        <button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-warning">Warning</button>
        <button type="button" class="btn btn-light-warning dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-info">Info</button>
        <button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-light">Light</button>
        <button type="button" class="btn btn-light-light dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
    <div>
      <div class="btn-group dropdown-light btn-rtl">
        <button type="button" class="btn btn-light-dark">Dark</button>
        <button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split p-2"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
          <i class="ti ti-arrow-badge-down f-s-16"></i>
        </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>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Dropup Variation</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <!-- Dropup -->
    <div class="btn-group dropup dropdown-light btn-rtl">
      <button type="button" class="btn btn-light-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup <i class="ti ti-arrow-narrow-up"></i>
      </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>

    <!-- Split Dropup -->
    <div class="btn-group dropup dropdown-light btn-rtl">
      <button type="button" class="btn btn-light-secondary">
        Split dropup
      </button>
      <button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
        <i class="ti ti-arrow-narrow-up"></i>
      </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>

    <!-- Dropend -->
    <div class="btn-group dropend dropdown-light">
      <button type="button" class="btn btn-light-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend <i class="ti ti-arrow-narrow-right"></i>
      </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>

    <!-- Split Dropend -->
    <div class="btn-group dropend dropdown-light btn-rtl">
      <button type="button" class="btn btn-light-danger">
        Split dropend
      </button>
      <button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropend</span>
        <i class="ti ti-arrow-narrow-right"></i>
      </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>

    <!-- Dropstart -->
    <div class="btn-group dropstart dropdown-light">
      <button type="button" class="btn btn-light-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="ti ti-arrow-narrow-left"></i> Dropstart
      </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>

    <!-- Split Dropstart -->
    <div class="btn-group dropstart dropdown-light btn-rtl">
      <button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropstart</span>
        <i class="ti ti-arrow-narrow-left"></i>
      </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>
      <button type="button" class="btn btn-light-info">
        Split dropstart
      </button>
    </div>

    <!-- Dropup with Default Dropdown -->
    <div class="dropdown dropdown-light">
      <button class="btn btn-light-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup <i class="ti ti-arrow-narrow-down"></i>
      </button>
      <ul class="dropdown-menu">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
      </ul>
    </div>

    <!-- Split Dropup with Dark Button -->
    <div class="btn-group dropdown-light btn-rtl">
      <button type="button" class="btn btn-light-dark">Dropup</button>
      <button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
        <i class="ti ti-arrow-narrow-down"></i>
      </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>
</div>

<div class="card">
  <div class="card-header">
    <h5>Auto close behavior</h5>
  </div>
  <div class="card-body d-flex flex-wrap gap-2">
    <div class="btn-group dropdown-light btn-rtl">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
        data-bs-auto-close="true" aria-expanded="false">
        Default dropdown <i class="ti ti-circle-arrow-down"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropdown-light btn-rtl">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
        data-bs-auto-close="inside" aria-expanded="false">
        Clickable outside <i class="ti ti-circle-arrow-down"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropdown-light btn-rtl">
      <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
        data-bs-auto-close="outside" aria-expanded="false">
        Clickable inside <i class="ti ti-circle-arrow-down"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropdown-light btn-rtl">
      <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
        data-bs-auto-close="false" aria-expanded="false">
        Manual close <i class="ti ti-circle-arrow-down"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
  </div>
</div>