Ver índice de contenidos del libro

5.6. Redimensionando campos de formulario

Modifica la altura por defecto de los campos con la clase .input-lg y modifica sus anchuras con las habituales clases .col-lg-* utilizadas para las rejillas de los layouts.

5.6.1. Cambiando la altura

Aumenta o disminuye la altura de los campos de formulario para que coincidan con la altura de los botones y así queden mejor. Ejemplo:

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Campo de texto">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
 
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Así se ve este ejemplo en tu navegador:

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

Campos de diferente altura en Bootstrap 3

Figura 5.14 Campos de diferente altura en Bootstrap 3

5.6.2. Cambiando la anchura

La forma más sencilla de controlar la anchura de los campos de formulario consiste en encerrarlos en otros elementos y aplicar las clases utilizadas para definir las rejillas de los layouts. Ejemplo:

<div class="row">
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-5">
    <input type="text" class="form-control" placeholder=".col-xs-5">
  </div>
</div>

Así se ve este ejemplo en tu navegador:

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

Campos de diferente anchura en Bootstrap 3

Figura 5.15 Campos de diferente anchura en Bootstrap 3