فهرست‌های کشویی

<div class="btn-list d-flex align-items-center flex-wrap">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button"
                id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
               دکمه منوی کشویی
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            </ul>
        </div>
        <div class="dropdown">
            <a class="btn btn-secondary dropdown-toggle" href="javascript:void(0);" role="button"
                id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                لینک کشویی
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            </ul>
        </div>
    </div>

<div class="btn-list">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
            aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle rounded-pill" data-bs-toggle="dropdown"
            aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-success dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown"
            aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-warning dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-danger dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-success dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-info dropdown-toggle rounded-pill" data-bs-toggle="dropdown"
            aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-warning dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-danger dropdown-toggle rounded-pill"
            data-bs-toggle="dropdown" aria-expanded="false">
            گزینه یک
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="btn-group my-1">
    <button type="button" class="btn btn-primary">گزینه یک</button>
    <button type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button type="button" class="btn btn-secondary">گزینه یک</button>
    <button type="button"
        class="btn btn-secondary dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button type="button" class="btn btn-info">گزینه یک</button>
    <button type="button"
        class="btn btn-info dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button type="button" class="btn btn-success">گزینه یک</button>
    <button type="button"
        class="btn btn-success dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button type="button" class="btn btn-warning">گزینه یک</button>
    <button type="button"
        class="btn btn-warning dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button type="button" class="btn btn-danger">گزینه یک</button>
    <button type="button"
        class="btn btn-danger dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>

<div class="btn-group my-1 me-2">
    <button class="btn btn-primary btn-lg dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">
       دکمه بزرگ
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1 me-2">
    <button class="btn btn-light btn-lg" type="button">
        دکمه تقسیم بزرگ
    </button>
    <button type="button"
        class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<!-- samll button groups (default and split) -->
<div class="btn-group my-1 me-2">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        دکمه کوچک
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group my-1">
    <button class="btn btn-light btn-sm" type="button">
        دکمه کوچک تقسیم‌شده
    </button>
    <button type="button"
        class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>

<div class="btn-group dropup my-1">
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
        رها کردن
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group dropup my-1">
    <button type="button" class="btn btn-info">
        منوی بالا (Dropup)
    </button>
    <button type="button"
        class="btn btn-info dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">کشویی را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>

<div class="btn-group dropend my-1">
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
       منو کشویی راست
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group dropend my-1">
    <button type="button" class="btn btn-info">
        Split dropend
    </button>
    <button type="button"
        class="btn btn-info dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">منو کشویی راست را تغییر دهید</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>

<button type="button" class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
    شروع منو
</button>
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:void(0);">لینک معمولی</a></li>
    <li><a class="dropdown-item active" href="javascript:void(0);" aria-current="true">فعال
            link</a>
    </li>
    <li><a class="dropdown-item" href="javascript:void(0);">لینک دیگر</a></li>
</ul>

<div class="btn-group dropstart my-1">
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
        منو کشویی به چپ
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="btn-group">
    <div class="btn-group dropstart my-1" role="group">
        <button type="button"
            class="btn btn-info 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="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-info my-1">
        Split dropleft
    </button>
</div>

<button type="button" class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
        شروع منو
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">لینک معمولی</a></li>
        <li><a class="dropdown-item disabled" href="javascript:void(0);" aria-current="true">فعال
                link</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک دیگر</a></li>
    </ul>

<div class="btn-list">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button"
            id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true"
            aria-expanded="false">
            منوی کشویی پیش‌فرض
        </button>
        <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"
            id="dropdownMenuClickableOutside" data-bs-toggle="dropdown"
            data-bs-auto-close="inside" aria-expanded="false">
            قابل کلیک از داخل
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button"
            id="dropdownMenuClickableInside" data-bs-toggle="dropdown"
            data-bs-auto-close="outside" aria-expanded="false">
            قابل کلیک از خارج
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-warning dropdown-toggle" type="button"
            id="dropdownMenuClickable" data-bs-toggle="dropdown"
            data-bs-auto-close="false" aria-expanded="false">
            بسته شدن دستی
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
</div>

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
    data-bs-toggle="dropdown" aria-expanded="false">
    منو کشویی
</button>
<div class="dropdown-menu">
    <form class="px-4 py-3">
        <div class="mb-3">
            <label for="exampleDropdownFormEmail1" class="form-label">آدرس ایمیلs</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1"
                placeholder="email@example.com">
        </div>
        <div class="mb-3">
            <label for="exampleDropdownFormPassword1"
                class="form-label">کلمه عبور</label>
            <input type="password" class="form-control"
                id="exampleDropdownFormPassword1" placeholder="کلمه عبور">
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdownCheck">
                <label class="form-check-label" for="dropdownCheck">
                     مرا به خاطر بسپار
                </label>
            </div>
        </div>
        <button class="btn btn-primary">ورود</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="javascript:void(0);">جدید هستید؟ ثبت نام کنید</a>
    <a class="dropdown-item" href="javascript:void(0);">کلمه عبور را فراموش کرده‌اید؟</a>
</div>

<div class="dropdown-center">
    <button class="btn btn-primary dropdown-toggle" type="button"
        id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
        منوی کشویی در وسط
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک </a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک </a></li>
    </ul>
</div>

<div class="dropup-center dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button"
        id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
        منو کشویی در مرکز
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropupCenterBtn">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو </a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه </a></li>
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-info dropdown-toggle" type="button"
        id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="false">
        منو کشویی
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><button class="dropdown-item" type="button">گزینه یک</button></li>
        <li><button class="dropdown-item" type="button">گزینه دو</button>
        </li>
        <li><button class="dropdown-item" type="button"> گزینه
                سه</button>
        </li>
    </ul>
</div>

<div class="d-flex align-items-center">
    <div class="dropdown me-1">
        <button type="button" class="btn btn-primary dropdown-toggle"
            id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false"
            data-bs-offset="10,20">
            آفست
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info">مرجع</button>
        <button type="button"
            class="btn btn-info dropdown-toggle dropdown-toggle-split"
            id="dropdownMenuReference" data-bs-toggle="dropdown"
            aria-expanded="false" data-bs-reference="parent">
            <span class="visually-hidden">کشویی را تغییر دهید</span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle mb-0" type="button"
            id="dropdownMenuButton" data-bs-toggle="dropdown"
            aria-expanded="false">
            کشویی
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle mb-0"
            data-bs-toggle="dropdown" aria-expanded="false">
            منوی ترازبندی به راست
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle mb-0"
            data-bs-toggle="dropdown" data-bs-display="static"
            aria-expanded="false">
             ترازبندی به چپ، ترازبندی به راست بزرگ
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle mb-0"
            data-bs-toggle="dropdown" data-bs-display="static"
            aria-expanded="false">
             ترازبندی به راست، ترازبندی به چپ بزرگ
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group dropstart">
        <button type="button" class="btn btn-success dropdown-toggle mb-0"
            data-bs-toggle="dropdown" aria-expanded="false">
            شروع منو
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group dropend">
        <button type="button" class="btn btn-danger dropdown-toggle mb-0"
            data-bs-toggle="dropdown" aria-expanded="false">
             پایان منو
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
    <div class="btn-group dropup">
        <button type="button" class="btn btn-teal dropdown-toggle mb-0"
            data-bs-toggle="dropdown" aria-expanded="false">
            رها کردن
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه منو</a></li>
        </ul>
    </div>
</div>

<div class="dropdown">
    <button class="btn btn-dark dropdown-toggle" type="button"
        id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
       دکمه منوی کشویی
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
        مثال منوی تراز راست
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">گزینه یک</button>
        </li>
        <li><button class="dropdown-item" type="button">گزینه
                دو</button></li>
        <li><button class="dropdown-item" type="button"> گزینه
                سه</button>
        </li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle text-wrap"
        data-bs-toggle="dropdown" data-bs-display="static"
        aria-expanded="false">
        تراز چپ اما با صفحه بزرگ تراز راست
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><button class="dropdown-item" type="button">گزینه یک</button>
        </li>
        <li><button class="dropdown-item" type="button">گزینه
                دو</button></li>
        <li><button class="dropdown-item" type="button"> گزینه
                سه</button>
        </li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle text-wrap"
        data-bs-toggle="dropdown" data-bs-display="static"
        aria-expanded="false">
       تراز راست اما تراز چپ در صفحه بزرگ
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-start">
        <li><button class="dropdown-item" type="button">گزینه یک</button>
        </li>
        <li><button class="dropdown-item" type="button">گزینه
                دو</button></li>
        <li><button class="dropdown-item" type="button">گزینه
                سه</button></li>
    </ul>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Primary
        </button>
        <ul class="dropdown-menu dropdown-menu-primary">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            secondary
        </button>
        <ul class="dropdown-menu dropdown-menu-secondary">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            warning
        </button>
        <ul class="dropdown-menu dropmenu-item-warning">
            <li><a class="dropdown-item active" href="javascript:void(0);">فعال</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            info
        </button>
        <ul class="dropdown-menu dropmenu-item-info">
            <li><a class="dropdown-item active" href="javascript:void(0);">فعال</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-success-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            success
        </button>
        <ul class="dropdown-menu dropmenu-light-success">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item active" href="javascript:void(0);">فعال</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button class="btn btn-danger-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            danger
        </button>
        <ul class="dropdown-menu dropmenu-light-danger">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item active" href="javascript:void(0);">فعال</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        </ul>
    </div>
</div>

<div class="btn-list">
    <div class="btn-group">
        <button type="button" class="btn btn-primary-ghost dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            Primary
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary-ghost dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            Secondary
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success-ghost dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            Success
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info-ghost dropdown-toggle" data-bs-toggle="dropdown"
            aria-expanded="false">
            Info
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning-ghost dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            Warning
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger-ghost dropdown-toggle"
            data-bs-toggle="dropdown" aria-expanded="false">
            Danger
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
        </ul>
    </div>
</div>

<div class="bd-example">
    <ul class="dropdown-menu">
        <li><span class="dropdown-item-text">متن گزینه کشویی</span>
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a>
        </li>
    </ul>
</div>

<div class="bd-example">
    <ul class="dropdown-menu">
        <li>
            <h6 class="dropdown-header">هدر کشویی</h6>
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
    </ul>
</div>

<div class="bd-example">
    <ul class="dropdown-menu">
        <li><a class="dropdown-header" href="javascript:void(0);">سرفصل</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه یک</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه دو</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">گزینه سه</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>

<div class="bd-example">
    <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
        <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
        </p>
        <p class="mb-0">
             و با استفاده از طراحان گرافیک است
        </p>
    </div>
</div>