Dropdowns

<div class="dropdown">
                            <button
                              class="btn btn-secondary 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-link 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 class="btn-group">
                            <button type="button" class="btn btn-primary">Dropdown Button</button>
                            <button
                              type="button"
                              class="btn btn-primary 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 class="d-inline-flex gap-2 align-items-center">
                            <div class="dropdown">
                            <button
                              class="btn btn-secondary btn-sm dropdown-toggle"
                              type="button"
                              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>
                            </ul>
                            </div>
                            <div class="dropdown">
                            <button
                              class="btn btn-secondary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Default 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">
                            <button
                              class="btn btn-secondary btn-lg dropdown-toggle"
                              type="button"
                              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>
                            </ul>
                            </div>
                            </div>
                            <div class="d-inline-flex gap-2 align-items-center">
                            <div class="btn-group">
                            <button class="btn btn-secondary btn-sm" type="button">Small split button</button>
                            <button
                              type="button"
                              class="btn btn-sm btn-secondary 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>
                            </ul>
                            </div>
                            <div class="btn-group">
                            <button class="btn btn-secondary" type="button">Large split button</button>
                            <button
                              type="button"
                              class="btn btn-secondary 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>
                            </ul>
                            </div>
                            <!-- Large button groups (default and split) -->
                            <div class="btn-group">
                            <button class="btn btn-secondary btn-lg" type="button">Large split button</button>
                            <button
                              type="button"
                              class="btn btn-lg btn-secondary 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>
                            </ul>
                            </div>
                            </div>
                          

<div class="btn-group me-1">
                            <button class="btn dropdown-toggle mb-1 btn-primary" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Primary</button>
                            <div class="dropdown-menu">
                            <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 me-1">
                            <button class="btn dropdown-toggle mb-1 btn-secondary" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Secondary</button>
                            <div class="dropdown-menu">
                            <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 me-1">
                            <button class="btn dropdown-toggle mb-1 btn-success" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Success</button>
                            <div class="dropdown-menu">
                            <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 me-1">
                            <button class="btn dropdown-toggle mb-1 btn-info" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Info</button>
                            <div class="dropdown-menu">
                            <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 me-1">
                            <button class="btn dropdown-toggle mb-1 btn-warning" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Warning</button>
                            <div class="dropdown-menu">
                            <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 me-1">
                            <button class="btn dropdown-toggle mb-1 btn-danger" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false">Danger</button>
                            <div class="dropdown-menu">
                            <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="d-inline-flex gap-2 flex-wrap">
                            <div class="dropdown-center">
                            <button
                              class="btn btn-primary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Centered dropdown
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Default dropup button -->
                            <div class="dropup-center dropup">
                            <button
                              class="btn btn-primary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Centered dropup
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <div class="btn-group dropup">
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropup
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Split dropup button -->
                            <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary">Split dropup</button>
                            <button
                              type="button"
                              class="btn btn-primary 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="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Default dropend button -->
                            <div class="btn-group dropend">
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropend
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Split dropend button -->
                            <div class="btn-group dropend">
                            <button type="button" class="btn btn-primary">Split dropend</button>
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle
                                dropdown-toggle-split"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            <span class="visually-hidden">Toggle Dropend</span>
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Default dropstart button -->
                            <div class="btn-group dropstart">
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropstart
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            </div>
                            <!-- Split dropstart button -->
                            <div class="btn-group dropstart">
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle
                                dropdown-toggle-split"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            <span class="visually-hidden">Toggle Dropstart</span>
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Action two</a></li>
                            <li><a class="dropdown-item" href="#">Action three</a></li>
                            </ul>
                            <button type="button" class="btn btn-primary">Split dropstart</button>
                            </div>
                            </div>

<div class="dropdown">
                            <button
                              class="btn btn-secondary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropdown
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Regular link</a></li>
                            <li><a class="dropdown-item active" href="#"
                              aria-current="true">Active link</a></li>
                            <li><a class="dropdown-item" href="#">Another link</a></li>
                            </ul>
                            </div>

<div class="dropdown">
                            <button
                              class="btn btn-primary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropdown
                            </button>
                            <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Regular link</a></li>
                            <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
                            <li><a class="dropdown-item" href="#">Another link</a></li>
                            </ul>
                            </div>

<div class="dropdown">
                            <button
                              class="btn btn-secondary dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              >
                            Dropdown button
                            </button>
                            <ul class="dropdown-menu">
                            <li>
                            <h6 class="dropdown-header">Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            </ul>
                            </div>

<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>
                            <li>
                            <hr class="dropdown-divider" />
                            </li>
                            <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                            </div>

<div class="d-flex">
                            span class="token tag"><div class="dropdown me-1">
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              data-bs-offset="10,20"
                              >
                            Offset
                            </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>
                            span class="token tag"></div>
                            span class="token tag"><div class="btn-group">
                            <button type="button" class="btn btn-primary">Reference</button>
                            <button
                              type="button"
                              class="btn btn-primary dropdown-toggle
                                dropdown-toggle-split"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                              data-bs-reference="parent"
                              >
                            <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 class="btn-group">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true"
                              aria-expanded="false">
                            Default dropdown
                            </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">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                            Clickable inside
                            </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">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                            Clickable outside
                            </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">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false"
                              aria-expanded="false">
                            Manual close
                            </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>