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.
-
<div class=»checkbox»>
-
<input type=»checkbox» id=»cb1″ value=»option1″> Avila
-
</label>
-
<input type=»checkbox» id=»cb2″ value=»option2″> Salamanca
-
</label>
-
<input type=»checkbox» id=»cb3″ value=»option3″> 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.
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 type=»checkbox» id=»cb1″ value=»option1″> Avila
-
</label>
-
<label class=»checkbox-inline»>
-
<input type=»checkbox» id=»cb2″ value=»option2″> Salamanca
-
</label>
-
<label class=»checkbox-inline»>
-
<input type=»checkbox» id=»cb3″ value=»option3″> Zamora
-
</label>
-
</div>
De esta forma hemos visto lo sencillo que es poner una lista de opciones creando checkbox en línea con Bootstrap.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
