Dropdown-menu in Bootstrap

How to create dropdown menu in Bootstrap?

Dropdown with button

To create dropdown we need to use dropdown toggle in given class and datatoggle as dropdown in given button

<div class="container">
        <h2>Dropdowns</h2>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                TechFunda
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </div>

In the above code snippet we have created dropdown button, to add the dropdown menu, we need to given the class as dropdown and we should define the dropdown toggle in the given class as like in the button and datatoggle as dropdown, we have given the value of the button as techfunda, in the nextline we are having the caret to show the symbol in the span class and in the nextline we rae having the list element as ul with defining dropdown menu with defining the list values

output

Dropdown divider

It is used to separate the given values

<h2>Dropdown with divider</h2>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
                Tutorials
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

Dropdown with divider

In the above code snippet we have dropdown menu with divider, it creates line in the list by using divider

output

Dropdown header

It is used to create headings in the dropdown menu

 <h2> Dropdown header</h2>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
                Tutorials
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">heading 1</li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Heading 2</li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

Dropdown header

In the above code snippet we have defined the dropdown header which creates headings in the dropdown menu, we have created dropdown-header in the list values

output

Dropdown in active and disable state

We can select the dropdown menu in active state and disable state

 <h2> Dropdown with active and disable state</h2>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
                Tutorials
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">heading 1</li>
                <li class="disabled"><a href="#">HTML</a></li>
                <li class="active"><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Heading 2</li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

Dropdown with active and disable state

In the above code snippet we have dropdown menu with active state and disable state, we have list values with active and disable to make active and disable the values, we have the active state as css and disable state as HTML values

output

Dropdown position

It sets the position of the dropdown menu

<h2>Dropdown position</h2>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
                TechFunda
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

Dropdown position

In the above code snippet we have created dropdown position, we can set the position of the dropdown menu in the right and left side

output