Twitter Bootstrap Dropdown Button

Dropdown Button – Twitter Bootstrap

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

  1. <div style='text-align:left;'>
  2. 	<div class="btn-group">
  3. 	  <a class="btn dropdown-toggle btn-success" data-toggle="dropdown" href="#">
  4. 	    Button Text
  5. 	    <span class="caret"></span>
  6. 	  </a>
  7. 	  <ul class="dropdown-menu">
  8. 	    <li>
  9. 	    	<a href="#">Menu Option #1</a>
  10. 	    </li>
  11. 	    <li>
  12. 	    	<a href="#">Menu Option #2</a>
  13. 	    </li>
  14. 	    <li>
  15. 	    	<a href="#">Menu Option #3</a>
  16. 	    </li>
  17. 	    <li class='divider'></li>
  18. 	    <li>
  19. 	    	<a href="#">Menu Option #4</a>
  20. 	    </li>
  22. 	    <li>
  23. 	    	<a href="#">Menu Option #5</a>
  24. 	    </li>
  25. 	  </ul>
  26. 	</div>
  27. </div>

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.