Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Bootstrap Dropdowns

Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin.

Bootstrap Dropdown Example

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <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>

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and thedata-toggle="dropdown" attribute.

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

Dropdown Divider

The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:

<li class="divider"></li>

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:

<li class="dropdown-header">Dropdown header 1</li>

Disable and Active items

Highlight a specific dropdown item with the .active class (adds a blue background color).

To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

Dropdown Position

To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:

<ul class="dropdown-menu dropdown-menu-right">


If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

<div class="dropup">