Post
Ask Question

Journey With Bootstrap : Day 4 (Dropdown Buttons)

As I promised in Day 3 of our journey that in my next article I'll explain Bootstrap Dropdown Buttons so here I'll explain Bootstrap Dropdown on Day 4 of our journey.

Syntax of Button

  1. <button type="button" class="btn btn-size">  
  2. <span class="glyphicon glyphicon-name"></span></button>  
  • Default
  • Info
  • Primary
  • Danger
  • success
  • warning

Default Button Syntax

  1. <button type=”button” class=”btn btn-default btn-size”>  
  2. Default  
  3. </button>  

Info Button Syntax

  1. <button type=”button” class=”btn btn-Info btn-size”>  
  2. Info  
  3. </button>  

Primary Button Syntax

  1. <button type=”button” class=”btn btn-primary btn-size”>  
  2. Primary  
  3. </button>  
Danger Button Syntax
  1. <button type=”button” class=”btn btn-Danger btn-size”>  
  2. Danger  
  3. </button>  
Success Button Syntax
  1. <button type=”button” class=”btn btn-Success btn-size”>  
  2. Success  
  3. </button>  

Warning Button Syntax

  1. <button type=”button” class=”btn btn-Warning btn-size”>  
  2. Warning  
  3. </button>  

Example

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <title>Day 4</title>  
  7.         <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />  
  8.         <script src="bootstrap/js/bootstrap.min.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <form>  
  12.             <div class="container">  
  13.                 <br />  
  14.                 <button type="button" class="btn btn-default btn-md">Default</button>  
  15.                 <button type="button" class="btn btn-info btn-md">Info</button>  
  16.                 <button type="button" class="btn btn-primary btn-md">Primary</button>  
  17.                 <button type="button" class="btn btn-danger btn-md">Danger</button>  
  18.                 <button type="button" class="btn btn-success btn-md">Success</button>  
  19.                 <button type="button" class="btn btn-warning btn-md">Warning</button>  
  20.             </div>  
  21.         </form>  
  22.     </body>  
  23. </html>  
Output
 
 
 
The given output is just a simple bootstrap button but to make it a dropdown button, we need to add some pre-defined tags of bootstrap.
  1. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  
And in the <ul> tag we need to add a class:
  1. <ul class="dropdown-menu" role="menu">  
For example:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <title>Bootstrap 3 Dropdowns </title>  
  6.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
  7.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
  8.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  9.                     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  10.                 </style>  
  11.             </head>  
  12.             <body>  
  13.                 <form>  
  14.                     <div class="container">  
  15.                         <br />  
  16.                         <div class="btn-group">  
  17.                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  
  18. Default  
  19.   
  20.                                 <span class="caret"></span>  
  21.                             </button>  
  22.                             <ul class="dropdown-menu" role="menu">  
  23.                                 <li>  
  24.                                     <a href="#">C# Corner </a>  
  25.                                 </li>  
  26.                                 <li>  
  27.                                     <a href="#">C# Corner </a>  
  28.                                 </li>  
  29.                                 <li>  
  30.                                     <a href="#">C# Corner </a>  
  31.                                 </li>  
  32.                                 <li class="divider"></li>  
  33.                                 <li>  
  34.                                     <a href="#">C# Corner </a>  
  35.                                 </li>  
  36.                             </ul>  
  37.                         </div>  
  38.                         <div class="btn-group">  
  39.                             <button type="button" class="btn btn-primary dropdown-toggle"  
  40. data-toggle="dropdown">  
  41. Primary   
  42.                                 <span class="caret"></span>  
  43.                             </button>  
  44.                             <ul class="dropdown-menu" role="menu">  
  45.                                 <li>  
  46.                                     <a href="#">C# Corner </a>  
  47.                                 </li>  
  48.                                 <li>  
  49.                                     <a href="#">C# Corner </a>  
  50.                                 </li>  
  51.                                 <li>  
  52.                                     <a href="#">C# Corner </a>  
  53.                                 </li>  
  54.                                 <li class="divider"></li>  
  55.                                 <li>  
  56.                                     <a href="#">C# Corner </a>  
  57.                                 </li>  
  58.                             </ul>  
  59.                         </div>  
  60.                         <div class="btn-group">  
  61.                             <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">  
  62. Danger  
  63.   
  64.                                 <span class="caret"></span>  
  65.                             </button>  
  66.                             <ul class="dropdown-menu" role="menu">  
  67.                                 <li>  
  68.                                     <a href="#">C# Corner </a>  
  69.                                 </li>  
  70.                                 <li>  
  71.                                     <a href="#">C# Corner </a>  
  72.                                 </li>  
  73.                                 <li>  
  74.                                     <a href="#">C# Corner </a>  
  75.                                 </li>  
  76.                                 <li>  
  77.                                     <a href="#">C# Corner </a>  
  78.                                 </li>  
  79.                             </ul>  
  80.                         </div>  
  81.                         <div class="btn-group">  
  82.                             <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">  
  83. success  
  84.   
  85.                                 <span class="caret"></span>  
  86.                             </button>  
  87.                             <ul class="dropdown-menu" role="menu">  
  88.                                 <li>  
  89.                                     <a href="#">C# Corner </a>  
  90.                                 </li>  
  91.                                 <li>  
  92.                                     <a href="#">C# Corner </a>  
  93.                                 </li>  
  94.                                 <li>  
  95.                                     <a href="#">C# Corner </a>  
  96.                                 </li>  
  97.                                 <li>  
  98.                                     <a href="#">C# Corner </a>  
  99.                                 </li>  
  100.                             </ul>  
  101.                         </div>  
  102.                         <div class="btn-group">  
  103.                             <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">  
  104. warning  
  105.   
  106.                                 <span class="caret"></span>  
  107.                             </button>  
  108.                             <ul class="dropdown-menu" role="menu">  
  109.                                 <li>  
  110.                                     <a href="#">C# Corner </a>  
  111.                                 </li>  
  112.                                 <li>  
  113.                                     <a href="#">C# Corner </a>  
  114.                                 </li>  
  115.                                 <li>  
  116.                                     <a href="#">C# Corner </a>  
  117.                                 </li>  
  118.                                 <li>  
  119.                                     <a href="#">C# Corner </a>  
  120.                                 </li>  
  121.                             </ul>  
  122.                        </div>  
  123.                 </div>  
  124.             </form>  
  125.         </body>  
  126. </html>  
Output
 
 
 
If you want to show the dropdown content in the upward direction then add a dropup to the parent class.
  1. <div class="btn-group dropup">  
Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <title>Bootstrap Dropdowns </title>  
  6.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
  7.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
  8.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  9.                     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  10.                     <style>  
  11. .frm  
  12. {  
  13. margin:20%;  
  14. }  
  15. </style>  
  16.                 </head>  
  17.                 <body>  
  18.                     <form class="frm">  
  19.                         <div class="container">  
  20.                             <br />  
  21.                             <div class="btn-group dropup">  
  22.                                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  
  23. Default  
  24.   
  25.                                     <span class="caret"></span>  
  26.                                 </button>  
  27.                                 <ul class="dropdown-menu" role="menu">  
  28.                                     <li>  
  29.                                         <a href="#">C# Corner </a>  
  30.                                     </li>  
  31.                                     <li>  
  32.                                         <a href="#">C# Corner </a>  
  33.                                     </li>  
  34.                                     <li>  
  35.                                         <a href="#">C# Corner </a>  
  36.                                     </li>  
  37.                                     <li class="divider"></li>  
  38.                                     <li>  
  39.                                         <a href="#">C# Corner </a>  
  40.                                     </li>  
  41.                                 </ul>  
  42.                             </div>  
  43.                             <div class="btn-group dropup">  
  44.                                 <button type="button" class="btn btn-primary dropdown-toggle"  
  45. data-toggle="dropdown">  
  46. Primary   
  47.                                     <span class="caret"></span>  
  48.                                 </button>  
  49.                                 <ul class="dropdown-menu" role="menu">  
  50.                                     <li>  
  51.                                         <a href="#">C# Corner </a>  
  52.                                     </li>  
  53.                                     <li>  
  54.                                         <a href="#">C# Corner </a>  
  55.                                     </li>  
  56.                                     <li>  
  57.                                         <a href="#">C# Corner </a>  
  58.                                     </li>  
  59.                                     <li class="divider"></li>  
  60.                                     <li>  
  61.                                         <a href="#">C# Corner </a>  
  62.                                     </li>  
  63.                                 </ul>  
  64.                             </div>  
  65.                             <div class="btn-group dropup">  
  66.                                 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">  
  67. Danger  
  68.   
  69.                                     <span class="caret"></span>  
  70.                                 </button>  
  71.                                 <ul class="dropdown-menu" role="menu">  
  72.                                     <li>  
  73.                                         <a href="#">C# Corner </a>  
  74.                                     </li>  
  75.                                     <li>  
  76.                                         <a href="#">C# Corner </a>  
  77.                                     </li>  
  78.                                     <li>  
  79.                                         <a href="#">C# Corner </a>  
  80.                                     </li>  
  81.                                     <li>  
  82.                                         <a href="#">C# Corner </a>  
  83.                                     </li>  
  84.                                 </ul>  
  85.                             </div>  
  86.                             <div class="btn-group dropup">  
  87.                                 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">  
  88. success  
  89.   
  90.                                     <span class="caret"></span>  
  91.                                 </button>  
  92.                                 <ul class="dropdown-menu" role="menu">  
  93.                                     <li>  
  94.                                         <a href="#">C# Corner </a>  
  95.                                     </li>  
  96.                                     <li>  
  97.                                         <a href="#">C# Corner </a>  
  98.                                     </li>  
  99.                                     <li>  
  100.                                         <a href="#">C# Corner </a>  
  101.                                     </li>  
  102.                                     <li>  
  103.                                         <a href="#">C# Corner </a>  
  104.                                     </li>  
  105.                                 </ul>  
  106.                             </div>  
  107.                             <div class="btn-group dropup">  
  108.                                 <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">  
  109. warning  
  110.   
  111.                                     <span class="caret"></span>  
  112.                                 </button>  
  113.                                 <ul class="dropdown-menu" role="menu">  
  114.                                     <li>  
  115.                                         <a href="#">C# Corner </a>  
  116.                                     </li>  
  117.                                     <li>  
  118.                                         <a href="#">C# Corner </a>  
  119.                                     </li>  
  120.                                     <li>  
  121.                                         <a href="#">C# Corner </a>  
  122.                                     </li>  
  123.                                     <li>  
  124.                                         <a href="#">C# Corner </a>  
  125.                                     </li>  
  126.                                 </ul>  
  127.                             </div>  
  128.                         </div>  
  129.                     </form>  
  130.                 </body>  
  131. </html>  
Output
 
 
 
Now we will split the button into two parts.
 
To do this we make two buttons, one is for the button with a name and the second button for a glyphicon.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <title>Bootstrap Dropdowns </title>  
  6.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
  7.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
  8.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  9.                     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  10.                     <style>  
  11. .frm  
  12. {  
  13. margin:20%;  
  14. }  
  15. </style>  
  16.                 </head>  
  17.                 <body>  
  18.                     <form class="frm">  
  19.                         <div class="container">  
  20.                             <br />  
  21.                             <div class="btn-group">  
  22.                                 <button type="button" class="btn btn-default">Default </button>  
  23.                                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  
  24.                                     <span class="caret"></span>  
  25.                                 </button>  
  26.                                 <ul class="dropdown-menu" role="menu">  
  27.                                     <li>  
  28.                                         <a href="#">C# Corner </a>  
  29.                                     </li>  
  30.                                     <li>  
  31.                                         <a href="#">C# Corner </a>  
  32.                                     </li>  
  33.                                     <li>  
  34.                                         <a href="#">C# Corner </a>  
  35.                                     </li>  
  36.                                     <li class="divider"></li>  
  37.                                     <li>  
  38.                                         <a href="#">C# Corner </a>  
  39.                                     </li>  
  40.                                 </ul>  
  41.                             </div>  
  42.                             <div class="btn-group">  
  43.                                 <button type="button" class="btn btn-primary">primary </button>  
  44.                                 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">  
  45.                                     <span class="caret"></span>  
  46.                                 </button>  
  47.                                 <ul class="dropdown-menu" role="menu">  
  48.                                     <li>  
  49.                                         <a href="#">C# Corner </a>  
  50.                                     </li>  
  51.                                     <li>  
  52.                                         <a href="#">C# Corner </a>  
  53.                                     </li>  
  54.                                     <li>  
  55.                                         <a href="#">C# Corner </a>  
  56.                                     </li>  
  57.                                     <li class="divider"></li>  
  58.                                     <li>  
  59.                                         <a href="#">C# Corner </a>  
  60.                                     </li>  
  61.                                 </ul>  
  62.                             </div>  
  63.                             <div class="btn-group">  
  64.                                 <button type="button" class="btn btn-danger">Default </button>  
  65.                                 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">  
  66.                                     <span class="caret"></span>  
  67.                                 </button>  
  68.                                 <ul class="dropdown-menu" role="menu">  
  69.                                     <li>  
  70.                                         <a href="#">C# Corner </a>  
  71.                                     </li>  
  72.                                     <li>  
  73.                                         <a href="#">C# Corner </a>  
  74.                                     </li>  
  75.                                     <li>  
  76.                                         <a href="#">C# Corner </a>  
  77.                                     </li>  
  78.                                     <li>  
  79.                                         <a href="#">C# Corner </a>  
  80.                                     </li>  
  81.                                 </ul>  
  82.                             </div>  
  83.                             <div class="btn-group">  
  84.                                 <button type="button" class="btn btn-success">success</button>  
  85.                                 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">  
  86.                                     <span class="caret"></span>  
  87.                                 </button>  
  88.                                 <ul class="dropdown-menu" role="menu">  
  89.                                     <li>  
  90.                                         <a href="#">C# Corner </a>  
  91.                                     </li>  
  92.                                     <li>  
  93.                                         <a href="#">C# Corner </a>  
  94.                                     </li>  
  95.                                     <li>  
  96.                                         <a href="#">C# Corner </a>  
  97.                                     </li>  
  98.                                     <li>  
  99.                                         <a href="#">C# Corner </a>  
  100.                                     </li>  
  101.                                 </ul>  
  102.                             </div>  
  103.                             <div class="btn-group">  
  104.                                 <button type="button" class="btn btn-warning">warning </button>  
  105.                                 <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">  
  106.                                     <span class="caret"></span>  
  107.                                 </button>  
  108.                                 <ul class="dropdown-menu" role="menu">  
  109.                                     <li>  
  110.                                         <a href="#">C# Corner </a>  
  111.                                     </li>  
  112.                                     <li>  
  113.                                         <a href="#">C# Corner </a>  
  114.                                     </li>  
  115.                                     <li>  
  116.                                         <a href="#">C# Corner </a>  
  117.                                     </li>  
  118.                                     <li>  
  119.                                         <a href="#">C# Corner </a>  
  120.                                     </li>  
  121.                                 </ul>  
  122.                             </div>  
  123.                         </div>  
  124.                     </form>  
  125.                 </body>  
  126. </html>  

Output

 

Ok Geeks. I think that is enough for our 4th day of our journey.

In our next day of journeys we will meet with a new concept of Bootstrap.

If you have not yet read my previous articles of bootstrap then read it from:


Similar Articles