Checkbox en línea con Bootstrap

Cuando estamos creando un formulario e insertamos un checkbox en una página, si no hacemos nada al respecto, estos quedan dispuestos uno tras de otro como si fueran una lista. En este artículo vamos a ver cómo podemos crear checkbox en línea con Bootstrap.

Insertar checkbox en el formulario

Lo primero será insertar los checkbox dentro de nuestro formulario:

<div class="checkbox">
  <label>
    <input id="cb1" type="checkbox" value="option1"></input> Avila
  </label>
  <label>
    <input id="cb2" type="checkbox" value="option2"></input> Salamanca
  </label>
  <label>
    <input id="cb3" type="checkbox" value="option3"></input> Zamora
  </label>
</div>

Vemos que los checkbox son recubiertos por una capa que utiliza la clase checkbox y que luego, cada una de las opciones está compuesta por un elemento label y otro input.

Utilizar la clase checkbox-inline

Ahora lo que tenemos que hacer es utilizar la clase checkbox-inline. Esta clase la utilizamos dentro de cada uno de los elementos label. De esta manera el código ahora nos quedará de la siguiente forma:

<div class="checkbox">
  <label class="checkbox-inline">
    <input id="cb1" type="checkbox" value="option1"></input> Avila
  </label>
  <label class="checkbox-inline">
    <input id="cb2" type="checkbox" value="option2"></input> Salamanca
  </label>
  <label class="checkbox-inline">
    <input id="cb3" type="checkbox" value="option3"></input> Zamora
  </label>
</div>

De esta forma hemos visto lo sencillo que es poner una lista de opciones creando checkbox en línea con Bootstrap.