Loading
Basic Dropdown
Action Another action Something else here
                                        
    <div  class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
        </div>
    </div>
Dropdown Scrollable Content

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis

                                        
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown Click
        </button>
        <div class="dropdown-menu p-3" data-scrollable="true" data-height="220">
            <p>...</p>
            <p>...</p>
        </div>
    </div>
Dropdown Sizing
Just adding .dropdown-menu-md on .dropdown-menu get medium dropdown menu
Action Another action Something else here
                                        
    <div  class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu dropdown-menu-md">
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
        </div>
    </div>
Just adding .dropdown-menu-lg on .dropdown-menu get large dropdown menu
Action Another action Something else here
                                        
    <div  class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu dropdown-menu-lg">
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
        </div>
    </div>
Dropdown Directions
Dropup Trigger dropdown menus above elements by adding .dropup to the parent element.
Action Another action Something else here
Action Another action Something else here
Dropright Trigger dropdown menus above elements by adding .dropright to the parent element.
Action Another action Something else here
Action Another action Something else here
Dropleft Trigger dropdown menus above elements by adding .dropleft to the parent element.
Dividers Dropdown
Action Another action Something else here
Submit
                                        
    <div  class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <div class="dropdown-divider">
                <a href="#" class="btn btn-sm btn-pill btn-brand">Submit</a>
            </div>
        </div>
    </div>
Dropdown Child's
Dropdown head
Action Another action Something else here
Dropdown foot
                                        
    <div  class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <div class="dropdown-head">
                Dropdown head
            </div>
            <div class="dropdown-body">
                <a class="dropdown-item" href="#">...</a>
                <a class="dropdown-item" href="#">...</a>
                <a class="dropdown-item" href="#">...</a>
            </div>
            <div class="dropdown-foot">
                Dropdown foot
            </div>
        </div>
    </div>
Split Button
Action Another action Something else here
                                        
    <div  class="btn-group">
        <button type="button" class="btn btn-primary">Dropdown</button>
        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only"">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
            <a class="dropdown-item" href="#">...</a>
        </div>
    </div>
Dropdown Button Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Action Another action Something else here
Action Another action Something else here