Bootstrap Dropdown

The bootstrap dropdown menu is the easiest way of creating a menu with just the addition of few classes.

To create a dropdown menu, you have to write a javascript code to display a toggleable menu with links. However, bootstrap resolves this problem of writing javascript code and needs only to include bootstrap minified CSS and javascript files only to your project.

After the addition of these files to head part of your website, you can easily create dropdown menu without writing a single line of javascript.

Creating Bootstrap Dropdown Menus

To create a dropdown menu you have to add below given elements inside the HTML div tag with the class name .dropdown.

  • Add button or link element with the class .dropdown-toggle and also add the attribute data-toggle="dropdown". In addition to this, include the span tag with the class .caret to show the upward or downward menu links.
  • Add unordered list tag with the class .dropdown-menu and the list items with the links.

Below is the simple example you can follow to create a dropdown menu.

Test it Live


The above example using the anchor tag to show the button for toggleable menu. Click the above button to see the dropdown menu using the Bootstrap.

Creating Bootstrap Dropup Menus

If you want to create an upward menu or dropup menu, you have to follow the above given rules and change HTML div tag class to .dropup.
See the example given below for the dropup menu items.

Test it Live


Click the above given button, you will get an upward menu items with links. The class .caret shows the upward direction icon.

Right Align the Bootstrap Dropdown Menus

Aligning the dropdown menu to the right side, you have to just add the class .dropdown-menu-right to the ul tag element.

See the example given below for the right aligned dropdown menu list items.

Test it Live


Click the above button and you will get a right aligned dropdown menu with the list items.

Add Headers to Bootstrap Dropdown Menus Lists

If you want to add the list items with the header, you have to use the class .dropdown-header with the list element you want to make as a header.

Below is the example of the list items in which the first item is mentioned as the header item using the above class.

Test it Live


Bootstrap Dropdown Menus Divider to Separate Links

If you want to display a separate link from the other list items in a dropdown menu, you have to use the class .divider as the class of the separate list item.

It will create a line above the mentioned class list item or separate list item.

Test it Live


Disable and Active Bootstrap Dropdown Menu items

Using bootstrap you can easily make a dropdown menu list item disable or active. To disable a list item, you can use class .disabled. Similarly, to make list item active, you can use class .active.

The disable menu item shows a not allowed to click menu item when you hover over the item. However, the active list item displays with primary background color without hovering over the item.

Test it Live


Getbootstrap Menu

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id