Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los formularios. Si además añades la clase .form-control
a los elementos <input>
, <textarea>
y <select>
, su anchura se establece a width: 100%
. Para optimizar el espaciado, utiliza la clase .form-group
para encerrar cada campo de formulario con su <label>
.
Ejemplo:
<form role="form">
<div class="form-group">
<label for="ejemplo_email_1">Email</label>
<input type="email" class="form-control" id="ejemplo_email_1"
placeholder="Introduce tu email">
</div>
<div class="form-group">
<label for="ejemplo_password_1">Contraseña</label>
<input type="password" class="form-control" id="ejemplo_password_1"
placeholder="Contraseña">
</div>
<div class="form-group">
<label for="ejemplo_archivo_1">Adjuntar un archivo</label>
<input type="file" id="ejemplo_archivo_1">
<p class="help-block">Ejemplo de texto de ayuda.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Activa esta casilla
</label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo: