<!-- Dropdowns -->
<div class="card mb-6" id="btn-dropdown-demo">
    <h5 class="card-header">Dropdowns</h5>

    <div class="card-body">
        <div class="demo-inline-spacing">

            <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    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 class="btn-group">
                <button type="button" class="btn btn-dark">Primary</button>
                <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                </ul>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-dark dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                    Hidden arrow
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                </ul>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-dark btn-icon rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                    <i class="bx bx-dots-vertical-rounded"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

<!-- Dropdown Variations -->
<div class="card" id="dropdown-variation-demo">
    <h5 class="card-header">Dropdown Variations</h5>

    <div class="card-body">
        <small class="fw-medium">Menu Alignment</small>

        <div class="btn-group">
            <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
                End-aligned menu
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><button class="dropdown-item">Action</button></li>
            </ul>
        </div>

    </div>

    <hr class="m-0">

    <div class="card-body">
        <small class="fw-medium">Sizes</small>

        <div class="btn-group">
            <button class="btn btn-dark btn-lg dropdown-toggle" data-bs-toggle="dropdown">
                Large button
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
            </ul>
        </div>

    </div>
</div>