Bootstrap Dropdown

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

Related Posts