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 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
  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
  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
  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
  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
  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
  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
  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
  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:
  1. Journey With Bootstrap : Day 1
  2. Journey With Bootstrap : Day 2 (Grid system)
  3. Journey Of Bootstrap : Day 3 (Glyphicon)