Bootstrap DropDown

Advertisements

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

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet


Download Projects

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements