Dropdown buttons in Bootstrap

We all need dropdown menu in a website.Sometimes we use it as a hyperlink or in menu bar. Using this in a button is also what we need. Now with bootstrap including a dropdown menu in button is very easy.This article will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use to act as an indicator that the button is a dropdown.
The following example demonstrates a basic single button dropdowns. The following example including other examples have been shown in a plunker bootstrap template:

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
   <div class="btn-group"> 
   <!-- if we use default type, the button color will be  white-->
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown"> 
 Default <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu"> 
 <li><a href="#">Action</a></li> 
 <li><a href="#">Another action</a></li> 
 <li class="divider"></li> 
 <li><a href="#">Separated link</a></li> 
 </ul> 
</div> 
<div class="btn-group"> 
<!-- if we use primary type, the button color will be  blue-->
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown"> 
 Primary <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu"> 
 <li><a href="#">Action</a></li> 
 <li><a href="#">Another action</a></li> 
  <li class="divider"></li> 
 <li><a href="#">Separated link</a></li> 
 </ul> 
</div> 
  </body>
</html>

BOOT-LIST

Dropdown variations:

In buttons menu can be drop up or down very easily. To achive this option we have to use the .dropup or .dropdown in the parent of button group. In the following example we have drop the menu down in case of primary button. We also have dropped the menu upwards in secondary button. We also have specified a margin for making enough space for the dropup menu.
Now let us see how it works:

<div class="row" style="margin-left:50px; margin-top:200px"> 
   <!-- by using .dropdown in parent button group we can direct the list downwards-->
 <div class="btn-group dropdown"> 
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown"> Primary <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu"> 
 <li><a href="#">Action</a></li> 
 <li><a href="#">Another action</a></li> 
  <li class="divider"></li> 
 <li><a href="#">Separated link</a></li> 
 </ul> 
 </div> 
 <!-- by using .dropup in parent button group we can direct the list upwards-->
 <div class="btn-group dropup"> 
 <!-- using secondary makes the color grey by default-->
 <button type="button" class="btn btn-secondary dropdown-toggle" 
 data-toggle="dropdown"> Secondary <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu"> 
 <li><a href="#">Action</a></li> 
 <li><a href="#">Another action</a></li> 
  <li class="divider"></li> 
 <li><a href="#">Separated link</a></li> 
 </ul> 

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

1 thought on “Dropdown buttons in Bootstrap

Leave a Reply

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