Bootstrap 3 Button dropdowns

  • Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single button dropdowns

Wrap a series of buttons with .btn in .btn-group.

    
        <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                </ul>
        </div>
    

Split button dropdowns

Example
       
        <div class="btn-group">
                <button type="button" class="btn btn-danger">Action</button> 
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">               <span class="caret"></span>      
                        <span class="sr-only">Toggle Dropdown</span>    
                </button>    
                <ul class="dropdown-menu">      
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>    
                </ul>
        </div>
    

Sizing

       
        <!-- Large button group -->  
        <div class="btn-group">    
                <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      
                        Large button <span class="caret"></span>    
                </button>
                <ul class="dropdown-menu">      
                        ...    
                </ul>  
        </div>    
        <!-- Small button group -->  
        <div class="btn-group">    
                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      
                        Small button <span class="caret"></span>    
                </button>    
                <ul class="dropdown-menu">      
                        ...    
                </ul>  
        </div>    
        <!-- Extra small button group -->  
        <div class="btn-group">    
                <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      
                        Extra small button <span class="caret"></span>    
                </button>    
                <ul class="dropdown-menu">      
                        ...    
                </ul>
        </div>        
    

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

       
        <div class="btn-group dropup">    
                <button type="button" class="btn btn-default">Dropup</button>    
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      
                        <span class="caret"></span>      
                        <span class="sr-only">Toggle Dropdown</span>    
                </button>    
                <ul class="dropdown-menu">      
                        <!-- Dropdown menu links -->    
                </ul>
        </div>
    

Copyright 2016 by WebiBeris.com. All Rights Reserved.