1 - ¿Qué es Bootstrap?
Bootstrap es un framework de CSS que nos facilita y estandariza el desarrollo de sitios web.
Esta pensando para que se adapte tanto a las pantallas de equipos de escritorio como a
móviles y tablets.
Bootstrap es desarrollado y mantenido por la empresa Twitter y la ha liberado como un
producto Open Source.
Tiene una filosofía muy intuitiva para el maquetado de sitios web que puede ser rápidamente
aprendida por desarrolladores que no vienen del mundo del diseño web.
La versión estable actual es la 5.x
El corazón de este framework es un archivo CSS que lo podemos descargar del
sitio [Link]
Luego debemos enlazar a nuestra página con el archivo [Link] y ya podemos utilizar
esta librería.
La primera clase que podemos probar es class="container" (esta muestra todo el contenido del
div centrado), además el framework ya define estilos por defecto para una gran cantidad de
elementos HTML de la página, por ejemplo define la tipografía de tipo Helvética.
El código mínimo de nuestra página es:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/[Link]" rel="stylesheet">
</head>
<body>
<div class="container" style="background-color:#ccc">
<h1>Titulo</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</body>
</html>
2 - Emplear un CDN para cargar Bootstrap 5
En el concepto anterior vimos que para trabajar con el framework Bootstrap 5 debemos
descargarlo del sitio [Link]
Hay una segunda forma de trabajar con Bootstrap sin tener que descargar el framework y
consiste en utilizar un servidor donde se alojan todos los archivos de Bootstrap.
Si vamos a utilizar un CDN (Content Delivery Network - red de entrega de contenidos) luego
nuestro esqueleto de página html tendrá una estructura similar a esta:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no
">
<!-- Bootstrap CSS -->
<link href="[Link]
rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx
4Um1vskeMj0" crossorigin="anonymous">
<title>Hola Mundo</title>
</head>
<body>
<div class="container" style="background-color:#ccc">
<h1>Hola Mundo!</h1>
</div>
<!-- Si utilizamos componentes de Bootstrap que requieran Javascript agregar el sigu
iente archivo -->
<script src="[Link]
[Link]" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+
8" crossorigin="anonymous"></script>
</body>
</html>
En lugar de cargar el archivo "[Link]" de nuestro servidor, lo hacemos del servidor
"[Link]
<link href="[Link] rel="st
ylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" cr
ossorigin="anonymous">
Las ventajas de utilizar esta forma de cargar el framework Bootstrap 5 es:
• Reduce la carga de nuestros servidores (importante si utilizamos un hosting compartido
con recursos limitado)
• Facilita que Bootstap 5 quede en caché del navegador y se vuelva a cargar cada vez que
se visita una web que lo utilice.
• Reduce la latencia.
• Reducción de costos de nuestros servidores por requerir menor ancho de banda y
tráfico.
Como desventaja podríamos decir:
• Esta la posibilidad que el servidor donde se aloja Bootstrap 5 se caiga, si bien es mucho
más probable que nuestro servidor tenga problemas sobre todo si es un hosting
compartido.
• No podemos probar en forma local nuestro sitio web si no se encuentra conectado a
internet.
Más adelante veremos componentes de Bootstrap 5 que si las utilizamos debemos importar un
archivo Javascript. Este archivo pueden estar en nuestro servidor o inclusive como hemos visto
en este concepto estar almacenados en CDN.
El archivo Javascript requerido es:
1. [Link]
3 - Sistema de grillas de Bootstrap 5
Lo más importante de entender en un principio es el sistema de grillas que plantea la librería
Bootstrap.
Debemos pensar para armar nuestro esquema de la página que tenemos la posibilidad de
definir filas y en cada fila definir de 1 hasta 12 columnas. Cada columna con un ancho relativo a
ese número 12.
Luego Bootstrap se encarga de colapsar las columnas cuando se accede al sitio desde un
dispositivo con una capacidad limitada en cuanto al ancho en píxeles (esto permite una
experiencia más placentera al visitante que accede a nuestra página desde un celular con
capacidades limitadas)
Para ver y entender como creamos las columnas en cada fila y como colapsan según el ancho
del dispositivo podemos analizar el siguiente código:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xxl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xxl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xxl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-md-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-md-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-sm-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-sm-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
</div>
</body>
</html>
Si abrimos esta página en un monitor con un ancho superior a 1400 px podemos ver que se
muestran tres columnas por fila:
Debemos utilizar la clase "row" para indicar el comienzo de una fila. Dentro de la fila
dispondremos tantos div como columnas tenga dicha fila. Para indicar cada columna debemos
utilizar la siguiente sintaxis para cada columna:
col-xxl-*
Donde aparece el asterisco lo remplazamos por un valor entre 1 y 12 (en nuestro ejemplo
hemos dispuesto un 4, esto quiere decir que quedan 8 unidades de columna para repartir entre
las otras columnas)
En nuestro ejemplo cada una de las columnas tiene un valor 4 (siempre la suma de dichos
valores de una fila debe sumar 12 o quedarán columnas vacías en dicho caso)
Como asignamos cuatro a cada columna las tres columnas tienen el mismo ancho:
<div class="row">
<div class="col-xxl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xxl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xxl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
Probemos ahora de empezar a disminuir el ancho del navegador mediante el mouse achicamos
la ventana y veremos que cuando el ancho del navegador es menor a 1400 px colapsan las
columnas de la primer fila y se muestran una debajo de otra (esto sucede en cualquier
dispositivo cuyo ancho en píxeles es menor a 1400):
Pero ahora nos preguntamos porque la segunda fila que hemos definido no colapsa cuando el
ancho del navegador baja de 1400px, esto es debido que hemos definido cada columna con la
siguiente sintaxis:
<div class="row">
<div class="col-xl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
col-xl-4
Cuando utilizamos las clases "col-xl-*" luego la fila colapsará cuando el ancho del navegador se
reduzca a menos de 1200px, podemos probarlo fácilmente reduciendo más el ancho del
navegador y ver que ahora colapsan tanto la primera fila como la segunda fila:
Lo mismo sucederá cuando utilicemos "col-lg-*" y reduzcamos los 992px:
La cuarta fila utilizamos "col-md-*" y colapsa al llegar a un valor menor de 768px.
La quinta fila utilizamos "col-sm-*" y colapsa al llegar a un valor menor de 576px.
Por último hay que decir que cuando utilizamos las clases "col-*" nunca colapsarán las
columnas.
Es bueno analizar de que palabras vienen los nombres de reglas de estilo que provee
Bootstrap:
col-*
col-sm-* (sm)all
col-md-* (m)e(d)ium
col-lg-* (l)ar(g)e
col-xl-* (e)xtra (l)arge
col-xxl-* (e)xtra (e)xtra (l)arge
Ahora depende del tipo de página que uno tiene que implementar el definir en que momento
queremos que nuestra estructura de página colapse sus columnas. Si no queremos que
colapse luego empleamos col-* para definir las distintas columnas.
4 - Múltiples reglas a las columnas de una fila
Si queremos que una página se muestre de forma diferente si la accedemos desde un
dispositivo con pantalla muy muy grande, muy grande, grande, mediana, pequeña o muy
pequeña podemos asignar múltiples reglas a cada columna.
Implementemos una página que muestre los datos en dos columnas y el ancho de las
columnas dependa de la pantalla del dispositivo:
1er columna 2da columna
Pantalla muy,muy grande: 10 unidades 2 unidades
Pantalla muy grande: 9 unidades 3 unidades
Pantalla grande: 8 unidades 4 unidades
Pantalla mediana: 7 unidades 5 unidades
Pantalla chica: 6 unidades 6 unidades
Pantalla muy chica: 5 unidades 7 unidades
Luego el código de la página queda definido:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xxl-10 col-xl-9 col-lg-8 col-md-7 col-sm-6 col-5" style="back
ground-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-5 col-sm-6 col-7" style="backg
round-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
</body>
</html>
Es decir podemos asignar múltiples reglas a un div de una columna, actuará el que
corresponde dependiendo del ancho del dispositivo. Por ejemplo si ejecutamos y comenzamos
a reducir el ancho del navegador podremos ver como se redimensionan los anchos de las
columnas a medida que reducimos el ancho del navegador.
En un dispositivo muy, muy grande >=1400:
En un dispositivo muy grande >=1200:
En un dispositivo grande >=992:
En un dispositivo mediano >=768:
En un dispositivo pequeño >=576:
Y en un dispositivo muy pequeño <=576:
En este caso tengamos en cuenta que nunca colapsan las columnas ya que hemos definido la
regla col-*
La definición de múltiples reglas es una de las herramientas más poderosas de Bootstrap, nos
permite definir distintos diseños de página según las capacidades del dispositivo del visitante a
nuestro sitio web.
5 - Contenedor: clases container y containter-
fluid
Cuando implementamos un contenedor podemos utilizar un:
Ancho fijo centrado (Siempre hemos utilizado este estilo hasta ahora)
Ancho variable que se adapte al ancho del navegador.
Vamos a implementar un página que muestre un contenedor de ancho fijo con una fila de tres
columnas, y otro contenedor pero fluido que muestre el mismo conenido:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
</body>
</html>
Lo único que varía es asignar una clase distinta a cada div:
<div class="container">
Y si se trata de un contenedor fluido luego utilizamos la clase container-fluid:
<div class="container-fluid">
Cuando modificamos el ancho del navegador podemos ver como el primer contenedor tiene un
ancho fijo centrado en la página y el segundo se adapta al ancho del navegador (el colapso de
las columnas se produce en el mismo momento, es decir cuando el ancho es menor a 992px ya
que utilizamos la regla col-lg-*):
6 - Columnas de diseño automático
Vimos en conceptos anteriores que en Bootstrap disponemos de 12 unidades a ser repartidas
en una o más columnas, además de indicar a que tamaño de dispositivo está orientado.
Si todas las columnas tendrán el mismo ancho podemos evitar disponer el valor que indicamos
donde hay un asterisco:
col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*
col-xxl-*
La sintaxis en un ejemplo con filas que tienen 3 columnas con la misma cantidad de unidades:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
</body>
</html>
Si todas las columnas tienen la misma cantidad de filas para cualquier tipo de dispositivo:
<div class="col" style="background-color:#aaa">
En lugar de disponer:
<div class="col-4" style="background-color:#aaa">
Lo mismo para las otras medidas como puede ser para los dispositivos con ancho "lg":
<div class="col-lg" style="background-color:#aaa">
El resultado de cargar esta página en el navegador con más de 992px de ancho es:
Si reducimos el ancho luego colapsa la segunda fila que tiene la clase "col-lg":
Definición con un valor fijo para una columna.
Una variante al concepto anterior es la posibilidad de definir una columna con un ancho en
unidades fijo y la columna de la izquierda o derecha o ambas sin valor:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-6" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
</body>
Con esto se calculan en forma automática los anchos de las columnas 1 y 3:
El espacio que se reparte a izquierda y derecha es el mismo en forma independiente que haya
mucho contenido en alguna de las dos columnas laterales.
Si necesitamos que se repartan los espacios teniendo en cuenta la cantidad de contenido de
una columna podemos utilizar las clases col-auto, col-sm-auto, col-md-auto, col-lg-auto, col-xl-
auto y col-xxl-auto.
Si tenemos la página:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-auto" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-6" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-auto" style="background-color:#ccc">
<p>Poco contenido.</p>
</div>
</div>
</div>
</body>
Podemos comprobar que en el navegador que la columna primera obtiene más espacio que la
tercer columna, ya que tiene más contenido:
7 - Alineamiento vertical de las columnas
Bootstrap 5 trae la posibilidad de alinear las columnas en forma vertical. Esta facilitad esta
presente ya que Bootstrap 5 utiliza todos las reglas de estilo que provee Flexbox CSS.
Si esta interesado en profundizar Flexbox puede visitar el tutorial a partir del concepto 60
en CSS Ya.
El empleo de la tecnología propuesta por Flexbox en Bootstrap 5 trae aparejado grandes
ventajas, entre otras el alineamiento de columnas. Como desventaja podemos nombrar que
Bootstrap 5 no funciona en navegadores antiguos.
Alineación de la fila completa.
Debemos agregar la clase "align-items-start" al div que define la clase "row":
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row align-items-start" style="height: 300px; background-color:#dd0">
<div class="col" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
El resultado en el navegador es:
Hemos definido el div que contiene la clase "row" un alto de 300px de color amarillo. Luego
hemos agregado la clase align-items-start al mismo div.
Probemos ahora de cambiar por el valor "align-items-center" que da como resultado:
Finalmente podemos fijar con el valor "align-items-end" dando como resultado:
Alineación de columnas individuales.
Podemos alinear solo una columna fijando alguna de estas clases: "align-self-start", "align-self-
center" o "align-self-end" a un div que representa la columna.
Por ejemplo la siguiente página hace una alineación distinta para cada columna:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row" style="height: 300px; background-color:#dd0">
<div class="col align-self-start" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col align-self-center" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col align-self-end" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
En el navegador tenemos como resultado:
8 - Alineamiento horizontal de las columnas
Esta posibilidad de alinear las columnas se puede presentar si no utilizamos las 12 unidades a
distribuir.
Si la suma de unidades es igual a 12 luego no podemos alinear horizontalmente las columnas
ya que se encuentra toda la fila ocupada.
Con un ejemplo sencillo veamos cuales son las clases que ofrece Bootstrap 5 para permitir
alinear las columnas:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-end" style="background-color:#dd0">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-3" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-start" style="background-color:#dd0">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-3" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-center" style="background-color:#dd0">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-3" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-between" style="background-color:#dd0">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-3" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-around" style="background-color:#dd0">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-3" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
</div>
</body>
</html>
En el navegador obtenemos como resultado:
Las 5 formas de alineación se logran mediante las clases:
• justify-content-end
• justify-content-start
• justify-content-center
• justify-content-between
• justify-content-around
9 - Varias líneas en una misma fila "row"
Con Bootstrap 5 tenemos la posibilidad de que en una fila definida por la clase "row"
especifique varias columnas y mediante la clase "w-100" permitir hacer un salto de línea.
Con un ejemplo debe quedar claro como podemos definir varias líneas en una misma fila:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="background-color:#aaa">
<h1>Columna 1 <br> Linea 1</h1>
</div>
<div class="col-6" style="background-color:#bbb">
<h1>Columna 2 <br> Linea 1</h1>
</div>
<div class="w-100"></div>
<div class="col-6" style="background-color:#aaa">
<h1>Columna 1 <br>Linea 2</h1>
</div>
<div class="col-6" style="background-color:#bbb">
<h1>Columna 2 <br>Linea 2</h1>
</div>
</div>
</div>
</body>
</html>
Podemos comprobar que luego que se aplica la clase "w-100" a un div vacío el siguiente div
aparece en una nueva línea.
10 - Reordenar las columnas en una fila
Por defecto el orden que indicamos los div de las columnas en el archivo HTML es como
aparecen luego en el navegador.
Si por algún motivo queremos que ese flujo del archivo HTML no se tenga en cuenta tenemos
una serie de clases que le asignan a las columnas el orden de visualización.
Veamos con un ejemplo como mostramos las columnas en el orden inverso a como las
especificamos en el archivo HTML:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col order-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col order-2" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col order-1" style="background-color:#aaa">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Podemos ver luego en el navegador que la columna 3 aparece primero:
El reordenamiento se puede aplicar para los distintos tamaños de pantalla, luego tenemos las
siguientes clases:
order-*
order-sm-*
order-md-*
order-lg-*
order-xl-*
order-xxl-*
Recuerde que el asterisco representa un valor entre 1 y 12.
11 - Anidamiento de columnas
Otro tema perfectamente resuelto por Bootstrap 5 es el anidamiento de columnas.
Problema
Implementar una página que muestre dos columnas y dentro de la segunda columna otras dos
columnas internas.
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="[Link] r
el="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4
Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-6" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 5.</p>
<div class="row">
<div class="col-lg-6" style="background-color:#ccc">
<h2>Columna 2a</h2>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
<div class="col-lg-6" style="background-color:#ddd">
<h2>Columna 2b</h2>
<p>Esto es una prueba de bootstrap 5.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Lo importante es analizar la segunda columna donde vemos que insertamos además de un
título y un párrafo tenemos una nueva fila (row) y dos nuevos div que debemos repartir las doce
columnas:
<div class="col-lg-6" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap 4.</p>
<div class="row">
<div class="col-lg-6" style="background-color:#ccc">
<h2>Columna 2a</h2>
<p>Esto es una prueba de bootstrap 4.</p>
</div>
<div class="col-lg-6" style="background-color:#ddd">
<h2>Columna 2b</h2>
<p>Esto es una prueba de bootstrap 4.</p>
</div>
</div>
</div>
Podemos observar que la segunda columna contiene a su vez otras dos columnas:
También podemos ver que si reducimos el ancho del navegador colapsan todas las columnas
(externas e internas):
Podemos anidar más niveles sin problemas.