Bootstrap Button Sizing

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools [@ wikipedia.org].

Also see:

1. Bootstrap Various Buttons
2. Bootstrap Button Dropdowns
3. Bootstrap Button Sizing

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

...

...

...

Usage:

<!-- Large button group -->

  <div class="btn-group">

  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">

  Large button <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

  ...

  </ul>

  </div>


<!-- Small button group -->

  <div class="btn-group">

  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">

  Small button <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

  ...

  </ul>

  </div>


<!-- Extra small button group -->

  <div class="btn-group">

  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">

  Extra small button <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

  ...

  </ul>

  </div>