Formulario en línea con Bootstrap

Un formulario en línea es aquel que nos permite poner los componentes en una sola línea. Por ejemplo, si tenemos dos cajas de entrada de texto, con sus correspondientes etiquetas de texto y un botón de envío (el típico formulario de login) aparecerían todas en una línea.

En el ejemplo de hoy vamos a ver cómo podemos construir un formulario en línea con Bootstrap.

Crear el formulario básico

Lo primero que vamos a hacer es definir el formulario con sus elementos form, input, label y button:

<form>
  <label for="nombre">Nombre:</label>
  <input id="nombre" name="nombre" type="text"></input>
  <label for="email">Email:</label>
  <input id="email" name="email" type="text"></input>
  <button type="submit">Enviar</button>
</form>

Aplicar clases de Bootstrap

Lo siguiente será empezar a utilizar estructuras de Bootstrap. Por ejemplo, los elementos de tipo input son definidos mediante la clase form-control:

<form>
  <label for="nombre">Nombre:</label>
  <input class="form-control" id="nombre" name="nombre" type="text"></input>
  <label for="email">Email:</label>
  <input class="form-control" id="email" name="email" type="text"></input>
  <button type="submit">Enviar</button>
</form>

Agrupar campos con form-group

De igual manera se pueden agrupar los campos de etiquetas y entrada en grupos mediante la clase form-group:

<form>
  <div class="form-group">
    <label for="nombre">Nombre:</label>
    <input class="form-control" id="nombre" name="nombre" type="text"></input>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control" id="email" name="email" type="text"></input>
  </div>
  <button class="btn btn-default" type="submit">Enviar</button>
</form>

Aplicar la clase form-inline

Ya solo nos quedará utilizar la clase principal para el formulario y que es aquella que nos permite tener el formulario en línea con Bootstrap. Esta es la clase form-inline la cual aplicaremos directamente al elemento form:

<form class="form-inline">
  <div class="form-group">
    <label for="nombre">Nombre:</label>
    <input class="form-control" id="nombre" name="nombre" type="text"></input>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control" id="email" name="email" type="text"></input>
  </div>
  <button class="btn btn-default" type="submit">Enviar</button>
</form>

Y de esta forma tan sencilla hemos construido un formulario en línea con Bootstrap.