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:
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:
Figura 5.15 Campos de diferente anchura en Bootstrap 3