LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>

Split Button Example

Table Form creative Button Servise Price 
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="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 dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
 
<div class="btn-group  mr-5">
<button class="btn btn-primary btn-lg dropdown-toggle mt-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
Table Form creative Button Servise Price 
<div class="btn-group  mr-5">
<button class="btn btn-primary btn-lg mt-4" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split mt-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
Table Form creative Button Servise Price 
<div class="btn-group  mr-5">
<button class="btn btn-primary btn-sm dropdown-toggle mt-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
Table Form creative Button Servise Price 
<div class="btn-group  mr-5 mt-5">
<button class="btn btn-primary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm 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 dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>

Right Dropdown

Table Form creative Button Servise Price
Table Form creative Button Servise Price 
<div class="btn-group dropright">
<button type="button" class="btn btn-primary dropdown-toggle mr-5 mt-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright mt-4">
<button type="button" class="btn btn-primary ">
Split dropright
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split mr-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>

Left Dropdown

Table Form creative Button Servise Price
Table Form creative Button Servise Price 
<div class="btn-group mr-5 mt-4">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
<button type="button" class="btn btn-primary">
Split dropleft
</button>
</div>
<!-- Default dropleft button -->
<div class="btn-group dropleft mt-4">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>

Dropup

Table Form creative Button Servise Price
Table Form creative Button Servise Price 
<!-- Default dropup button -->
<div class="btn-group dropup mr-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>                  </div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">
Split dropup
</button>
<button type="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 dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>