
Please follow the following example to use bootstrap dropdown menu.
Dropdown Divider
Code Structure
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">ASP</a></li>
<li class="divider"></li>
<li><a href="#">HTML</a></li>
</ul>
</div>
</div>
Dropdown Header
Code Structure
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown Header</li>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">ASP</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown Header</li>
<li><a href="#">HTML</a></li>
</ul>
</div>
</div>
Dropdown Disabled
Code Structure
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li class="disabled"><a href="#">Java</a></li>
<li><a href="#">ASP</a></li>
</ul>
</div>
</div>
Dropdown Position
Code Structure
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">ASP</a></li>
</ul>
</div>
</div>
Dropup
Code Structure
<div class="container">
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropup <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">ASP</a></li>
</ul>
</div>
</div>
Share this