input-groups.less

extensions
@
.00
$ .00
@
@

Content

  1. Basics
  2. Sizes
  3. Buttons & icons
  4. Checkboxes & radio buttons

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a input.

Default input group
.00
@
<div class="input-group">
  <span class="input-group-addon">€</span>
  <input type="text">
  <span class="input-group-addon">.00</span>
</div>

Sizes

Usual input size classes .input-small and .input-large do apply for input group elements too.

Input group sizes
.00
.00
.00
<div class="input-group">
  <span class="input-group-addon input-small">€</span>
  <input class="input-small" type="text">
  <span class="input-group-addon input-small">.00</span>
</div>

Buttons and icons

Buttons can be put into input groups too but require one additional .input-group-button span to reset the sizing. The icon module also works in combination with input groups.

Search input with button and icon addon
<div class="input-group">
  <span class="input-group-addon icon-search"></span>
  <input type="text">
  <span class="input-group-button">
    <button>...</button>
  </span>
</div>

Checkboxes & radio buttons

Checkboxes & radio buttons can be put into a .input-group-addon too.