Dropdown

Basic Dropdown
Show Code
                    
        <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="dropdownMenuButton">
        <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>
        </div>
                    
                  
Dropdown Link
Show Code
Dropdown Sizes
Show Code
Styled Dropdown
Show Code
                    
        <div class="dropdown mb-2">
        <button class="btn btn-primary dropdown-toggle" type="button" id="primaryDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="primaryDropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        </div>
        </div>
        <div class="dropdown mb-2">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="secondaryDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Secondary
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="secondaryDropdownMenuButton">
        <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>
        </div>
        <div class="dropdown mb-2">
        <button class="btn btn-success dropdown-toggle" type="button" id="successDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Success
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="successDropdownMenuButton">
        <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>
        </div>
        <div class="dropdown mb-2">
        <button class="btn btn-danger dropdown-toggle" type="button" id="dangerDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Danger
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="dangerDropdownMenuButton">
        <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>
        </div>
        <div class="dropdown mb-2">
        <button class="btn btn-warning dropdown-toggle" type="button" id="warningDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Warning
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="warningDropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        </div>
        </div>
        <div class="dropdown mb-2">
        <button class="btn btn-info dropdown-toggle" type="button" id="infoDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Info
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="infoDropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        </div>
        </div>
                    
                  
Header & Footer Dropdown
Show Code
                    
        <div class="dropdown mb-2">
        <button class="btn btn-primary dropdown-toggle" type="button" id="headerAndFooterDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Login Form
        </button>
        <div class="dropdown-menu box-shadow-wrapper" aria-labelledby="headerAndFooterDropdownMenuButton">
        <h5 class="font-weight-bold">Login</h5>
        <div class="dropdown-divider"></div>
        <form>
        <div class="form-group">
        <label class="text-sm" for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control text-sm" id="exampleDropdownFormEmail1" placeholder="[email protected]">
        </div>
        <div class="form-group">
        <label class="text-sm" for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control text-sm" id="exampleDropdownFormPassword1" placeholder="Password">
        </div>
        <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label text-sm" for="dropdownCheck">
            Remember me
          </label>
        </div>
        </div>
        <div class="dropdown-divider"></div>
        <div class="text-right">
        <button type="submit" class="btn btn-sm btn-primary">Sign in</button>
        </div>
        </form>
        </div>
        </div>