Checkbox en línea con Bootstrap

05/Nov/2015 Bootstrap Deja un comentario

A la hora de insertar los checkbox dentro de una página, si no hacemos nada al respecto, estos, quedan dispuestos uno tras de otro como si fueran una lista. En el ejemplo de hoy vamos a ver cómo podemos crear checkbox en línea con Bootstrap.

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

  1. <div class="checkbox">
  2. <input type="checkbox" id="cb1" value="option1"> Avila
  3. </label>
  4. <input type="checkbox" id="cb2" value="option2"> Salamanca
  5. </label>
  6. <input type="checkbox" id="cb3" value="option3"> Zamora
  7. </label>
  8. </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.

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:

  1. <div class="checkbox">
  2. <label class="checkbox-inline">
  3. <input type="checkbox" id="cb1" value="option1"> Avila
  4. </label>
  5. <label class="checkbox-inline">
  6. <input type="checkbox" id="cb2" value="option2"> Salamanca
  7. </label>
  8. <label class="checkbox-inline">
  9. <input type="checkbox" id="cb3" value="option3"> Zamora
  10. </label>
  11. </div>

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

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*