Bootstrap 3.3.7 Input Components

Button groups

HTML has standard input components, but they can feel plain. Bootstrap provides styled components and scripts that make richer interfaces easy to build.

A button group displays multiple buttons as one connected bar.

<div class="btn-group">
  <button class="btn">Button text</button>
  <button class="btn btn-default">default</button>
  <button class="btn btn-primary">primary</button>
</div>

Buttons can use Bootstrap classes such as btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, and btn-danger.

Button toolbar

A button toolbar groups multiple button groups together, like a toolbar in desktop software.

<div class="btn-toolbar">
  <div class="btn-group">
    <button class="btn btn-default">One</button>
    <button class="btn btn-default">Two</button>
  </div>
  <div class="btn-group">
    <input type="button" class="btn btn-default" value="Three">
  </div>
</div>

Even non-button tags such as <div> can look and behave like buttons if button classes are applied.

Dropdowns

A dropdown shows a menu when a button is clicked.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Number
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li role="presentation"><a href="#">One</a></li>
    <li role="presentation"><a href="#">Two</a></li>
    <li role="presentation"><a href="#">Three</a></li>
  </ul>
</div>

The outer element uses dropdown. The button uses dropdown-toggle and data-toggle="dropdown". The menu is a <ul> with dropdown-menu and role="menu". Menu items use <li role="presentation"> and contain links.

Dropdowns inside button groups

When combining a dropdown with a button group, use a nested btn-group instead of dropdown.

<div class="btn-group">
  <div class="btn btn-default">String</div>
  <div class="btn btn-default">Bool</div>
  <div class="btn-group" role="group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Number <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation"><a href="#">One</a></li>
    </ul>
  </div>
</div>

Progress bars

Progress bars show completion status with a horizontal bar.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 35%;">
    35%
  </div>
</div>

Color classes include progress-bar-success, progress-bar-info, progress-bar-warning, and progress-bar-danger. Add progress-bar-striped for stripes, and add active for animated stripes.

Icons and badges

Bootstrap includes many Glyphicons. Use a <span> with the glyphicon base class and a specific icon class.

<span class="glyphicon glyphicon-ok"></span>

Available icons can be checked on the Bootstrap site. http://getbootstrap.com/components/#glyphicons

A badge is a small label displayed next to text.

<span class="badge">Badge</span>