6.5. Grupos de campos de formulario (Bootstrap 3, el manual oficial)

Los campos de formulario de tipo texto se pueden modificar para que muestren un texto o un botón delante, detrás o a ambos lados. Para ello, se agrupa el campo dentro de un elemento con la clase .input-group y se marca el elemento que va delante o detrás con la clase .input-group-addon.

Advertencia No debes aplicar esta técnica a los elementos <select> porque los navegadores basados en el motor WebKit no soportan este tipo de estilos.

Opciones especiales para los tooltips y popovers Cuando utilices tooltips o popovers en algún elemento dentro de un .input-group, tendrás que especificar la opción container: 'body' para evitar efectos indeseados (como por ejemplo que el elemento se haga más ancho o que pierda sus bordes redondeados al ejecutarse el tooltip o el popover).

6.5.1. Ejemplo básico

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.15 Grupos de campos en Bootstrap 3

6.5.2. Cambiando el tamaño de los campos

Los grupos de campos se pueden redimensionar fácilmente cambiando el tamaño del campo de formulario principal. De esta forma, al aplicar la clase CSS correspondiente al elemento .input-group, el resto de elementos del grupo se redimensionan automáticamente. Ejemplo:

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.16 Grupos de campos de diferente tamaño en Bootstrap 3

6.5.3. Adjuntando checkboxes y radiobuttons

Además de texto, a los campos de formulario también se le pueden adjuntar (por delante, por detrás o a ambos lados) otros campos de formulario de tipo radiobutton o checkbox. Ejemplo:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.17 Adjuntando checkbox y radiobutton a los campos de formulario en Bootstrap 3

6.5.4. Adjuntando botones

Debido a los estilos que aplican por defecto los navegadores, adjuntar un botón a un campo de formulario es un poco diferente a los casos anteriores. En lugar de aplicar la clase .input-group-addon, para adjuntar los botones se utiliza la clase .input-group-btn. Ejemplo:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Buscar</button>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Buscar</button>
      </span>
    </div>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.18 Adjuntando botones a los campos de formulario en Bootstrap 3

6.5.5. Adjuntando botones desplegables

Ejemplo:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">
          Acción <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
        </ul>
      </div>

      <input type="text" class="form-control">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">

      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">
          Acción <span class="caret"></span>
        </button>

        <ul class="dropdown-menu pull-right" role="menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.19 Adjuntando botones desplegables a los campos de formulario en Bootstrap 3

6.5.6. Adjuntando botones compuestos

Ejemplo:

<div class="input-group">
  <div class="input-group-btn">
    <!-- Botón y menú desplegable -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Botón y menú desplegable -->
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.20 Adjuntando botones compuestos a los campos de formulario en Bootstrap 3