diseno-web-mini-05

Container, row y col – diseño web básico 5

Container, row y col: las bases de Bootstrap

episodio 5 - container, row y col

episodio 5 – container, row y col

Antes de avanzar más con la creación de nuestra web, necesitamos entender cómo funciona la rejilla de diseño de Bootstrap, la cual gira en torno a tres elementos: el container (contenedor), los row (filas) y las col (columnas).

El container o contenedor es el recipiente general que nos permite crear una rejilla en su interior para ordenar el contenido de forma flexible y clara. Existen dos tipos de contenedores: container y container-fluid. La diferencia es que el primero tiene un ancho máximo que permite dejar un buen margen a los dos lados. Este espacio vacío es bueno para que el contenido no se pegue a los bordes o para colocar publicidad por ejemplo.

El segundo tipo de contenedor, a diferencia del primero, siempre está pegado a los bordes izquierdo y derecho de la ventana, permitiendo así que el contenido ocupe todo el espacio disponible en la página.

Los row o filas nos permiten separar el contenido dentro de un container de forma horizontal. Los row ocupan toda una fila de espacio y tienen un espacio máximo de 12 columnas dentro de sí. Además, dentro de los row se coloca el elemento col.

Por último, el elemento más complejo y variado: los col o columnas.

Como hemos mencionado, los col se colocan dentro de los row. El nombre de las columnas se compone siempre de tres partes. Por ejemplo: col-8-md.

La primera parte, el “col”, indica simplemente que se trata de una columna, no hay más misterio.

La segunda parte, el “8”, indica la anchura de la columna. Como hemos dicho, cada row tiene un ancho máximo de 12 columnas. Esto significa que podríamos tener 12 col con el número “1” o sólo un col con el número “12”. La cuestión es que la suma de todas las columnas dentro de una fila no puede superar el número 12, ya que de lo contrario la columna o columnas que se hayan pasado, saltarán a la línea o fila de abajo.

La tercera parte, el “md”, indica para qué tipo de pantalla se mostrará la columna. En Bootstrap existen 4 nomenclaturas para diferenciar los tipos de pantalla. Para pantalla muy pequeñas (móviles) se usa “xs” de “extra small”, para pantallas pequeñas (tablets) se usa “sm” de “small”, para pantallas medianas (monitores corrientes) se usa “md” de “medium” y por último, para pantallas grandes (monitores grandes y televisores) se usa “lg” de “large”.

Por lo tanto, en el ejemplo “col-8-md” estaríamos creando una columna de ancho 8 apta para pantallas medianas. En este punto, también hay que mencionar que el tamaño de pantalla aplica a pantallas del mismo tamaño indicado (md) o superior. Es decir, en este caso el “md” indica que esta columna se verá como se pretende en pantallas medianas o grandes. ¿Y qué pasa si usamos una pantalla más pequeña? Entonces se ignora el ancho 8 y la columna se comporta como si fuera de ancho 12 siempre, lo que hará que cada columna ocupe toda la línea. Esto es precisamente la magia de Bootstrap, que hará que si la pantalla es suficientemente grande, el contenido ocupará todo el container horizontalmente, pero si la pantalla no es suficientemente ancha, entonces el contenido se ordenará de forma vertical (una columna encima de otra y así sucesivamente).

¿Te ha gustado? ¡Colabora en Patreon!

2 comentarios

  • Hola java dev one, estoy siguiendo atentamente los episodios de “Diseño Web Básico” y me he encontrado con algunos inconvenientes, creo haber seguido los pasos detalladamente y he comparado mis errores con los de otros participantes he incluso he buscado soluciones en Youtube y Blogs, pero aun así no puedo resolverlos.
    El primero es que no puedo abrir mi localhost en mi navegado Chrome, si pude hacerlo en Explorer al cambiar el puerto. lo cierto es que ya no puedo verlo en ninguno de los dos por eso estoy usando la opción que te da NetBeans para verlo.

    Por otra parte estoy trabado en el capitulo 4 (barra de navegación) donde no me queda como la tuya, sino que me queda un botón que dice “Este botón abre la barra de navegación” a un lado el nombre de mi pagina y por debajo “Entradas”.

    No se si tendrá algo que ver pero he notado que dentro de la carpeta Boostrap (bootstrap-4.0.0-alpha.6-dist) se guardaron las carpetas css y js no así la de fonts. Y no he podido lograr que aparezca.

    Quisiera poder resolver esto antes de continuar porque no me gusta dejar cosas por el camino.
    Agradezco tu tiempo y estos tutoriales, que son muy educativos y están a mi parecer bien explicados. si puedo lograr aprender esto ya tengo decidido seguirlos todos.

    Saluda atte. Christian Gomez desde Argentina.

    • En primer lugar, es importante que tengas en cuenta que la web de la serie la estamos haciendo con Bootstrap 3. Por lo que veo, tú te has descargado la vesión alpha de Bootstrap 4. No lo tengo muy estudiado, pero es posible que haya diferencias importantes entre la versión 3 y la 4. También al ser alpha, es posible que todavía tenga fallos e imperfecciones. Mi consejo es que borres Bootsrap 4 y lo sustituyas por el 3 (simplemente borra el bootstrap que tengas y cambia la carpeta por la del 3, incluye todos los CSS y fonts cuidadosamente).

      En cuanto al problema del localhost, no se me ocurre qué puede pasar, se supone que funciona en todos los navegadores (puede que sea como tú dices un problema de XAMPP, puedes desinstalar e instalar otra versión o la misma, sólo procura guardar tu proyecto localizado en htdocs y luego colócalo de nuevo en la carpeta htdocs de la nueva instalación de XAMPP.)

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *