Saltar al contenido

¿Qué es un div en HTML y cómo usarlo correctamente con Bootstrap?

diciembre 28, 2017

Un div es un elemento fundamental en la programación HTML puesto que es el encargado de organizar todo el contenido creando capas. Estas capas pueden tener distintas funcionalidades (muchas más si tenemos Bootstrap), pero la mayoría de ellas se basan en encuadrar, ordenar o enmarcar todo el código correctamente para que cada cosa se muestre correctamente donde deba mostrarse.

También nos ayudará mejorar le versión mobile declarando cuales son los elementos que queremos que se muestren, dónde se muestran y dónde no se deben mostrar. Todo esto se puede hacer con un poco de ayuda de lenguajes complementarios como jQuery o CSS, pero nada del otro mundo que os será muy fácil de entender.

Un truco que yo utilizo para organizar mejor mis div o capas es ir sangrando cada vez que añado una de un nivel inferior e ir colocando al mismo nivel los elementos que hay en su interior (excepto si es otra capa que la volvemos a sangrar. Esta técnica es muy utilizada por desarrolladores muy maniáticos con la estructura de su HTML5 y por lo tanto quiere que tenerlo todo lo más organizado por capas posible. En la última versión de este lenguaje, muchas de estas capas que tenían una clase predefinida se han convertido en etiquetas independientes, por ejemplo las que ves a continuación:

¿Cómo utilizar los div en Bootstrap?

A continuación os muestro un listado con las principales etiquetas que puede tener un div con el framework Bootstrap:

  • .container: contenedor de información que se ajusta al ancho de la pantalla.
  • .container-fluid: contenedor que ocupa todo el ancho de pantalla.
  • .jumbotron: contenedor resaltado con mayor tamaño de fuente.
  • .row: crea una nueva fila.
  • .col-xx-y: crea una columna de tamaño xx (xs, sm, md ,lg) con un tamaño de y, donde es un número comprendido entre 1 y 12.
  • .form-group: organiza todos los elementos de u formulario.
  • .hidden: oculta la capa a ojos del usuario