Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing dropdowns in bootstrap .

Objectives and Outcomes

In this, we will discuss about designing of dropdowns in bootstrap .

Dropdowns

The following example shows the code for a dropdown:

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Bootstrap
		<span class="caret"/>
	</button>
	<ul class="dropdown-menu">
		<li>
			<a href="#">Grids</a>
		</li>
		<li>
			<a href="#">Labels</a>
		</li>
		<li>
			<a href="#">Gliphicons</a>
		</li>
	</ul>
</div>





A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

The Bootstrap dropdown has basically two components — the dropdown trigger element which can be a hyperlink or button, and the dropdown menu itself.

1) The .dropdown class specifies a dropdown menu.
2) The .dropdown-toggle class defines the trigger element, which is a hyperlink in our case, whereas the attribute data-toggle="dropdown" is required on the trigger element to toggle the dropdown menu.
3) The .caret element inside the trigger anchor element creates a small down triangle icon which indicates that the link contains a dropdown menu.
4) The unordered list with the class .dropdown-menu is actually building the dropdown menu that typically contains the related links or actions.


Another great example of dropdown

The following example shows the code for different kind of dropdown:

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Bootstrap
		<span class="caret"/>
	</button>
	<ul class="dropdown-menu">
		<li class="disabled">
			<a href="#">Grids</a>
		</li>
		<li>
			<a href="#">Labels</a>
		</li>
		<li class="divider"/>
		<li class="dropdown-header">Sub division heading</li>
		<li>
			<a href="#">Gliphicons</a>
		</li>
	</ul>
</div>


Dropups

Till now we discussed about dropdowns, let's see a code for designing dropups that are not usually used.

<div class="dropup ">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Bootstrap
		<span class="caret"/>
	</button>
	<ul class="dropdown-menu">
		<li class="disabled">
			<a href="#">Grids</a>
		</li>
		<li>
			<a href="#">Labels</a>
		</li>
		<li class="divider"/>
		<li class="dropdown-header">Sub division heading</li>
		<li>
			<a href="#">Gliphicons</a>
		</li>
	</ul>
</div>