• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Dropdowns

June 20, 2014 //  by Sutha Kaliannan//  Leave a Comment

The dropdown menu is sometimes referred to as pull down menu or drop down list which appears when clicking on a button or text selection which allows the user to choose a single value. A dropdown list can be used to display large list of options where only one option is displayed initially, the remaining options will get display when user activates drop down box.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

This tutorial explains how to implement the bootstrap dropdown menu using the Bootstrap framework. As we have looked at the previous bootstrap tutorials, bootstrap provides good CSS appeal for every components.

To use dropdown menu, Bootstrap provides class .dropdown which demonstrate following basic dropdown menu example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></a>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
        <li><a href="#">New Zealand</a></li>
   </ul>
</li>
</ul>
</body>
</html>

As shown in the above script, we just wrap the dropdown menu within the .dropdown class. Using dropdown plug-in, we have created dropdown menu by using base class navigation nav-pills. The anchor element uses dropdown-toggle class and data-toggle attribute which displays the options when user activates drop down box.

  • Run Bootstrap Basic Dropdown List Demo

Bootstrap Basic Dropdown Menu Example

Bootstrap Dropdown Alignment Options

By default, the dropdown menu will be positioned to the left side of its parent. If we want to position dropdown list to the right side, then we could make use of .dropdown-menu-right class. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="mydropdown">Country List<span class="caret"></span></a>
   <ul class="dropdown-menu dropdown-menu-right" area-labelledby="mydropdown">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</li>
</ul>
</body>
</html>
  • Run Bootstrap Alignment Options Demo

Bootstrap Alignment Options Example

Bootstrap Dropdown Headers

We can add headers to particular option or multiple options in the dropdown menu by using the .dropdown-header. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Headers in Dropdown Menu</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li class="dropdown-header">Countries_List1</li>
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">Countries_List2</li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

As shown in the script, we have used .dropdown-header within dropdown-menu class. The dropdown-header contains particular heading for the list of options in the dropdown menu and the class divider is used to divide between the list of options in the dropdown menu.

  • Run Bootstrap Headers Demo

Bootstrap Headers Example

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Category: BootstrapTag: Bootstrap Components

About Sutha Kaliannan

Previous Post: « Introduction to Groovy / Grails Tool Suite (GGTS)
Next Post: Bootstrap Button Dropdowns »

Reader Interactions

Leave a Reply Cancel reply

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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact