<div class="dropdown-menu">
<h6 class="dropdown-header"><i class="bi bi-bell-fill me-1"></i> Notifications</h6>
<a href="#" class="dropdown-item"><i class="bi bi-check2-square me-1"></i> All <span class="badge rounded-pill bg-primary p-1 ms-2">24</span></a>
<a href="#" class="dropdown-item"><i class="bi bi-chat-square-dots me-1"></i> Messages <span class="badge rounded-pill bg-warning p-1 ms-2">12</span></a>
<a href="#" class="dropdown-item"><i class="bi bi-star me-1"></i> Important <span class="badge rounded-pill bg-danger p-1 ms-2">05</span></a>
<a href="#" class="dropdown-item"><i class="bi bi-gear me-1"></i> Settings <span class="badge rounded-pill bg-info p-1 ms-2">07</span></a>
</div>

<div class=" dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Menu Item</a></li>
<li><a class="dropdown-item" href="#">Item Link</a></li>
<li><a class="dropdown-item active" href="#">Active Link</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled Link</a></li>
</div>

<div class="btn-group">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
</button>
<ul class="dropdown-menu">
    ----
</ul>
</div>

<div class="btn-group dropstart">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
    ----
</ul>
</div>

<div class="btn-group dropend">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
    ----
</ul>
</div>

<div class="btn-group dropup">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
    ----
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
    ----
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
    ----
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    ----
</ul>
</div>

<div class="btn-group me-3">
<button type="button" class="btn btn-danger m-0">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split m-0" 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="btn-group">
<button type="button" class="btn btn-outline-danger m-0">Action</button>
<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split mt-0 mb-0" 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>