Bootstrap DropDown


Prev Tutorial Next Tutorial

Design Dropdown Menu in Bootstrap

Using .dropdown class you can design dropdown menu in bootstrap. 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

<!DOCTYPE html>  
<html lang="en">  

<head>  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
  
<div class="container">  
  
  <div class="dropdown">  
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click Me  
    <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><a href="#">Bootstrap</a></li>  
    </ul>  
  </div>  
</div>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  
</html>

Output

Bootstrap Dropdown With Divider Example

Bootstrap Dropdown With Divider Example

<!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
   
</head>  
<body>  
  
<div class="container">  
  <div class="dropdown">  
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Online 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="#">Bootstrap</a></li> 
      <li><a href="#">AngularJS</a></li> 

      <li class="divider"></li>  
      <li><a href="#">About Us</a></li>  
    </ul>  
  </div>  
</div>  
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  
</body>  
</html>

Output

Bootstrap Dropdown with Header

Bootstrap Dropdown With Header

<!DOCTYPE html>  
<html>  
<head>  

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
   
</head>  
<body>  
  
<div class="container">  
  <div class="dropdown">  
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Online Tutorials  
    <span class="caret"></span></button>  
    <ul class="dropdown-menu">  
      <li class="dropdown-header">Dropdown header 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">Dropdown header 2</li>  
      <li><a href="#">About Us</a></li>  
    </ul>  
  </div>  
</div>  
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  
</body>  
</html>  

Output

Bootstrap Dropdown: Disable and Active Item

Using .disabled class to disable an item in the dropdown menu. In below example JavaScript is disable. Bootstrap in below dropdown menu select as active.

Example Bootstrap Dropdown: Disable and Active Item

<!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
  
<div class="container">  
  
  <div class="dropdown">  
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Online Tutorials  
    <span class="caret"></span></button>  
    <ul class="dropdown-menu">  
      <li><a href="#">HTML</a></li>  
      <li><a href="#">CSS</a></li> 
      <li class="active" ><a href="#">Bootstrap</a></li>   
      <li class="disabled"><a href="#">JavaScript</a></li>  
      <li class="divider"></li>  
      <li><a href="#">About Us</a></li>  
    </ul>  
  </div>  
</div>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  
</body>  
</html>  

Output


Prev Tutorial Next Tutorial

Advertisements

Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements