Bootstrap 5 Ya

INDICE
1 - ¿Qué es Bootstrap? .................................................................................................. 3

2 - Emplear un CDN para cargar Bootstrap 5 ...................................................... 4
3 - Sistema de grillas de Bootstrap 5 ..................................................................... 5
4 - Múltiples reglas a las columnas de una fila.................................................. 9
5 - Contenedor: clases container y containter-fluid ...................................... 11
6 - Columnas de diseño automático...................................................................... 13
Definición con un valor fijo para una columna. ........................................... 15
7 - Alineamiento vertical de las columnas ......................................................... 17
Alineación de columnas individuales. .............................................................. 19
8 - Alineamiento horizontal de las columnas .................................................... 19
9 - Varias líneas en una misma fila "row" .......................................................... 21
10 - Reordenar las columnas en una fila ............................................................ 22
11 - Anidamiento de columnas ................................................................................ 23
12 - Offset (desplazamiento) de columnas ........................................................ 25
13 - table: básica ........................................................................................................... 26
1 - table: básica con color oscuro...................................................................... 28
2 - table: con filas con colores alternados ..................................................... 29
3 - table: con borde en cada celda. ................................................................... 30
4 - table: iluminar la fila donde se encuentra el mouse (hover) ........... 32
5 - table: tabla condensada................................................................................... 33
6 - table: definición de un estilo a la cabecera de la tabla .................... 35
7 - table: clases contextuales aplicadas a filas y celdas ....................... 37
8 - table: adaptable o responsive ....................................................................... 39
14 – Form: controles input (text y password) ................................................... 41
1 - form: control input (file) ................................................................................... 43
2 - form: control textarea ....................................................................................... 44
3 - form: controles checkbox y radio ................................................................ 45
4 - form: control select............................................................................................ 50
5 - form: formulario horizontal ............................................................................. 51
6 - form: etiquetas flotantes ................................................................................. 54
7 - form: diseños complejos empleando las grillas .................................... 57
8 - form: texto de ayuda de un control ............................................................. 59
9 - form: tamaño de los controles de formulario ......................................... 60
10 - form: control y grupo de controles HTML deshabilitados .............. 62
11 - form: control range .......................................................................................... 63
12 - form: clase input-group .................................................................................. 64
15 - button: estilos ........................................................................................................ 66
1 - button: tamaño ..................................................................................................... 69
2 - button: desactivo ................................................................................................ 69
3- button: grupo de botones, barra de herramientas, tamaños y
orientación ................................................................................................................... 70
4 - button: ubicación mediante grid y flex (css) .......................................... 74
16 - Tipografía ................................................................................................................. 75
1 - Tipografía: listas.................................................................................................. 81
2 - Tipografía: citas de bloque ............................................................................. 84
3 - Tipografía: abreviaturas e iniciales ............................................................ 86
4 - Tipografía: Código y bloques de código .................................................... 87
5 - Tipografía: Clases para el alineado, justificado, transformación
de texto etc. ................................................................................................................ 88
17 - Imágenes .................................................................................................................. 89
18 - Componente: card (básica) .............................................................................. 91
1 - Componente: card (con colores contextuales para fondo, borde y
texto)............................................................................................................................... 93
2 - Componente: card (con imágenes) ............................................................. 97
3 - Componente: card (con cabecera y/o pie de tarjeta) ....................... 100
4 - Componente: card (pestañas) ..................................................................... 102
5 - Componente: card (grupo de tarjetas)..................................................... 104
6 - Componente: card (dando dimensión con la grilla y otras clases)
......................................................................................................................................... 105
19 - Componente: alert.............................................................................................. 107
20 - Componente: modal (cuadro de diálogo modal básico) .................... 112
1 - Componente: modal (tamaño y centrado del diálogo)...................... 115
2 - Componente: modal (grillas dentro de diálogos) ................................ 117
21 - Componente: navbar (barra de navegación simple) ........................... 120
1 - Componente: navbar (contraer menú de navegación y mostrar
botón de hamburguesa) ........................................................................................ 122
22 - Componente: carousel ..................................................................................... 124
23 - Componente: pagination ................................................................................. 126
24 - Componente: progress ..................................................................................... 131
25 - Componente: dropdown (lista desplegable) ........................................... 134
26 - Componente: collapse...................................................................................... 143
27 - Componente: accordion .................................................................................. 146
28 - Componente: breadcrumb .............................................................................. 149
29 - Componente: badge........................................................................................... 151
30 - Componente: nav (básica) .............................................................................. 152
1 - Componente: nav (vista de pestañas o pastillas)............................... 156
2 - Componente: nav (con elementos de tipo dropdown) ...................... 157
3 - Componente: nav (con contenido para cada opción) ....................... 159
31 - Componente: Scrollspy .................................................................................... 164
32 - Componente: Tooltips ...................................................................................... 168
33 - Componente: Popover ...................................................................................... 170
34 - Componente: Offcanvas .................................................................................. 172
35 - Componente: Spinner ....................................................................................... 174
1 - ¿Qué es Bootstrap?
Bootstrap es un framework de CSS que nos facilita y estandariza
el desarrollo de sitios web.
Está 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 http://getbootstrap.com.
Luego debemos enlazar a nuestra página con el archivo boottrap.min.css 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/bootstrap.min.css" 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 http://getbootstrap.com.
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>
shrink-to-fit=no">

<link href="../css/bootstrap.min.css" rel="stylesheet">
<title>Hola Mundo</title>
</head>
<body>
<div class="container" style="background-color:#ccc">
<h1>Hola Mundo!</h1>
</div>

<script src="../js/bootstrap.bundle.min.js"></script>
</body>
</html>
En lugar de cargar el archivo "bootstrap.min.css" de nuestro servidor, lo

hacemos del servidor "https://cdn.jsdelivr.net":
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="styleshee

t" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="ano
nymous">
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. bootstrap.bundle.min.js
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>
shrink-to-fit=no">
</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>
</div>
<div class="col-xxl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-xl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-xl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-xl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-md-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-md-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-sm-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-sm-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</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:
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>
</div>
<div class="col-xxl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-xxl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</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 primera 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>
</div>
<div class="col-xl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-xl-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</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>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<div class="col-xxl-10 col-xl-9 col-lg-8 col-md-7 col-sm-6 col-
5" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-5 col-sm-6 col-
7" style="background-color:#bbb">
<h1>Columna 2</h1>
</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 una página que muestre un contenedor de ancho fijo
con una fila de tres columnas, y otro contenedor pero fluido que muestre el
mismo contenido:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
<h1>Columna 3</h1>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Lo único que varía es asignar una clase distinta a cada div:
Y si se trata de un contenedor fluido luego utilizamos la clase 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>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<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>
<hr>
<div class="row">
<div class="col-lg" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-lg" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-lg" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Si todas las columnas tienen la misma cantidad de filas para cualquier tipo de
dispositivo:
En lugar de disponer:

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>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
<h1>Columna 3</h1>
</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>
shrink-to-fit=no">
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-auto" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</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 tercera 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 está presente ya que Bootstrap 5 utiliza todos las reglas de estilo
que provee Flexbox CSS.
Si está 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>
shrink-to-fit=no">
<link href="../css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="row align-items-start" style="height: 300px; background-

color:#dd0">
<h1>Columna 1</h1>
</div>
<div class="col" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<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>
shrink-to-fit=no">
</head>
<body>
<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>
shrink-to-fit=no">
</head>
<body>
<div class="row justify-content-end" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-start" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-center" style="background-
color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-between" style="background-
color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-around" style="background-
color:#dd0">
<h1>Columna 1</h1>
</div>
<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 cómo podemos definir varias líneas en una
misma fila:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<h1>Columna 1 <br> Linea 1</h1>
</div>
<h1>Columna 2 <br> Linea 1</h1>
</div>
<div class="w-100"></div>
<h1>Columna 1 <br>Linea 2</h1>
</div>
<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
ha como las especificamos en el archivo HTML:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<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>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
<div class="row">
<h2>Columna 2a</h2>
</div>
<div class="col-lg-6" style="background-color:#ddd">
<h2>Columna 2b</h2>
</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:
<h1>Columna 2</h1>
<div class="row">
<h2>Columna 2a</h2>
</div>
<div class="col-lg-6" style="background-color:#ddd">
<h2>Columna 2b</h2>
</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.
12 - Offset (desplazamiento) de columnas
Podemos dejar columnas vacías indicando un desplazamiento en el

momento de crearla.
Problema
Implementar el código con Bootstrap 5 necesario para mostrar los números
"uno", "dos" etc. con el siguiente formato dentro de la página:
No es necesario crear tres filas y tres columnas por fila para resolver este
problema (si bien es posible), lo que debemos hacer es crear una fila y
disponer dos columnas, la segunda con un desplazamiento de cuatro. La
segunda fila tendrá una sola columna pero con desplazamiento de cuatro y la
tercera fila es similar a la primera:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<h1>Uno</h1>
</div>
<div class="col-lg-4 offset-lg-4" style="background-color:#bbb">
<h1>Dos</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 offset-lg-4" style="background-color:#aaa">
<h1>Tres</h1>
</div>
</div>
<div class="row">
<h1>Cuatro</h1>
</div>
<div class="col-lg-4 offset-lg-4" style="background-color:#bbb">
<h1>Cinco</h1>
</div>
</div>
</div>
</body>
</html>
Tener en cuenta que disponemos las siguientes clases para implementar el

desplazamiento (offset):
offset-*
offset-sm-*
offset-md-*
offset-lg-*
offset-xxl-*
Recordar que el asterisco representa un valor entre 1 y 12.

Si bien este problema se lo puede resolver utilizando el alineamiento
horizontal de las columnas en algunos casos complejos el concepto de offset
nos puede ayudar.
13 - table: básica
El elemento table de HTML nos permite mostrar datos en forma

tabular. Cuando incluimos el framework Bootstrap 5 se introducen una serie
de reglas a los elementos relacionados a la etiqueta "table".
Una tabla básica la logramos insertando la clase "table":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elemento 1,1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Como podemos ver solo con agregar la clase "table":
Tenemos como resultado una disposición de los elementos con el siguiente

formato:
Si sacamos la clase "table" el resultado en el navegador es:

Es decir que las reglas que define Bootstrap 5 permiten mostrar las filas
separadas por una línea horizontal, los textos de la cabecera en negrita y la
tabla se expande a todo su contenedor.
1 - table: básica con color oscuro

Una primer variante que podemos aplicar a una tabla HTML
empleando Bootstrap 5 es definir un color oscuro a la misma agregando la
clase "table-dark".
Ahora nuestro ejemplo del punto anterior queda:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Como podemos ver solo disponemos las clases "table" y "table-dark" a la
etiqueta HTML "table":
<table class="table table-dark">
Tenemos como resultado en el navegador:

2 - table: con filas con colores alternados
Una actividad común es mostrar una tabla HTML con colores que se van
alternando para facilitar la lectura de sus datos, sobre todo cuando tenemos
tablas con muchas columnas y filas.
Esta actividad se logra muy fácilmente con Bootstrap 5, solo debemos
agregar la clase table-striped a la marca table de nuestra página:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Ahora como resultado tenemos en el navegador la tabla con colores distintos
para las filas contiguas:
Podemos agregar la clase "table-dark" y tener el siguiente resultado:
3 - table: con borde en cada celda.

Por defecto una tabla en Bootstrap 5 solo las filas tienen una línea
separadora, si queremos que todas las celdas aparezcan recuadradas
debemos añadir la clase "table-bordered".
Un ejemplo para mostrar una tabla con bordes en todas las celdas:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
El resultado en pantalla luego será:
Esto lo logramos solo con agregar la clase "table-bordered":
<table class="table table-bordered">
Si además agregamos la clase "table-dark" el resultado visual es:

4 - table: iluminar la fila donde se encuentra el mouse (hover)
Si queremos que se muestre la fila donde se encuentra el mouse con
un color distinto debemos agregar la clase "table-hover".
Un ejemplo para probar esta clase:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
<link href=../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
5 - table: tabla condensada
Si tenemos que mostrar grandes tablas con datos puede ser necesario
mostrar más información al mismo tiempo por pantalla condensando los datos
(son los mismos datos pero más comprimidos en pantalla)
Esto se logra agregando la clase "table-sm" a la marca HTML "table".
Veamos un ejemplo con una tabla común y una tabla condensada:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<table class="table table-sm">

<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
A la tabla que queremos condensar debemos agregarle la clase "table-sm":
<table class="table table-sm">
Podemos ver la diferencia entre una tabla por defecto y una condensada:
6 - table: definición de un estilo a la cabecera de la tabla
Disponemos las clases "table-light" y "table-dark" para aplicar a la
etiqueta "thead" de una tabla.
Un ejemplo de empleo de estas clases:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<thead class="table-light">
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<thead class="table-dark">
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
En la primera tabla aplicamos la clase "table-light" a la etiqueta "thead":
<thead class="table-light">
En la segunda tabla aplicamos la clase "table-dark" a la etiqueta "thead":
<thead class="table-dark">
Podemos ver las diferencias que tienen en la cabecera cada tabla:

7 - table: clases contextuales aplicadas a filas y celdas
Bootstrap dispone de 9 clases que a través de colores intentan transmitir
un estado, por ejemplo peligro, cuidado, éxito etc.
Podemos aplicar estas clases contextuales a los colores de fondo de una fila
o celda de una tabla.
Las 9 clases son:
 table-danger (Representa una acción peligrosa)
 table-warning (Representa una advertencia)
 table-info (Representa una información)
 table-success (Representa algo exitoso)
 table-primary (Representa algo importante)
 table-secondary (Representa algo no tan importante)
 table-dark
 table-light
 table-active
Veamos una tabla asignando estas clases a filas y celdas de una tabla:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<td>Elemento 1,1<br> (table-danger)</td>
</tr>
<tr class="table-warning">
<td>Elemento 2,1<br> (table-warning)</td>
</tr>
<tr class="table-info">
<td>Elemento 3,1 <br> (table-info)</td>
</tr>
<tr class="table-success">
<td>Elemento 4,1<br>(table-success)</td>
</tr>
<tr class="table-primary">
<td>Elemento 5,1<br>(table-primary)</td>
</tr>
<tr class="table-secondary">
<td>Elemento 6,1<br>(table-secondary)</td>
</tr>
<tr class="table-dark">
<td>Elemento 7,1<br>(table-dark)</td>
</tr>
<tr class="table-light">
<td>Elemento 8,1<br>(table-light)</td>
</tr>
<tr class="table-active">
<td>Elemento 9,1<br>(table-active)</td>
</tr>
<tr>
<td class="table-danger">Elemento 10,1</td>
<td class="table-warning">Elemento 10,2</td>
<td class="table-info">Elemento 10,3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Luego tenemos como resultado colores distintos en cada fila y la última fila
las celdas con distintos colores:
8 - table: adaptable o responsive
Cuando tenemos tablas con muchas columnas y dependiendo del tamaño
del dispositivo podemos hacer que aparezca una barro de desplazamiento en
la parte inferior de la tabla.
Esta característica la resuelve Bootstrap 5 mediante las clases:
table-responsive
table-responsive-sm
table-responsive-md
table-responsive-lg
table-responsive-xl
table-responsive-xxl
Debemos encerrar en una etiqueta div la tabla y aplicar alguna de las clases
especificadas anteriormente.
Con un ejemplo probemos esta funcionalidad:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="table-responsive">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
<th>Titulo 4</th>
<th>Titulo 5</th>
<th>Titulo 6</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Si reducimos el ancho del dispositivo cuando los datos de la tabla no entran

podemos verificar que aparece una barra de desplazamiento horizontal en la
parte inferior de la tabla:
14 –
Form: controles input (text y password)
Bootstrap 5 requiere una serie de clases para la implementación de

un formulario.
Veamos la etiqueta input como es afectada por Bootstrap. Lo más común es
encerrar el control input y label con un div .
Bootstrap utiliza el elemento HTML "button" para implementar los botones de
envío de datos al servidor con la siguiente sintaxis:
<button type="submit" class="btn btn-primary">Enviar</button>
Implementemos un formulario de login utilizando Bootstrap 5:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3">
<label for="nombre" class="form-label">Ingrese su nombre:</label>
<input type="text" class="form-control" id="nombre"
name="nombre">
</div>
<div class="mb-3">
<label for="clave" class="form-label">Ingrese su clave:</label>
<input type="password" class="form-control" id="clave"
name="clave">
</div>
<button type="submit" class="btn btn-primary">Confirmar</button>
</form>
</div>
</body>
</html>
Como podemos ver los dos controles input ocupan el 100% del contenedor
(recordemos que están pensado primero que se vean bien en un dispositivo
móvil, luego podemos disponerlos en una columna de una fila y darle distintos
tamaños según el ancho del dispositivo):
Definimos la clase 'form-label' para las etiquetas 'label':
Definimos la clase 'form-control' para las etiquetas 'inpup':
<input type="text" class="form-control" id="nombre" name="nombre">
La clase 'mb-3' define el margen inferior con un cierto espacio (con el objeto
que los controles del formulario no salgan pegados por la parte inferior)
Para definir el margen inferior disponemos de las clases:
me-auto
me-1
me-2
me-3
me-4
me-5
Tenemos para definir el valor del margen izquierdo:

ms-auto
ms-1
ms-2
ms-3
ms-4
ms-5
Tenemos para definir el valor del margen derecho:
me-auto
me-1
me-2
me-3
me-4
me-5
Y por último para el margen superior:
mt-auto
mt-1
mt-2
mt-3
mt-4
mt-5
Para recordar tener en cuenta:
(m)argin (s)tart
(m)argin (e)nd
(m)argin (s)tart
(m)argin (b)ottom
1 - form: control input (file)
Veamos la sintaxis que requiere si creamos un formulario con controles

HTML de tipo file.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3">
<label for="archivo1" class="form-label">Control File por
defecto</label>
<input class="form-control" type="file" id="archivo1">
</div>
<div class="mb-3">
<label for="archivo2" class="form-label">Selección de múltiples
archivos</label>
<input class="form-control" type="file" id="archivo2" multiple>
</div>
<div class="mb-3">
<label for="archivo3" class="form-label">Control File
deshabilitado</label>
<input class="form-control" type="file" id="archivo3" disabled>
</div>
</form>
</div>
</body>
</html>
El resultado visual de cada uno de los controles de formulario File es el

siguiente:
Para permitir la selección de múltiples archivos recordemos que hay que

definir la propiedad 'multiple':
<input class="form-control" type="file" id="archivo2" multiple>
Y si queremos que aparezca deshabilitado el control definimos la propiedad

desabled:
<input class="form-control" type="file" id="archivo3" disabled>
2 - form: control textarea

El control textarea es utilizado cuando tenemos que introducir varias
líneas de texto y cuando utilizamos Bootstrap 5 tenemos que agregar la clase
form-control, igual que los otros controles de formulario.
Podemos inicializar la propiedad rows del control HTML textarea indicando
cuantas filas deben ser visibles.
Veamos un ejemplo utilizando este control HTML asociado con Bootstrap 5:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3">
<label for="comentarios" class="form-label">Deje aquí sus
comentarios</label>
<textarea class="form-control" rows="5" id="comentarios"
name="comentarios"></textarea>
</div>
</form>
</div>
</body>
</html>
Luego en pantalla aparece de la siguiente forma cuando está seleccionado:
No tiene efecto si inicializamos la propiedad cols en la marca textarea.

Veremos luego como resolver esta situación mediante grillas.
3 - form: controles checkbox y radio

Veamos como trabajamos con otros dos controles muy usados en los
formularios web como son los controles checkbox y radio.
Podemos hacer que los controles aparezcan uno debajo del otro o uno al lado
del otro.
Para que aparezca uno debajo de otro tenemos la siguiente sintaxis:
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="checkbox1" name="checkbox1">
<label class="form-check-label" for="checkbox1">
Opcion 1
</label>
</div>
Debemos envolver en un div con la clase "form-check" y dentro definir el

control "input" con la clase "form-check-input".
La etiqueta label que hace referencia al checkbox o radio debe iniciarse con
la clase "form-check-label".
Si queremos que los checkbox o radio se muestren uno al lado de otro
debemos agregar la clase "form-check-inline" al div contenedor:
<div class="form-check form-check-inline">
Opcion 1
</label>
</div>
Problema
Confeccionar un formulario que muestre tres checkbox un debajo del otro,
tres radio también uno debajo del otro, seguidamente tres checkbox uno al
lado del otro (en la misma fila) y por último tres radio uno al lado del otro.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>En distintas filas</h1>
<form>
Opcion 1
</label>
</div>
Opcion 2
</label>
</div>
Opcion 3
</label>
</div>
<input class="form-check-input" type="radio" value=""
id="radio1" name="grupo1">
<label class="form-check-label" for="radio1">
Opcion 1
</label>
</div>
Opcion 2
</label>
</div>
Opcion 3
</label>
</div>
</form>
<h1>En la misma fila</h1>

<form>
Opcion 1
</label>
</div>
Opcion 2
</label>
</div>
Opcion 3
</label>
</div>
<br>
Opcion 1
</label>
</div>
Opcion 2
</label>
</div>
Opcion 3
</label>
</div>
<br>
</form>
</div>
</div>
</body>
</html>
Interruptores
Con Bootstrap 5 podemos utilizar los controles HTML checkbox con una
imagen de interruptor. Debemos agregar la clase 'form-switch' al div que lo
envuelve.
Veamos con un ejemplo los interruptores:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="form-check form-switch">
Opcion 1
</label>
</div>
Opcion 2
</label>
</div>
Opcion 3
</label>
</div>
</form>
</div>
</body>
</html>
4 - form: control select
Para aplicar Bootstrap 5 a un control select solo debemos fijar la clase
"form-select" al select respectivo.
Veamos un ejemplo donde inicializamos dos controles select (uno de
selección unitario de elemento y otro control select que permita la selección
simultánea de varios elementos):
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<label for="control1">Seleccione un elemento</label>
<select class="form-select mb-3" id="control1" name="control1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="control2">Seleccione varios elementos</label>

<select multiple class="form-select mb-3" id="control2"
name="control2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div>
</body>
</html>
En el navegador podemos comprobar como se muestra cada uno de estos
tipos de control select:
También podemos agregar alguna de las siguientes clases para modificar la
dimensión del control select:
form-select-lg
form-select-sm
Es decir para un select small tenemos:

<select class="form-select form-select-sm mb-3" id="control1"
name="control1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
5 - form: formulario horizontal

Otra variante de formulario que nos permite Bootstrap 5 son los
formularios horizontales. En este estilo de formularios se dispone la
descripción del dato a ingresar en el lado izquierdo y el control del formulario
a derecha.
Para resolver este tipo de problemas debemos utilizar el sistema de grillas de
Bootstrap.
Problema
Construir un formulario de login que muestre a la izquierda "Nombre de
usuario:" y a la derecha el control donde se ingresa el nombre. Hacer lo mismo
para el campo de ingreso de la clave, mostrar "Ingrese clave" y del lado de la
derecha el control HTML password. Mostrar finalmente un botón a la altura
de los controles de entrada de datos. La interfaz debe ser similar a esta:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3 row">
<label for="usuario" class="col-sm-3 col-form-label">Nombre de
usuario:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="usuario">
</div>
</div>
<label for="clave" class="col-sm-3 col-form-label">Ingrese
clave:</label>
<input type="password" class="form-control" id="clave">
</div>
</div>
<div class="offset-sm-3 col-sm-9">
<button type="submit" class="btn btn-
primary">Confirmar</button>
</div>
</div>
</form>
</div>
</body>
</html>
Definimos una fila "row" para cada label y control input:

<label for="usuario" class="col-sm-3 col-form-label">Nombre de
usuario:</label>
<input type="text" class="form-control" id="usuario">
</div>
</div>
Dendro del div disponemos un "label" y especificamos cuando espacio del

sistema de grillas utilizará: "col-sm-3", además de la clase "col-form-label" (Es
importante agregar la clase "col-form-label" para el correcto alineamiento
vertical de la "label").
Luego en un div disponemos el espacio requerido para el control de formulario
propiamente dicho: "col-sm-9".
En forma similar implementamos la fila donde se pide la clave:
<label for="clave" class="col-sm-3 col-form-label">Ingrese
clave:</label>
</div>
</div>
El botón para que aparezca debajo de los controles input efectuamos un

offset:
</div>
</div>
Nuestro formulario se comporta responsive. Si el tamaño del dispositivo es

grande:
Pero si reducimos su ancho podremos ver como sucede en el sistema de

grillas de Bootstrap que las columnas de la fila colapsan:
6 - form: etiquetas flotantes
Bootstrap 5 incorpora la posibilidad de disponer etiquetas flotantes a los
controles HTML. El efecto de la animación de desplazamiento de la etiqueta
cuando el usuario hace foco en el control se logra únicamente con la hoja de
estilo definida en el framework de Bootstrap.
Si creamos un formulario para login sin tener foco un control debe aparecer:
Luego cuando seleccionamos el control input de tipo text para el ingreso del
nombre de usuario la etiqueta se desplaza mediante una animación a la parte
superior:
El código queda con la siguiente sintaxis:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3 form-floating">
<input type="text" class="form-control" id="nombre" name="nombre"
placeholder="usuario">
<label for="nombre" class="form-label">Usuario:</label>
</div>
name="clave" placeholder="clave">
<label for="clave" class="form-label">Clave:</label>
</div>
</form>
</div>
</body>
</html>
Debemos agregar la clase 'form-floating', además para su correcto

funcionamiento debemos definir la propiedad placeholder:
<input type="text" class="form-control" id="nombre" name="nombre"
placeholder="usuario">
<label for="nombre" class="form-label">Usuario:</label>
</div>
Textarea
Las etiquetas flotantes funcionan tanto para los controles input como para el
control textarea, pero para este último control debemos tener en cuenta de
no utilizar la propiedad rows para definir la cantidad de filas, en cambio
debemos definir en la hoja de estilo la propiedad height:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="form-floating mt-3 mb-3">
<textarea class="form-control" id="comentarios"
name="comentarios" placeholder="comentarios" style="height:
200px"></textarea>
<label for="comentarios">Deje aquí sus
comentarios</label>
</div>
</form>
</div>
</body>
</html>
Tenemos como resultado:
Select
Para el control HTML de tipo select la etiqueta flotante esta visible
permanentemente:
Debiendo implementar el siguiente código:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="form-floating mt-3">
<select class="form-select" id="dias">
<option value="1">Lunes</option>
<option value="2">Martes</option>
<option value="3">Miércoles</option>
<option value="4">Jueves</option>
<option
value="5">Viernes</option>
<option value="6">Sábado</option>
<option value="7">Domingo</option>
</select>
<label for="dias">Día de la semana</label>
</div>
</form>
</div>
</body>
</html>
7 - form: diseños complejos empleando las grillas

Una de las ventajas fundamentales de Bootstrap es el sistema de grillas
con 12 columnas por fila. Podemos perfectamente diseñar un formulario
complejo empleando el sistema de grillas.
Veamos un ejemplo con un formulario con distinta cantidad de controles en
cada fila.
La interfaz visual del formulario es:
El código para implementar el formulario es:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form class="row g-3">

<div class="col-md-6">
<label for="mail" class="form-label">Mail</label>
<input type="email" class="form-control" id="mail">
</div>
<label for="clave" class="form-label">Clave</label>
</div>
<label for="direccion" class="form-label">Dirección</label>
<input type="text" class="form-control" id="direccion"
placeholder="Colon 120">
</div>
<label for="ciudad" class="form-label">Ciudad</label>
<input type="text" class="form-control" id="ciudad">
</div>
<label for="provincia" class="form-label">Provincia</label>
<select id="provincia" class="form-select">
<option selected>Elija...</option>
<option value="Córdoba">Córdoba</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="Santa Fe">Santa Fe</option>
</select>
</div>
<label for="codigopostal" class="form-label">Código
postal</label>
<input type="text" class="form-control" id="codigopostal">
</div>
<label for="comentarios" class="form-label">Deje aquí sus
comentarios</label>
<textarea class="form-control" rows="5" id="comentarios"
name="comentarios"></textarea>
</div>
<input class="form-check-input" type="checkbox" id="terminos">
<label class="form-check-label" for="terminos">
Acepta los términos y condiciones
</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Tengamos en cuenta que con el sistema de grillas sabemos que cada vez
que superamos 12 columnas, las siguientes se ubican en la siguiente fila,
luego la primera fila contiene los dos primeros controls:
<label for="mail" class="form-label">Mail</label>
<input type="email" class="form-control" id="mail">
</div>
<label for="clave" class="form-label">Clave</label>
</div>
Luego en una única fila se pide el ingreso de la dirección:
<label for="direccion" class="form-label">Dirección</label>
<input type="text" class="form-control" id="direccion"
placeholder="Colon 120">
</div>
Seguidamente en la misma fila se solicita el ingreso de la ciudad, provincia y
el código postal:
<label for="ciudad" class="form-label">Ciudad</label>
<input type="text" class="form-control" id="ciudad">
</div>
<label for="provincia" class="form-label">Provincia</label>
<select id="provincia" class="form-select">
<option selected>Elija...</option>
<option value="Córdoba">Córdoba</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="Santa Fe">Santa Fe</option>
</select>
</div>
<label for="codigopostal" class="form-label">Código postal</label>
<input type="text" class="form-control" id="codigopostal">
</div>
De forma similar solicitamos el resto de datos del formulario:
8 - form: texto de ayuda de un control

Una característica muy común que se agregan a los formularios HTML
es un texto en la parte inferior del control informando al usuario que datos
debe ingresar con la mayor precisión posible.
Disponemos de la clase:
form-text
Un formulario que lo implementa:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3">
name="nombre">
<div class="form-text">No ingrese espacios en blanco.</div>
</div>
<div class="mb-3">
name="clave">
<div class="form-text">Debe tener al menos 10 caracteres, de los
cuales al menos uno debe ser un número.</div>
</div>
</form>
</div>
</body>
</html>
En el navegador podemos ver los dos textos de ayuda bajo los controles
HTML:
Utilizamos la etiqueta "div" pero podríamos haber utilizado también otras

etiquetas como "span", "small" etc.:
<div class="form-text">No ingrese espacios en blanco.</div>
9 - form: tamaño de los controles de formulario

Bootstrap 5 nos permite definir 3 tamaños de controles de formulario.
Tenemos el tamaño por defecto, un tamaño grande y un tamaño pequeño.
Las clases que nos permiten definir los tamaños de los controles:
form-control-lg
form-control-sm
Veamos un formulario que utiliza los tres tamaños disponibles:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p><strong>Tamaño pequeño</strong></p>
<form>
<div class="mb-3">
<label for="nombre2" class="form-label">Ingrese su
nombre:</label>
<input type="text" class="form-control form-control-sm"
id="nombre2" name="nombre2">
</div>
<div class="mb-3">
<label for="clave2" class="form-label">Ingrese su clave:</label>
<input type="password" class="form-control form-control-sm"
id="clave2" name="clave2">
</div>
</form>
<p><strong>Tamaño grande</strong></p>
<form>
<div class="mb-3">
<label for="nombre3" class="form-label">Ingrese su
nombre:</label>
<input type="text" class="form-control form-control-lg"
id="nombre3" name="nombre3">
</div>
<div class="mb-3">
<label for="clave3" class="form-label">Ingrese su clave:</label>
<input type="password" class="form-control form-control-lg"
id="clave3" name="clave3">
</div>
</form>
<p><strong>Tamaño normal</strong></p>
<form>
<div class="mb-3">
name="nombre">
</div>
<div class="mb-3">
name="clave">
</div>
</form>
</div>
</body>
</html>
Los tres formularios con controles de distinto tamaño tienen una apariencia
en el navegador similar a:
Si queremos que el control de formulario aparezca con un tamaño pequeño
agregamos la clase "form-control-sm":
<input type="text" class="form-control form-control-sm" id="nombre2"
name="nombre2">
10 - form: control y grupo de controles HTML
deshabilitados
Para deshabilitar un único control de formulario HTML debemos insertar la
propiedad disabled al control respectivo.
En el caso que necesitemos deshabilitar un conjunto de controles agrupados
en una etiqueta HTML fieldset le asignamos la propiedad disabled a dicha
marca.
Problema
Implementar un formulario que contenga un fieldset deshabilitado y por otro
lado un control checkbox en forma independiente deshabilitado.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<fieldset disabled>
<div class="mb-3">
<label for="usuario" class="form-label">Nombre de
usuario:</label>
<input type="text" class="form-control" id="usuario"
name="usuario">
</div>
<div class="mb-3">
<label for="clave" class="form-label">Ingrese clave:</label>
name="clave">
</div>
</fieldset>
<div class="form-check mb-3">
<input disabled class="form-check-input" type="checkbox" value=""
Acepta términos y condiciones
</label>
</div>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
</div>
</body>
</html>
En el navegador tenemos como resultado los dos controles del fieldset
deshabilitados, de la misma forma el control checkbox aparece deshabilitado:
Luego lo único que debemos hacer es definir la propiedad disabled en el

fieldset:
<fieldset disabled>
Y para desactivar solo un control de formulario debemos fijar la
propiedad disabled para el control en particular:
<input disabled class="form-check-input" type="checkbox" value=""

Bootstrap se encarga de colorear el o los controles cuando asignamos la
propiedad disabled.
11 - form: control range

Mediante la clase 'form-range' podemos definir un estilo coherente
entre navegadores para el control visual range.
Por ejemplo si queremos definir un control range en un formulario:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<label for="rango1" class="form-label">Ejemplo de contro
rango</label>
<input type="range" class="form-range" id="rango1">
</form>
</div>
</body>
</html>
En Firefox tenemos la siguiente representación:
Y en Chrome:
Recordemos que al control range podemos definir el valor mínimo y máximo,

lo mismo que su paso de avance:
<input type="range" class="form-range" id="rango1" min="0" max="5"
step="0.5">
12 - form: clase input-group

La clase input-group permite asociar a un control de formulario un texto
u otro control a un lado o ambos del mismo.
Lo más fácil para entender esta clase es verla con una serie de ejemplos
básicos.
Para obtener la siguiente salida:
Lo obtenemos con la siguiente sintaxis:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="nombre de
usuario en el sitio">
</div>
<div class="input-group mb-3">

<input type="text" class="form-control" placeholder="usuario">
<span class="input-group-text" id="texto2">@gmail.com</span>
</div>
</form>
</div>
</body>
</html>
Podemos asociar también un control de formulario, por ejemplo un botón:
Y lo hacemos mediante el código:

<form>
<div class="input-group">
<button class="btn btn-primary" type="button"
id="boton1">Verificar</button>
<input type="text" class="form-control" placeholder="Nombre de
usuario nuevo">
</div>
</form>
15 - button: estilos
Para crear botones Bootstrap 5 propone utilizar la etiqueta "button",

"a" o "input" y define una serie de clases:
btn
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-dark
btn-light
btn-link
Siempre debemos asignar la clase btn y alguna de las otras clases con un
significado propio indicado por su color.
Cada una de estas clases define un estilo particular para un botón y tiene un
significado que nos ayudan a definir en que caso los debemos utilizar:
 btn-primary : Es un botón que se destaca entre un conjunto de botones.
 btn-secondary : Es un botón no tan importante como btn-primary.
 btn-success : Se utiliza para indicar una acción exitosa (por ejemplo

luego de registrarse a un servicio donde se muestra un botón para ir a
la página principal del sitio)
 btn-info : Es un botón para información.
 btn-warning : Es un botón que nos informa que debemos tener cuidado

con la acción que tiene asociado el botón.
 btn-danger : Indica que la acción que tiene asociado el botón es

peligrosa.
 btn-dark : Muestra un botón oscuro.
 btn-light : Muestra un botón claro.
 btn-link : Convierte al botón como un hipervínculo, haciendo que

disminuya su importancia.
Problema
Mostrar una lista de button asociando a cada uno una clase distinta propuesta
por Bootstrap 5 y mostrando como leyenda su significado.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<div class="mb-3">
<button type="submit" class="btn btn-primary">
btn-primary : Es un botón que se destaca entre un conjunto de
botones.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-secondary">
btn-secondary : Es un botón no tan importante como btn-
primary.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success">
btn-success : Se utiliza para indicar una acción
exitosa.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-info">
btn-info : Es un botón para información.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-warning">
btn-warning : Es un botón que nos informa que debemos tener
cuidado con la acción que tiene asociado el botón.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-danger">
btn-danger : Indica que la acción que tiene asociado el botón
es peligrosa.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-dark">
btn-dark : Muestra un botón oscuro.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-light">
btn-light : Muestra un botón claro.</button>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-link">
btn-link : Convierte al botón como un hipervínculo, haciendo
que disminuya su importancia.</button>
</div>
</form>
</div>
</body>
</html>
El resultado de ejecutar esta página es:
Utilizar este estándar ayuda que nuestros visitantes se sientan muy cómodos
navegando nuestro sitio ya que seguramente ha visitado otros sitios que lo
utilizan.
Ya asociarán el color azul en un botón con un botón importante del sitio, el
amarillo con acciones que debemos tener cuidado, el rojo con acciones
peligrosas (por ejemplo borrar una cuenta) etc.
Bootstrap 5 dispone los mismos botones y significados pero solo pintando su
contorno por medio de las clases (menos el de btn-link):
btn
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger
btn-outline-dark
btn-outline-light
Si modificamos la página con estas clases ahora tenemos en el navegador el

siguiente resultado:
1 - button: tamaño
Hemos visto que existen distintos tipos de botones que debemos utilizar
según la circunstancia. A estos estilos de botones podemos utilizar dos clases
más de tamaños aparte del estándar:
 btn-sm: Define un tamaño de botón pequeño.
 btn-lg: Define un tamaño de botón grande.
Problema
Mostrar una lista de button con los distintos tamaños que define Bootstrap
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<button type="submit" class="btn btn-primary btn-sm">btn-sm :
tamaño pequeño</button>
<button type="submit" class="btn btn-primary btn-lg">btn-lg :
tamaño grande</button>
<button type="submit" class="btn btn-primary">tamaño
normal</button>
</form>
</div>
</body>
</html>
Debemos asignar las clases btn, btn-primary o las otras vistas y finalmente
alguna de las propiedades relacionadas al tamaño del botón:
<button type="submit" class="btn btn-primary btn-sm">btn-sm : tamaño
pequeño</button>
2 - button: desactivo
Si queremos que un elemento HTML button se muestre y actúe como
desactivo debemos inicializar la propiedad disabled con el valor disabled.
Problema
Mostrar cuatro botones grandes. El primero activo y los tres siguientes
desactivados.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<form>
<button type="submit" class="btn btn-primary btn-lg">Botón
activo</button>
<button type="submit" class="btn btn-primary btn-lg"
disabled="disabled">Botón 1 desactivo</button>
</form>
</div>
</body>
</html>
Como vemos para desactivar un botón debemos inicializar la propiedad
disabled:
El resultado visual y operativo en el navegador de un botón normal y tres
desactivados es:
3- button: grupo de botones, barra de herramientas,

tamaños y orientación
Bootstrap nos provee la posibilidad de agrupar un conjunto de botones
mediante la clase "btn-group". Los botones se agrupan pegados en la misma
fila.
En algunas situaciones podemos agrupar un conjunto de grupos de botones
y crear una barra de herramientas.
Problema
Crear un grupo de botones con los números de 1 al 4. Por otro lado crear una
barra de herramientas con dos grupos de botones mostrando los números del
1 al 4 en castellano y en inglés.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
</div>
<hr>
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary">uno</button>
<button type="button" class="btn btn-primary">dos</button>
<button type="button" class="btn btn-primary">tres</button>
<button type="button" class="btn btn-primary">cuatro</button>
</div>
<button type="button" class="btn btn-primary">one</button>
<button type="button" class="btn btn-primary">two</button>
<button type="button" class="btn btn-primary">three</button>
<button type="button" class="btn btn-primary">four</button>
</div>
</div>
</div>
</body>
</html>
En el navegador tenemos una representación similar a:
Es decir debemos agrupar un conjunto de elementos button con un div

definiendo la clase "btn-group":
</div>
Para crear una barra de herramientas debemos agrupar un conjunto de "btn-
group" encerrando los mismos en un div definiendo la clase ""btn-toolbar":
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary">uno</button>
<button type="button" class="btn btn-primary">dos</button>
<button type="button" class="btn btn-primary">tres</button>
<button type="button" class="btn btn-primary">cuatro</button>
</div>
<button type="button" class="btn btn-primary">four</button>
</div>
</div>
Para que las barras de botones se muestren separadas agregamos la clase

me-3 (margin end con el valor 3).
Para definir tamaños de los botones en forma conjunta para un grupo de
botones podemos utilizar alguna de las siguientes clases:
btn-group-lg
btn-group-sm
Que definen los tamaños grande y pequeño.

Un ejemplo asignando esto dos tipos de clases a dos grupos de botones es:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="btn-group btn-group-lg">

</div>
<hr>
<div class="btn-group btn-group-sm">
</div>
</div>
</body>
</html>
Y tenemos como resultado en el navegador una página similar a:
Otra clase relacionada a los grupos de botones es "btn-group-vertical", la

misma dispone los botones en forma vertical, probemos de modificar el
ejemplo primero:
<div class="btn-group-vertical">
</div>
Luego en el navegador tenemos como resultado:
Grupos de Checkbox y RadioButton mostrándose como

botones.
Podemos agrupar un conjunto de RadioButton y que se muestren como
botones, de forma similar con controles Checkbox:
Y lo obtenemos con el siguiente código:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox
1</label>

2</label>

3</label>
</div>
<hr>
<input type="radio" class="btn-check" name="radio" id="radio1"
checked>
<label class="btn btn-outline-primary" for="radio1">Radio 1</label>
<input type="radio" class="btn-check" name="radio" id="radio2">

<input type="radio" class="btn-check" name="radio" id="radio3">

</div>
</div>
</body>
</html>
4 - button: ubicación mediante grid y flex (css)

Para tener una precisión mayor cuando queremos ubicar un botón debemos
utilizar características de css en lugar de clases que provea directamente
Bootstrap.
Veamos como implementamos la siguiente interfaz visual:
Tenemos el siguiente código:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="d-grid gap-3 mb-3">

<button class="btn btn-primary" type="button">Boton 1</button>
<button class="btn btn-primary" type="button">Boton
3</button>
</div>
<div class="d-grid gap-3 d-md-block mb-3">

3</button>
</div>
<div class="gap-3 d-md-flex justify-content-md-center mb-3">

3</button>
</div>
<div class="gap-3 d-md-flex justify-content-md-end mb-3">

3</button>
</div>
</div>
</body>
</html>
Para que los botones ocupen todo su contenedor definimos un div y

especificamos la clase d-grid, luego la clase gap-3 especifica el espacio entre
los botones:
<div class="d-grid gap-3 mb-3">
Si queremos que los botones se encuentren en la misma fila agregamos la

clase 'd-md-block':
<div class="d-grid gap-3 d-md-block mb-3">
Si queremos que aparezcan centrados utilizamos estas otras clases que

están relacionados con el sistema flexbox de CSS:
<div class="gap-3 d-md-flex justify-content-md-center mb-3">
16 - Tipografía
Bootstrap 5 usa por defecto un font-size de 16px para el elemento
"html".
Muchas etiquetas utilizan como medida relativa el rem que es proporcional al
font-size definido en la etiqueta "html".
La fuente por defecto que define Bootstrap 5 para la propiedad "font-family"
de la marca "body" es:
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvet

ica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Em
oji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
Bootstrap 5 usa una "lista de fuentes nativas" (fuentes del sistema operativo
del usuario), con una reserva para Helvetica Neue, Arial y sans-serif.
Los tamaños de las etiquetas h1, h2, h3 etc. se dimensionan de acuerdo a
medidas relativos (rem), si abrimos el código fuente del archivo bootstrap.css
tenemos las siguientes reglas:
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1, .h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 2.5rem;
}
}
h2, .h2 {
}
h2, .h2 {
font-size: 2rem;
}
}
h3, .h3 {
}
h3, .h3 {
font-size: 1.75rem;
}
}
h4, .h4 {
}
h4, .h4 {
font-size: 1.5rem;
}
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1rem;
}
Como vemos los tamaños para las etiquetas son proporcionales al font-size
de la etiqueta "html" al utilizar rem como medida.
Es decir que la etiqueta h6 tiene tamaño de fuente de 1rem que es igual a
16px. Luego h5 tiene un tamaño de 20px que resulta de multiplicar 1.25 *
16px etc.
Problema
Mostrar una serie de títulos empleando primero las etiquetas h1 al h6, luego
hacer lo mismo con las clases "h1" a "h6".
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>Titulo de nivel 1</h1>
<hr>
<p class="h1">Texto con la clase h1</p>
</div>
</body>
</html>
En pantalla tenemos como resultado:
Si tenemos que mostrar títulos debemos utilizar las etiquetas h1, h2, h3 etc.,
en el caso que necesitemos mostrar texto dentro del navegador que coincida
en tamaño y fuente con respecto a los títulos pero que no sean títulos
utilizaremos las clases "h1", "h2" etc.
Clases display-1, display-2, display-3, display-4,

display-6 y display-6
Si necesitamos destacar alguna etiqueta h1, h2, h3 etc. podemos agregarle
alguna de estas cuatro clases definidas en Bootstrap 5:
.display-1 {
font-weight: 300;
line-height: 1.2;
}
.display-1 {
font-size: 5rem;
}
}
.display-2 {
font-weight: 300;
line-height: 1.2;
}
.display-2 {
font-size: 4.5rem;
}
}
.display-3 {
font-weight: 300;
line-height: 1.2;
}
.display-3 {
font-size: 4rem;
}
}
.display-4 {
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 3.5rem;
}
}
.display-5 {
font-weight: 300;
line-height: 1.2;
}
.display-5 {
font-size: 3rem;
}
}
.display-6 {
font-weight: 300;
line-height: 1.2;
}
.display-6 {
font-size: 2.5rem;
}
}
Una página que los emplea es:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1 class="display-1">Titulo 1 con display-1</h1>
</div>
</body>
</html>
Etiqueta o clase small dentro de los títulos

Si dentro de un título utilizamos la etiqueta small luego dicho contenido
aparece con un tamaño de 0.875em del título que lo contiene, si vemos el
código fuente de "bootstrap.css" podemos encontrar la siguiente definición:
small, .small {
font-size: 0.875em;
}
Aplicando a una página:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>Titulo de nivel 1<small>(acotación)</small></h1>
</div>
</body>
</html>
Y tenemos como resultado en el navegador:
Podemos agregar la clase 'text-muted' cuando definimos la etiqueta 'small'
dentro del título:
<h1>Curso Web<small class="text-muted">(html, css y
javascript)</small></h1>
</div>
La representación visual es:
1 - Tipografía: listas
Bootstrap 5 define estilos para trabajar con listas ordenadas, listas no
ordenadas y listas de definición.
Veamos cual es la sintaxis para definir una lista ordenada:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo de lista ordenada</p>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
<li>Cuarto elemento</li>
</ol>
</div>
</body>
</html>
Como vemos no hace falta especificar ninguna clase para que le asigne un
estilo a una lista ordenada de HTML, ya que el Bootstrap 5 define estilos para
los elementos HTML ol y li.
Un ejemplo de una lista no ordenada:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo de lista no ordenada</p>
<ul>
</ul>
</div>
</body>
</html>
Empleamos la marca HTML <ul> con sus respectivos <li>, luego obtenemos
como resultado una salida en el navegador similar a:
A las listas <ul> podemos asignarle alguna de estas dos clases:
.list-unstyled
Muestra los elementos de la lista sin viñetas y sin margen izquierdo.
.list-inline
Muestra los elementos en una misma línea (además hay que agregarle la clase
"list-inline-item" a cada "li")
Un ejemplo utilizando estas dos clases:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo de lista no ordenada sin estilo</p>
<ul class="list-unstyled">
</ul>
<p>Ejemplo de lista no ordenada en línea</p>
<ul class="list-inline">
<li class="list-inline-item">Primer elemento</li>
<li class="list-inline-item">Segundo elemento</li>
<li class="list-inline-item">Tercer elemento</li>
<li class="list-inline-item">Cuarto elemento</li>
</ul>
</div>
</body>
</html>
En el navegador tenemos:
Bootstrap 5 también define estilos para las listas de definición que nos provee
HTML. Debemos agregar la clase "row" a la etiqueta dl si queremos una lista
horizontal y luego debemos plantear las columnas como ya conocemos con
el sistema de grillas.
Veamos un ejemplo:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo de lista de definición</p>
<dl>
<dt>Palabra 1</dt>
<dd>Definición de la palabra 1</dd>
<dt>Palabra 2</dt>
<dt>Palabra 3</dt>
</dl>
<p>Ejemplo de lista de definición horizontal</p>
<dl class="row">
<dt class="col-sm-3">Palabra 1</dt>
<dd class="col-sm-9">Definición de la palabra 1</dd>
</dl>
</div>
</body>
</html>
Como resultado de esta página visualizamos en el navegador:
2 - Tipografía: citas de bloque

El elemento HTML "blockquote" normalmente se utiliza para agrupar un
texto que pertenece a otro autor o documento. El Bootstrap 5 define un
estilo para este elemento que se almacena en la clase "blockquote".
Veamos una página con un "blockquote":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<blockquote class="blockquote">
<p>Texto de la cita de bloque. Texto de la cita de bloque.
Texto de la cita de bloque. Texto de la cita de bloque.
Texto de la cita de bloque. Texto de la cita de bloque.</p>
</blockquote>
</div>
</body>
</html>
Referencia a la fuente.
Podemos disponer una referencia a la fuente agregando una etiqueta
"figcaption" y agregando la clase "blockquote-footer" a la misma:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<blockquote class="blockquote">
<p>Texto de la cita de bloque. Texto de la cita de bloque.
Texto de la cita de bloque. Texto de la cita de bloque.</p>
<figcaption class="blockquote-footer">Referencia de la
fuente:<cite>xxxxx</cite></figcaption>
</blockquote>
</div>
</body>
</html>
Como podemos comprobar dentro de la etiqueta "blockquote" disponemos
una etiqueta "figcaption" donde definimos la clase "blockquote-footer".
Alineación.
Si queremos alinear el bloque de citas debemos aplicar alguna de estas tres
clases a la etiqueta "blockquote":
text-start
text-center
text-end
3 - Tipografía: abreviaturas e iniciales

Bootstrap 5 redefine estilos para el elemento HTML <abbr> que se
emplea para indicar abreviaturas y acrónimos.
Una abreviatura representa una palabra pero solo escribimos una o varias
letras de la misma y un acrónimo es una palabra que se forma generalmente
con el primer carácter de un conjunto de palabras.
La siguiente página define una abreviatura y un acrónimo:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Este es un ejemplo de una abreviatura <abbr
title="Señor/a">Sr./a.</abbr></p>
<hr>
<p>Este es un ejemplo de un acrónimo <abbr title="Objeto Volador No
Identificado" class="initialism">ovni</abbr></p>
</div>
</body>
</html>
Tanto para abreviaturas y acrónimos empleamos el elemento HTML <abbr>.
En la definición de una abreviatura y un acrónimo indicamos la propiedad title
con el valor que se mostrará cuando pasemos con la flecha del mouse.
En un acrónimo además especificamos la clase class="initialism" (esto hace
que el texto que se muestre siempre aparece en mayúsculas.
En el navegador tenemos la siguiente representación:
4 - Tipografía: Código y bloques de código

Veamos ahora otros elementos HTML que Bootstrap 5 redefine el estilo
por defecto para mostrar trozos de código fuente.
<code>
Cuando queremos enfatizar un trozo de código de programación en una línea
empleamos el elemento <code>:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo del elemento HTML code</p>
<p>Nuestro primera línea en Basic puede haber sido <code>10 print
"Hola Mundo"</code></p>
</div>
</body>
</html>
<pre>
Para definir bloques de código utilizamos el elemento HTML pre, Bootstrap
define un estilo particular:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>Ejemplo del elemento HTML pre</p>
<pre>
10 print "hola mundo"
20 goto 10
</pre>
</div>
</body>
</html>
5 - Tipografía: Clases para el alineado, justificado,

transformación de texto etc.
Bootstrap 5 provee de un conjunto de clases que nos permiten alinear
texto a la izquierda, derecha, centro, justificar, convertir a mayúsculas,
minúsculas, capitalizar palabras etc.
Veamos una página que muestre como se usan y que resultados proveen
estas clases.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p class="text-start">Texto alineado a la izquierda.</p>
<hr>
<p class="text-end">Texto alineado a la derecha.</p>
<hr>
<p class="text-center">Texto centrado.</p>
<hr>
<p class="text-justify">
Texto justificado.Texto justificado.
Texto justificado.Texto justificado.</p>
<hr>
<p class="small">Texto pequeño.</p>
<hr>
<p class="lead">Texto destacado.</p>
<hr>
<p class="text-nowrap">
Texto no ajustado.Texto no ajustado.Texto no ajustado.
Texto no ajustado.</p>
<hr>
<p class="text-lowercase">Texto en Minúsculas.</p>
<hr>
<p class="text-uppercase">Texto en Mayúsculas.</p>
<hr>
<p class="text-capitalize">texto capitalizado.</p>
<hr>
<p class="mark">Texto marcado.</p>
<p>Presion la tecla <kbd>Ctrl T</kbd></p>
</div>
</body>
</html>
En el navegador tenemos la siguiente representación de estas clases y
elementos HTML:
17 - Imágenes
Bootstrap 5 define una serie de clases para aplicar al elemento HTML

<img>:
 rounded : Define las esquinas redondeadas en la imagen.

Si accedemos al código del archivo bootstrap.css veremos que
inicializa la propiedad border-radius con el valor de 0.25rem.
 rounded-circle : Convierte la imagen en un círculo, para ello Bootstrap

5 inicializa la propiedad border-radius: 50%;
 img-thumbnail : Define un recuadro y muestra la imagen cuando se

carga la página en el navegador.
 img-fluid : Permite escalar correctamente la imagen (Esto lo logra
Bootstrap 5 definiendo la propiedad max-width: 100%; y height: auto;)
 float-start : flota la imagen a la izquierda.
 float-end : flota la imagen a la derecha.
Veamos una página que muestra unas imágenes aplicando sucesivamente

las distintas clases disponibles en Bootstrap 4:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png"
class="rounded">
<hr>
class="rounded-circle">
<hr>
<img src="https://www.tutorialesprogramacionya.com/cssya/foto1.jpg"
class="img-fluid">
<hr>
class="img-thumbnail">
<hr>
class="float-start">
class="float-end">
<hr>
</div>
</body>
</html>
Tenemos como resultado en el navegador:
18 - Componente: card (básica)
Una tarjeta (card) es un contenedor de información flexible. Incluye

opciones para encabezados y pie de página, una amplia variedad de
contenidos, colores de fondo contextuales etc.
Problema
Crear tres tarjetas básicas en la misma fila que ocupen anchos iguales:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>Prueba de tarjetas</h1>
<div class="row">
<div class="col-md">
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta 1</h4>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare
sed erat. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis
dui. </p>
<a href="#" class="btn btn-primary">Entrar</a>
</div>
</div>
</div>
dui. </p>
</div>
</div>
</div>
dui. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Debemos disponer un div e inicializarlo con la clase "card" (en este

ejemplo agregamos la clase "text-center" para mostrar el contenido de la
tarjeta centrado:

Dentro del div anterior disponemos otro div fijando la clase "card-body":
Para el título de la tarjeta disponemos un "h4" y le fijamos la clase
"card-title":

Los párrafos de la tarjeta fijamos la clase "card-text":

dui. </p>
Podemos disponer botones dentro de la tarjeta y otros contenidos HTML:

1 - Componente: card (con colores contextuales para
fondo, borde y texto)
Vimos en el concepto anterior la estructura básica que provee Bootstrap 5.
Veamos ahora como podemos fijar el color de fondo y el color de texto según
las clases contextuales.
Para el color de fondo disponemos de las clases:
 bg-primary
 bg-success
 bg-info
 bg-warning
 bg-danger
 bg-secondary
 bg-dark
 bg-light
Problema
Crear tres tarjetas básicas en la misma fila que ocupen anchos iguales y
utilicen un color de fondo contextual distinto:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<div class="card bg-success text-white">
dui. </p>
</div>
</div>
</div>
<div class="card bg-warning text-white">
dui. </p>
</div>
</div>
</div>
<div class="card bg-danger text-white">
dui. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Como podemos comprobar le agregamos algunas de las clases de color de

fondo al div que define la tarjeta:
<div class="card bg-success text-white">
Agregamos a la tarjeta la clase text-white que hace que el texto salga de
color blanco.
Colores contextuales para el borde.

Podemos fijar un color de borde para las tarjetas mediante las clases:
 border-primary
 border-success
 border-info
 border-warning
 border-danger
 border-secondary
 border-dark
 border-light
Si tenemos el siguiente trozo de código:

<div class="row">
<div class="card border-success">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed
erat. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui.
</p>
</div>
</div>
</div>
<div class="card border-warning">
</p>
</div>
</div>
</div>
<div class="card border-danger">
</p>
</div>
</div>
</div>
</div>
Colores contextuales para texto.

Finalmente podemos fijar un color de texto contextual para las tarjetas
mediante las clases:
 text-primary
 text-success
 text-info
 text-warning
 text-danger
 text-secondary
 text-dark
 text-light

<div class="row">
<div class="card">
<div class="card-body text-success">
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body text-warning">

</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body text-danger">
</p>
</div>
</div>
</div>
</div>
2 - Componente: card (con imágenes)

Podemos disponer imágenes en la tarjeta, pero si queremos que respete
lo vértices redondeados de la tarjeta tenemos que utilizar algunas clases que
pasaremos a ver.
Imagen en la parte superior e inferior de la tarjeta de

la tarjeta.
Debemos utilizar las clases "card-img-top" y "card-img-bottom" según se
muestren las imágenes dentro de la tarjeta.
Confeccionaremos una página que muestre dos tarjetas, la primera muestra
una imagen en la parte superior y la segunda una imagen en la parte inferior:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<div class="card">
<img class="card-img-top"
src="https://www.tutorialesprogramacionya.com/imagenes/cuadro1.jpg">
dui. </p>
</div>
</div>
</div>
<div class="card">
dui. </p>
</div>
<img class="card-img-bottom"
</div>
</div>
</div>
</div>
</body>
</html>
Imagen superpuesta.
Mediante la clase "card-img-overlay" podemos hacer que el cuerpo de la
tarjeta aparezca superpuesta sobre la imagen.
<div class="card">
<div class="card-img-overlay">
tempor vitae mattis malesuada, ornare sed erat.
Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui. </p>
</div>
</div>
3 - Componente: card (con cabecera y/o pie de tarjeta)
Una tarjeta en Bootstrap 5 puede tener opcionalmente una cabecera y/o
pie de tarjeta para suministrar otro tipo de información.
Para disponer una cabecera disponemos de la clase "card-header" y para fijar
un pie de tarjeta debemos agregar la clase "card-footer".
Veamos un ejemplo con unas series de tarjetas que dispongan de cabecera
y/o pie de tarjeta:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row mt-3">
<div class="card-header">
Cabecera
</div>
<h4 class="card-title">Titulo de la tarjeta</h4>
dui. </p>
</div>
<div class="card-footer">
Pie de tarjeta
</div>
</div>
</div>
Cabecera
</div>
dui. </p>
</div>
</div>
</div>
dui. </p>
</div>
Pie de tarjeta
</div>
</div>
</div>
</div>
</div>
</body>
</html>
La primera tarjeta implementa tanto la cabecera como el pie de tarjeta:

Cabecera
</div>
</div>
Pie de tarjeta
</div>
</div>
4 - Componente: card (pestañas)
Otra variante que podemos implementar con las tarjetas de Bootstrap 5 es
el añadir pestañas de opciones en la parte superior.
Las pestañas se agregan en la zona de la cabecera y se requieren las
siguientes clases:
nav nav-tabs card-header-tabs (estas tres clases se las agrega a un elemento

HTML de tipo "ul".
nav-item (esta clase se la agregamos a cada elemento HTML de tipo "li".
nav-link (esta clase se la agregamos a cada ancla que debemos disponer dentro
de cada "li"
Problema
Mostrar una tarjeta que contenga 4 pestañas, debe aparecer activa la
tercera.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row justify-content-center mt-3">
<div class="card text-center border-info">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Opcion 1</a>
</li>
</li>
<a class="nav-link active" href="#">Opcion 3</a>
</li>
</li>
</ul>
</div>
dui. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Dentro de la cabecera de la tarjeta definimos una lista no ordenada (ul) con las tres clases
necesarias nav nav-tabs card-header-tabs:
<ul class="nav nav-tabs card-header-tabs">
Luego comenzamos a definir cada "li" con la clase "nav-item". Dentro las
anclas con la clase "nav-link":
</li>
Finalmente la pestaña seleccionada debemos agregar la clase "active" al
ancla respectiva:
<a class="nav-link active" href="#">Opcion 3</a>
Variante con botones

En lugar de pestañas podemos mostrar una serie de enlaces y el
seleccionado en forma de botón. Para lograr esto debemos sustituir las clases
(nav-tabs card-header-tabs) por las clases (nav-pills card-header-pills)
El código fuente que cambia queda con la siguiente sintaxis:
<ul class="nav nav-pills card-header-pills">
5 - Componente: card (grupo de tarjetas)
Bootstrap 4 permite agrupar un conjunto de tarjetas las cuales se verán
con anchos y alturas iguales.
Para resolver esto anidamos todas las tarjetas en un div que defina la clase
"card-group".
Veamos una página que tiene tres tarjetas agrupadas:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="card-group mt-3">

</p>
</div>
</div>

</p>
</div>
</div>

</p>
</div>
</div>
</div>
</div>
</body>
</html>
En la línea siguiente definimos la clase card-group:
<div class="card-group mt-3">

Recordar que la clase "mt-3" define un margen en la parte superior de 3rem ([m]argen [t]op).
6 - Componente: card (dando dimensión con la grilla y

otras clases)
Podemos dimensionar las tarjetas con valores fijos mediante CSS o
hacer que se dimensionen de acuerdo a las columnas asignadas con la grilla
de Bootstrap.
Problema
Mostrar dos tres tarjetas que ocupen 5 columnas las dos primeras y 2
columnas la tercera.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<div class="col-xxl-5">
<div class="card text-white text-center bg-primary mb-3">
<div class="card-header">Cabecera</div>
<h5 class="card-title">Título</h5>
<a href="#" class="btn btn-success">Entrar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
El resultado en el navegador es:
Tener en cuenta que las tarjetas colapsan y se muestran en una sola columna
cuando el ancho del dispositivo es inferior a 1400 píxeles: col-xxl-*
Podemos aplicar alguna de las clases: w-25, w-50 y w-75 para que las tarjetas
tomen un ancho relativo de 25%, 50% o 75%. Por ejemplo la primera tarjeta
con w-50 y la segunda con w-75 se muestran:
Debemos modificar el código:
<div class="card text-white text-center bg-primary mb-3 w-50">

Podemos aplicar directamente una dimensión a la tarjeta en su estilo:
<div class="card text-white text-center bg-primary mb-3"

style="width:20rem">
Si queremos la misma altura en todas las tarjetas debemos añadir la clase 'h-100' a cada una de
las tarjetas:
<div class="card text-white text-center bg-primary mb-3 h-100">
19 - Componente: alert
Mediante la componente alert Bootstrap 5 propone el estándar para

mostrar cuadros de alerta al usuario.
Tenemos la posibilidad de utilizar los colores contextuales.
Las clases involucradas para implementar los cuadros de alerta son:
 alert
 alert-primary
 alert-secondary
 alert-success
 alert-danger
 alert-warning
 alert-info
 alert-light
 alert-dark
Debemos definir un div disponiendo la clase "alert" y alguna de las otras

clases según la información que se presente.
La siguiente página muestra un cuadro de alerta con cada uno de los colores
contextuales:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row mt-3">
<div class="col">
<div class="alert alert-primary">
<strong>alert-primary</strong> Prueba de componente alert
</div>
</div>
<div class="col">
<div class="alert alert-secondary">
<strong>alert-secondary</strong> Prueba de componente alert
</div>
</div>
<div class="col">
<div class="alert alert-success">
<strong>alert-success</strong> Prueba de componente alert
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-danger">
<strong>alert-danger </strong> Prueba de componente alert
</div>
</div>
<div class="col">
<div class="alert alert-warning">
<strong>alert-warning </strong> Prueba de componente alert
</div>
</div>
<div class="col">
<div class="alert alert-info">
<strong>alert-info </strong> Prueba de componente alert
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-light">
<strong>alert-light </strong> Prueba de componente alert
</div>
</div>
<div class="col">
<div class="alert alert-dark">
<strong>alert-dark </strong> Prueba de componente alert
</div>
</div>
</div>
</div>
</body>
</html>
Si disponemos un enlace dentro de un cuadro de alerta podemos asociarle la clase "alert-link"

para dar un estilo particular según el color contextual asociado:

El navegador más utilizado es el <a class="alert-link"
href="https://www.google.es/chrome/browser/desktop/index.html">Chrome</a>
</div>
En un cuadro de alerta está contemplado que podemos agregar títulos, divisores (<hr>) y
párrafos.

<h3>Buscador</h3>
<p>El navegador más utilizado es el <a class="alert-link"
href="https://www.google.es/chrome/browser/desktop/index.html">Chrome</a>
</p>
<hr>
Cualquier duda consulte al administrador
</div>
Agregar un ícono al cuadro de alert

Podemos agregar un ícono al cuadro de alerta muy fácilmente indicando una
imágen generada con SVG:
El código luego a implementar es:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
<link href="../css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container mt-2">
<div class="alert alert-primary d-flex align-items-center"

role="alert">
<svg class="flex-shrink-0 me-2" width="40" height="40" role="img"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Java
icon</title><path d="M8.851 18.56s-.917.534.653.714c1.902.218 2.874.187
4.969-.211 0 0 .552.346 1.321.646-4.699 2.013-10.633-.118-6.943-
1.149M8.276 15.933s-1.028.761.542.924c2.032.209 3.636.227 6.413-.308 0 0
.384.389.987.602-5.679 1.661-12.007.13-7.942-1.218M13.116 11.475c1.158
1.333-.304 2.533-.304 2.533s2.939-1.518 1.589-3.418c-1.261-1.772-2.228-
2.652 3.007-5.688 0-.001-8.216 2.051-4.292 6.573M19.33 20.504s.679.559-
.747.991c-2.712.822-11.288 1.069-13.669.033-.856-.373.75-.89 1.254-
.998.527-.114.828-.093.828-.093-.953-.671-6.156 1.317-2.643 1.887 9.58
1.553 17.462-.7 14.977-1.82M9.292 13.21s-4.362 1.036-1.544
1.412c1.189.159 3.561.123 5.77-.062 1.806-.152 3.618-.477 3.618-.477s-
.637.272-1.098.587c-4.429 1.165-12.986.623-10.522-.568 2.082-1.006 3.776-
.892 3.776-.892M17.116 17.584c4.503-2.34 2.421-4.589.968-4.285-.355.074-
.515.138-.515.138s.132-.207.385-.297c2.875-1.011 5.086 2.981-.928 4.562
0-.001.07-.062.09-.118M14.401 0s2.494 2.494-2.365 6.33c-3.896 3.077-.888
4.832-.001 6.836-2.274-2.053-3.943-3.858-2.824-5.539 1.644-2.469 6.197-
3.665 5.19-7.627M9.734 23.924c4.322.277 10.959-.153 11.116-2.198 0 0-
.302.775-3.572 1.391-3.688.694-8.239.613-10.937.168 0-.001.553.457
3.393.639"/></svg>
<div>
Lenguaje Java
</div>
</div>

role="alert">
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>C++
icon</title><path d="M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-
.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923
1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293
1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-
.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-
7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076
1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012
15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112
19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-
.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-
.79h.79v.79h.79z"/></svg>
<div>
Lenguaje C++
</div>
</div>

role="alert">
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PHP
icon</title><path d="M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105
1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-
.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12
6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-
.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327
1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476
1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-
.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-
.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327
1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-
1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-
.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-
.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477
1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105
1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-
.29-1.047-.29z"/></svg>
<div>
Lenguaje PHP
</div>
</div>
</div>
</body>
</html>
Funcionalidades con JavaScript

Hasta ahora solo hemos implementado todo con el CSS que provee Bootstrap
5, pero veremos que este framework provee más funcionalidades mediante
una librería extra en JavaScript.
Para utilizar las extensiones de JavaScript que provee Bootstrap deberemos
importar en nuestra página 1 archivo *.js al final del body, luego el esqueleto
básico de la página será:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>Hola mundo</h1>


</body>
</html>
Hemos importado el archivo bootstrap.bundle.min.js de un CDN, pero
podemos descargar este archivo y disponerlo en nuestro servidor.
Cuadro de alerta con botón de cierre.

Podemos hacer un cuadro de alerta que disponga un botón que al ser
presionado se oculte el mensaje. Esta funcionalidad está implementada en
el archivo "bootstrap.bundle.min.js" debido a eso debemos importarlo en la
página.
Vamos a implementar una página que muestre un cuadro de alerta con la
funcionalidad de poder cerrarlo:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show"
role="alert">
<p>El sitio permanecerá cerrado toda la semana</p>
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>

</body>
</html>
Debemos agregar la clase "alert-dismissible" al div del cuadro de alerta:
<div class="alert alert-warning alert-dismissible fade show"

role="alert">
Disponemos un "button" y es indispensable agregar la propiedad "data-bs-dismiss" con el valor

"alert" para su correcto funcionamiento:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-

label="Close"></button>
La funcionalidad de JavaScript para el cierre del cuadro de alert requiere la propiedad data-bs-
dismiss con el valor "alert".
Para animar las alertas al descartarlas, debemos agregar las clases "fade" y "show".
20 - Componente: modal (cuadro de diálogo modal básico)
Los cuadros de diálogo que implementa Bootstrap 5 requieren de la

librería de Javascript, por lo tanto no debemos olvidar de importarla.
Un cuadro modal es una ventana que aparece superpuesta a toda la página
actual. Para cerrarla podemos presionar la "x", disponer un botón de cerrado
o presionar en cualquier parte fuera del diálogo.
Solo se puede tener una ventana modal a la vez, eso significa que desde una
ventana modal no se puede disparar otra.
Veamos una página con la estructura básica para implementar un diálogo
modal:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#dialogo1">Abrir ventana de diálogo</button>
<div class="modal fade" id="dialogo1">

<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Título del
diálogo</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>

<div class="modal-body">
Contenido del diálogo.
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
En el navegador cuando está abierto el diálogo tenemos:
El primer div que envuelve el diálogo y tiene asignada la clase "modal" es:

...
</div>
La clase "fade" hace que el diálogo aparezca lentamente en pantalla.
El segundo div interno asigna la clase "modal-dialog":
<div class="modal-dialog">
...
</div>
El tercer div anidado tiene asignada la clase "modal-content":
...
</div>
Luego dentro de ese tercer div disponemos los divs de la cabecera, cuerpo y pie del diálogo:

<h5 class="modal-title" id="exampleModalLabel">Título del diálogo</h5>
</div>
Contenido del diálogo.
</div>
</div>
Para evitar que se cierre el diálogo cuando el operado presiona una región fuera del diálogo
debemos añadir la propiedad 'data-bs-backdrop' con el valor 'static':
<div class="modal fade" id="dialogo1" data-bs-backdrop="static">
Si el contenido del diálogo es muy grande, podemos hacer que se muestre una barra de scroll
en el diálogo mediante la clase 'modal-dialog-scrollable':
<div class="modal-dialog modal-dialog-scrollable">

1 - Componente: modal (tamaño y centrado del diálogo)
En Bootstrap 5 disponemos además del tamaño por defecto del diálogo
de otros tres tamaños que los fijamos con las clases:
 modal-sm
 modal-lg
 modal-xl
Estas clases se las debemos agregar al div donde se asigna la clase "modal-
dialog", por ejemplo:
<div class="modal-dialog modal-lg">
Por otro lado si queremos que el diálogo aparezca centrado en forma

horizontal y vertical debemos aplicar la clase "modal-dialog-centered" al
mismo div que define la clase "modal-dialog".
El ejemplo del concepto anterior modificando el tamaño y el centrado:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
data-bs-target="#dialogo1">Abrir ventana de diálogo</button>

<div class="modal-dialog modal-sm modal-dialog-centered">

<h4 class="modal-title">Título del diálogo</h4>
</div>

Contenido del diálogo pequeño. Contenido del diálogo pequeño.
Contenido del diálogo pequeño. Contenido del diálogo pequeño.
</div>

</div>
</div>
</div>
</div>
</div>
</body>
</html>
En el navegador cuando está abierto el diálogo tenemos:
Podemos hacer que el diálogo se muestre a pantalla completa agregando la

clase 'modal-fullscreen':
<div class="modal-dialog modal-fullscreen">
Teniendo como resultado:

Además contamos con las clases que mostrarán el diálogo en fullscreen
dependiendo del tamaño del dispositivo:
 modal-fullscreen-sm-down
 modal-fullscreen-md-down
 modal-fullscreen-lg-down
 modal-fullscreen-xl-down
 modal-fullscreen-xll-down
2 - Componente: modal (grillas dentro de diálogos)

Dentro del cuerpo de un diálogo modal podemos utilizar todo lo que
conocemos del sistema de grillas que propone Bootstrap 5.
La única consideración que tenemos que tener es que el contenedor debe de
ser de tipo fluido, es decir "container-fluid".
Problema
Crear una página con dos botones, el primero debe abrir diálogo modal que
muestre en su interior dos tarjetas con imágenes y el segundo botón debe
abrir un diálogo para hacer el login.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
data-bs-target="#dialogo1">Abrir diálogo con tarjetas</button>
data-bs-target="#dialogo2">Abrir diálogo con un formulario</button>

<div class="modal-dialog modal-lg modal-dialog-centered">

</div>

<div class="row">
<div class="col">
<div class="card">
<h4 class="card-title">Titulo de la tarjeta
1</h4>
<p class="card-text">Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis
malesuada, ornare sed erat. Pellentesque nulla dui, congue
nec tortor sit amet,
maximus mattis dui. </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<h4 class="card-title">Titulo de la tarjeta
2</h4>
<p class="card-text">Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis
malesuada, ornare sed erat. Pellentesque nulla dui, congue
nec tortor sit amet,
maximus mattis dui. </p>
</div>
</div>
</div>
</div>
</div>
</div>

<button type="button" class="btn btn-primary" data-bs-
</div>
</div>
</div>
</div>

<div class="modal-dialog modal-lg modal-dialog-centered">

</div>

<form>
<label for="usuario" class="col-sm-3 col-form-
label">Nombre de usuario:</label>
<input type="text" class="form-control"
id="usuario">
</div>
</div>
<label for="clave" class="col-sm-3 col-form-
label">Ingrese clave:</label>
<input type="password" class="form-control"
id="clave">
</div>
</div>
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">Cancelar</button>
</div>
</div>
</form>
</div>
</div>

<p>Entrada al sitio</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
En el navegador cuando está abierto el primer diálogo tenemos:
Dentro del cuerpo del diálogo creamos una grilla fluida y el resto es lo que ya conocemos:

........
</div>
</div>
En el navegador cuando está abierto el segundo diálogo tenemos:
21 - Componente: navbar (barra de navegación simple)
Bootstrap 5 dispone la posibilidad de implementar barras horizontales

de opciones. Cuando el ancho de las opciones no entra en pantalla se
muestran una abajo de la otra.
Veamos la sintaxis para implementar un menú de opciones en la parte
superior de la página:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">


<ul class="navbar-nav">
<a class="nav-link" href="#">Opción 1</a>
</li>
</li>
</li>
</li>
</ul>
</nav>
</body>
</html>
En el navegador la barra de navegación se ve así:
Mediante las clases:
 .navbar-expand-sm
 .navbar-expand-md
 .navbar-expand-lg
 .navbar-expand-xl
Indicamos en que momento la barra debe colapsar y mostrarse las opciones

una debajo de otra (esto debido a que los dispositivos pequeños no pueden
mostrar la barra en forma horizontal)
Si queremos podemos utilizar como color de fondo de la barra de navegación
cualquiera de los colores contextuales:
 bg-primary
 bg-secondary
 bg-info
 bg-warning
 bg-danger
 bg-dark
 bg-light
Si fijamos con la clase bg-warning luego tenemos el siguiente resultado:
Si queremos los hipervínculos de color blanco debemos cambiar la clase

"navbar-light" por "navbar-dark"
Por ejemplo si fijamos estos valores:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
Luego la barra queda con el siguiente color:
1 - Componente: navbar (contraer menú de navegación

y mostrar botón de hamburguesa)
La mayoría de los sitios web cuando se ejecutan en dispositivos
angostos ocultan la barra de navegación y muestran en su lugar un botón de
hamburguesa a la izquierda o derecha, el cual al ser presionado se
despliegan las opciones del menú de barra en forma vertical.
Veamos como Bootstrap 5 nos facilita la implementación de este tipo de
barras de navegación:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">

<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#opciones">
<span class="navbar-toggler-icon"></span>
</button>


<a class="navbar-brand" href="#">
<img
src="https://www.tutorialesprogramacionya.com/imagenes/foto1.jpg"
width="30" height="30" alt="">
</a>


<div class="collapse navbar-collapse" id="opciones">
</li>
</li>
</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
En una pantalla de tamaño mediano o grande la barra de navegación se muestra de esta forma:
Si reducimos su tamaño vemos que la barra de navegación desaparece y se muestra a la

izquierda un botón:
Y al ser
presionado el botón se muestran todas las opciones del menú:
22 - Componente: carousel
Un "carousel" es una componente que muestra un

conjunto de diapositivas (imágenes generalmente), avanza en
forma automática cada diapositiva y luego de la última pasa a
mostrar la primera.
Requiere tanto de CSS como Javascript.
Podemos opcionalmente activar dos botones a izquierda y

derecha para que el usuario pueda retroceder o avanzar
diapositivas. Además de unos pequeños indicadores para elegir
cualquiera de las imágenes.
Implementemos una página que muestre un "carousel" con tres

imágenes y los botones de desplazamiento:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
</head>
<body>
<div id="carousel1" class="carousel slide" data-bs-

ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carousel1" data-bs-slide-to="0"
class="active"></li>
<li data-bs-target="#carousel1" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel1" data-bs-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="https://www.tutorialesprogramacionya.com/imagenes/cuad
ro1.jpg" alt="">
<div class="carousel-caption">
<h3>título 1</h3>
<p>Descripción de la imagen.</p>
</div>
</div>
<div class="carousel-item">
ro2.jpg" alt="">
<h3>título 2</h3>
</div>
</div>
<div class="carousel-item">
ro3.jpg" alt="">
<h3>título 3</h3>
</div>
</div>
</div>

<a class="carousel-control-prev" href="#carousel1" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel1" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
El div que contiene todos los elementos lo definimos con el

id="carousel1", este identificador debe ser el mismo indicado en
los "li" y las anclas:
<div id="carousel1" class="carousel slide" data-

ride="carousel">
A cada diapositiva la debemos encerrar en un div con la clase
"carousel-item", en esta caso disponemos una imagen que ocupe
todo el ancho de su contenedor (w-100) y se muestre en bloque
(d-block):
<div class="carousel-item active">

ro1.jpg" alt="">
<h3>título 1</h3>
</div>
</div>
Como vemos en un div interno a "carousel-item" podemos indicar
un título y descripción de la diapositiva.
23 - Componente: pagination
Para mostrar un paginador de datos muy común en

sitios web Bootstrap 5 nos provee de una clase llamada
"pagination" que debemos asignársela a una lista no ordenada de
HTML.
Las clases que debemos utilizar son:

 pagination (se aplica a un "ul")
 page-item (se aplica a cada "li")
 page-link (se aplica a cada "a")
Veamos en un ejemplo como implementamos la componente de

paginación:
<!doctype html>
<html>
<head>
</head>
<body>
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#"><</a></li>
href="#">1</a></li>
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
</div>
</body>
</html>
Podemos mostrar los enlaces más grandes o más pequeño
dependiendo si le agregamos las clases "pagination-sm" o
"pagination-lg":
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
href="#"><</a></li>
href="#">1</a></li>
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-sm">
href="#"><</a></li>
href="#">1</a></li>
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-lg">
href="#"><</a></li>
href="#">1</a></li>
<li class="page-item active"><a class="page-link"
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
</div>
</body>
</html>
Para indicar cual página está activa debemos agregar la clase

"active" a un "li":
<li class="page-item active"><a class="page-link" href="#">2

</a></li>
Alineamiento de la barra de paginación
Podemos alinear la barra de paginación agregando alguna de

estas tres clases al elemento "ul":
 justify-content-start
<!doctype html>
<html>
<head>
</head>
<body>
href="#"><</a></li>
href="#">1</a></li>
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-sm">
href="#"><</a></li>
href="#">1</a></li>
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-lg">
href="#"><</a></li>
href="#">1</a></li>
<li class="page-item active"><a class="page-link"
href="#">2</a></li>
href="#">3</a></li>
href="#">4</a></li>
href="#">5</a></li>
href="#">6</a></li>
href="#">></a></li>
</ul>
</div>
</body>
</html>
24 - Componente: progress
Otra herramienta que nos presenta el framework Bootstrap 5 son las barras
de progreso. Normalmente se las utiliza para indicar cuanto se ha avanzado
en una actividad.
Barra de progreso por defecto

Para crear una barra de progreso debemos definir un div con la clase
"progress" y un div interno al anterior con la clase "progress-bar":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="progress">
<div class="progress-bar" style="width:70%">
70%
</div>
</div>
</div>
</body>
</html>
Además de los dos div con las respectivas clases es obligatorio inicializar la
propiedad style indicando el porcentaje a mostrar en el avance.
Tenemos Como resultado:
Barra de progreso con colores contextuales

Podemos utilizar las clases:
 bg-success
 bg-info
 bg-warning
 bg-danger
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="progress mb-3">

<div class="progress-bar bg-success" style="width:70%">
70%
</div>
</div>

<div class="progress-bar bg-info" style="width:80%">
80%
</div>
</div>

<div class="progress-bar bg-warning" style="width:90%">
90%
</div>
</div>

<div class="progress-bar bg-danger" style="width:95%">
95%
</div>
</div>
</div>
</body>
</html>
Barra de progreso a rayas

Podemos hacer que las barrar no tengan un color liso sino a rayas. Para esto
añadimos al div interno la clase "progress-bar-striped":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="progress-bar progress-bar-striped bg-success"
style="width:70%">
70%
</div>
</div>
</div>
</body>
</html>
Podemos inclusive animar la barra de progreso añadiendo la clase "progress-

bar-animated":
<div class="progress-bar progress-bar-striped bg-success progress-bar-
animated" style="width:70%">
70%
</div>
</div>
Barra de progreso compuesta

Podemos crear una barra de progreso que esté constituida por varias barras
que en su conjunto forman la barra total.
Para este planteo debemos disponer una serie de div internos al div principal:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="progress-bar bg-success"
style="width:30%">Correcto</div>
<div class="progress-bar bg-warning"
style="width:30%">Cuidado</div>
<div class="progress-bar bg-danger"
style="width:20%">Peligro</div>
</div>
</div>
</body>
</html>
Alto de la barra de progreso

Debemos definir la regla de estilo "height" para la altura de la barra de ser
necesario (en el div principal):
<div class="progress mb-3" style="height:2rem">
<div class="progress-bar progress-bar-striped bg-success progress-bar-
animated" style="width:70%">
70%
</div>
</div>
25 - Componente: dropdown (lista desplegable)

Una lista desplegable es una interfaz visual que al ser presionada
muestra una lista de opciones que puede elegir el visitante.
La funcionalidad de los dropdowns o listas desplegables se logra gracias a
Javascript, por lo que no debemos olvidar de agregar el archivo
bootstrap.bundle.min.js
Veamos el código para implementar una lista desplegable básica:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
id="dropdown1" data-bs-toggle="dropdown">
Buscadores
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="http://www.google.com">Google</a>
<a class="dropdown-item" href="http://www.bing.com">Bing</a>
<a class="dropdown-item" href="http://www.yahoo.com">Yahoo</a>
</div>
</div>
</div>
</body>
</html>
Cuando la lista desplegable se encuentra cerrada tiene una interfaz similar a

esta:
Cuando el usuario la presiona se despliegan las opciones ocultas:

El div principal debe definir la clase "dropdown":
Dentro de este div disponemos un "button" que debe agregar a parte de las
clases que conocemos btn, btn-primary la clase dropdown-toggle. Debemos
definir la propiedad id con un nombre:
<button class="btn btn-primary dropdown-toggle" type="button" id="dropd

own1" data-bs-toggle="dropdown">
Buscadores
</button>
La lista de opciones que se mostrarán deben estar agrupadas en un div con

la clase "dropdown-menu", y las opciones son anclas que deben tener
definida la clase "dropdown-item":
</div>
Línea separadora entre opciones.

Si queremos que haya una línea separadora entre opciones debemos
agregar un div vacío con la clase "dropdown-divider":
<div class="dropdown-divider"></div>
</div>
El aspecto de la línea separadora es:
Tamaño de la lista desplegable.

Para definir el tamaño del dropdown lo hacemos indicando el tamaño del
botón: btn-sm, btn-lg o el tamaño por defecto visto en el ejercicio anterior:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>

<button class="btn btn-primary btn-sm dropdown-toggle"
type="button" id="dropdown1" data-bs-toggle="dropdown">
Buscadores
</button>
</div>
</div>
<br>
Buscadores
</button>
</div>
</div>
<br>
<button class="btn btn-primary btn-lg dropdown-toggle"
type="button" id="dropdown3" data-bs-toggle="dropdown">
Buscadores
</button>
</div>
</div>
<br>
</div>
</body>
</html>
El aspecto de los tres tamaños:
Despliegue hacia arriba.
Si queremos que la lista desplegable se muestre hacia arriba (en el caso que
haya espacio) debemos cambiar el div principal por la clase: "dropup":
<div class="container" style="margin-top:12rem;">
<div class="dropup">
<button class="btn btn-primary btn dropdown-toggle" type="button"
Buscadores
</button>
</div>
</div>
</div>
Luego se muestra:
Encabezado informativo en la lista desplegable.

Podemos agregar un div dentro de las opciones con un mensaje informativo.
Para esto agregamos la clase "dropdown-header":
Buscadores
</button>
<div class="dropdown-header">Buscadores más populares</div>
</div>
</div>
Luego se muestra:
Deshabilitar opciones de la lista.

Debemos agregar la clase "disabled" a la opción que no queremos que sea
seleccionable:
<a class="dropdown-item disabled" href="http://www.yahoo.com">Yahoo

</a>
Luego se muestra:
Lista desplegable a izquierda o derecha.

Podemos utilizar una presentación alternativa de la lista desplegable
mostrando la misma a la izquierda o derecha del dropdown.
Para que se muestra a la izquierda debemos fijar el div con las dos clases:
btn-group dropstart
Para que se muestra a la derecha debemos fijar el div con las dos clases: btn-
group dropend.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>

<div class="row justify-content-center">
<div class="col-6">
<div class="btn-group dropstart">
Buscadores
</button>
<a class="dropdown-item"
href="http://www.google.com">Google</a>
<a class="dropdown-item disabled"
href="http://www.yahoo.com">Yahoo</a>
</div>
</div>
<div class="btn-group dropend">
Buscadores
</button>
href="http://www.bing.com">Bing</a>
<a class="dropdown-item disabled"
href="http://www.yahoo.com">Yahoo</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Luego si seleccionamos el que debe mostrarse a derecha:
Lista desplegable con un formulario.

Una variante es disponer un formulario en vez de una lista de opciones dentro
del dropdown.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min
.css" rel="stylesheet">
</head>
<body>
Login
</button>
<form class="ps-4 pe-4">
<div class="mb-3">
<label for="nombre" class="form-label">Ingrese su
nombre:</label>
name="nombre">
</div>
<div class="mb-3">
<label for="clave" class="form-label">Ingrese su
clave:</label>
name="clave">
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundl
e.min.js"></script>
</body>
</html>
Luego en el navegador cuando presionamos el dropdown se muestra el
formulario:
Las clases ps-4 pe-4 definen un padding-left y padding-right de 1.5rem para
que los controles de formulario no salgan pegados a los bordes.
Split Button.
Con esta variante solo se desplega el menú cuando se presiona un pequeño
botón de la derecha:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<button type="button" class="btn btn-danger">Buscadores</button>
<button type="button" class="btn btn-danger dropdown-toggle
dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
</div>
</div>
</div>
</body>
</html>
Luego en el navegador cuando presionamos el botón de la derecha tenemos:
Lista desplegable oscura.
Para que la lista desplegable se muestre oscura debemos agregar la clase
'dropdown-menu-dark':
<div class="dropdown-menu dropdown-menu-dark">
Teniendo como resultado:
26 - Componente: collapse
La componente collapse permite mostrar u ocultar el contenido de un
"div" cuando se presiona un botón o ancla.
Para su funcionamiento requiere importar la librería de Javascript.
La clase involucrada para su funcionamiento se llama "collapse".
Veamos una página que cuando se presiona un hipervínculo se muestra un
recuadro con un texto.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<a href="#politica" data-bs-toggle="collapse">Políticas de
privacidad</a>
<div id="politica" class="collapse">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
</div>
</body>
</html>
El hipervínculo debe definir la propiedad data-bs-toggle con el valor "collapse"

y la propiedad href con el id definido en el div más el caracter #:
<a href="#politica" data-bs-toggle="collapse">Políticas de privacidad</

a>
Luego el div que inicialmente se encuentra oculto debe tener definidas las
propiedades "id" y la clase "collapse":

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu
smod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita
tion ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v
oluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proide
nt, sunt in culpa qui officia deserunt
</div>
Antes de presionarse el hipervínculo tenemos en el navegador:
Y luego de presionarse el hipervínculo se muestra todo el contenido del div

oculto:
Si necesitamos que cuando carga la página el contenido del div esté visible y
que eventualmente el visitante lo pueda ocultar debemos agregar la clase
"show":
<div id="politica" class="collapse show">
Para la apertura o cerrado del div podemos utilizar la etiqueta "button" en

lugar del ancla:
<button class="btn btn-warning" href="#politica" data-bs-
toggle="collapse">Políticas de privacidad</button>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
</div>
</div>
Como resultado tenemos:
Múltiples áreas
Podemos mostrar y ocultar varias áreas:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<p>
<a href="#area1" data-bs-toggle="collapse" data-bs-
target="#area1">Area 1</a>
<a href="#area2" data-bs-toggle="collapse" data-bs-
target="#area2">Area 2</a>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="area1">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed erat. Pellentesque
nulla dui, congue
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="area2">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed erat. Pellentesque
nulla dui, congue
</div>
</div>
</div>
</div>
</body>
</html
La propiedad data-bs-target="#area1" indica que área debe mostrar u ocultar.
27 - Componente: accordion
En Bootstrap 5 disponemos de una componente llamada "accordion"
que básicamente muestra una serie de enlaces que ocultan contenido.
Cuando se presiona un hipervínculo se muestra el contenido para dicho
enlace, luego cuando se presiona otro enlace se oculta el actual y se abre el
nuevo.
Es muy utilizado en la web en sitios sobre "preguntas frecuentes","políticas
de privacidad", "descripción de características de productos" etc.
Veamos un ejemplo con la componente "accordion":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div id="accordion1">
<div class="accordion-item">
<div class="accordion-header" id="cabecera1">
<h5 class="mb-0">
<button class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#respuesta1" aria-expanded="true"
aria-controls="respuesta1">
Pregunta frecuente 1
</button>
</h5>
</div>
<div id="respuesta1" class="accordion-collapse collapse show"
aria-labelledby="cabecera1" data-bs-parent="#accordion1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
</div>
</div>
</div>
<h5 class="mb-0">
</button>
</h5>
</div>
<div id="respuesta2" class="accordion-collapse collapse" aria-
labelledby="cabecera2" data-bs-parent="#accordion1">
</div>
</div>
</div>
<h5 class="mb-0">
</button>
</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
El div principal define un id con un nombre único, en nuestro ejemplo lo

llamamos "accordion1":
Utilizamos la clase "accordion-item" para definir cada una de las partes del
acordeón (el div oculto si define la clase accordion-collapse, luego collapse y
show si se muestra inmediatamente). Para la cabecera empleamos la clase
accordion-header y el botón de tipo accordion-button:
<h5 class="mb-0">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-
target="#respuesta1" aria-expanded="true"
</button>
</h5>
</div>
<div id="respuesta1" class="accordion-collapse collapse show" aria-
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
</div>
</div>
</div>
Contenido abierto.
Debemos omitir el atributo data-bs-parent en cada uno de los item del
accordion para que los elementos de acordeón permanezcan abiertos cuando
se abre otro elemento:
<div id="respuesta1" class="accordion-collapse collapse show" aria-

labelledby="cabecera1">
28 - Componente: breadcrumb
Breadcrumb significa "migas de pan" y su nombre tiene origen en el
cuento de "pulgarcito" donde dicho personaje dejaba migas de pan para
recordar el camino de regreso.
En la web breadcrumb son una lista de enlaces jerárquicos desde la página
principal hasta la página que estamos visitando. Por ejemplo un "breadrumb"
de un sitio le lenguajes de programación podría ser:
Con esto estamos significando que la página principal es "Diseño web",

dentro de esta hay una sección "CSS" y finalmente la página donde nos
encontramos es "Bootstrap 5".
Como vemos la sección actual no es un hipervínculo y las otras si lo son para
que fácilmente el usuario pueda regresar a la sección principal o
subsecciones.
Veamos un "breadcrumb" implementado con Bootstrap 5:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min
.css" rel="stylesheet"
integrity="sha384-
wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous">
</head>
<body>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Diseño web</a></li>
<li class="breadcrumb-item"><a href="#">CSS</a></li>
<li class="breadcrumb-item active">Bootstrap 5</li>
</ol>
</div>
</body>
</html>
Utilizamos la etiqueta HTML "ol" a la cual le definimos la clase "breadcrumb".

Luego cada una de las etiquetas "li" la fijamos con la clase "breadcrumb-item
y en su interior un enlace que apuntará a la sección respectiva del sitio.
El último "li" además le agregamos la clase "active" y no disponemos un
hipervínculo ya que no encontramos posicionados en dicha sección.
Si queremos utilizar otro separador debemos implementar el siguiente código:
<nav style="--bs-breadcrumb-divider: '>'">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Diseño web</a></li>
<li class="breadcrumb-item"><a href="#">CSS</a></li>
<li class="breadcrumb-item active">Bootstrap 5</li>
</ol>
</nav>
</div>
Ahora el separador será el caracter '>'.
29 - Componente: badge
Un badge (distintivo o insignia) es una pequeña etiqueta que se agrega
a otras componentes para mostrar un pequeño mensaje o contador.
Ejemplos visuales de badges son:
Un botón con un badge:
Un badge aplicado a un elemento de un control de tipo accordion:
Veamos como implementamos un "badge" en una página:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h1>Tutorial de Bootstrap 5 <span class="badge bg-
warning">Nuevo</span></h1>
<button type="button" class="btn btn-primary">
Mensajes<span class="badge bg-danger ms-1">4</span>
</button>
</div>
</body>
</html>
Un badge dentro de un título lo agregamos mediante la etiqueta "span" y le

asociamos las clases badge y alguno tipo de badge contextual:
<h1>Tutorial de Bootstrap 5 <span class="badge badge-
De forma similar asociamos un badge a un botón:
Mensajes<span class="badge badge-light ml-1">4</span>
</button>
Para que el badge no aparezca pegado al texto del botón definimos un
margen con la clase "ms-1".
Badges en forma de píldoras.

Si queremos que los badges aparezcan con forma de píldoras, es decir con
los vértices redondeados debemos agregar la clase "badge-pill" a la etiqueta
"span".
Como resultado en el navegador tenemos:
El código solo cambia que debemos agregar la clase "badge-pill":

<h1>Tutorial de Bootstrap 5 <span class="badge rounded-pill bg-
Mensajes<span class="badge bg-primary">4</span>
</button>
</div>
30 - Componente: nav (básica)

Para crear un simple menú horizontal en Bootstrap 5 disponemos de la clase
"nav", podemos asignar dicha clase a un elemento HTML: nav, ul, div etc. Si
queremos respetar el concepto semántico de un menú de navegación es más
conveniente utilizar la etiqueta nav.
Las dos clases básicas que debemos utilizar para definir un menú de
navegación son:
 nav
 nav-link
Vemos un menú de navegación básico implementado con la clase "nav":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="nav">
<a class="nav-link disabled" href="#">Opción 5</a>
</nav>
</div>
</body>
</html>
En el navegador se muestra:
El menú de navegación dispone de 5 enlaces y el quinto se muestra desactivo

debido a la clase disabled.
Alineación de las opciones.

A la etiqueta HTML "nav" le podemos agregar alguna de las siguientes clases
para que las opciones aparezcan alineadas:
 justify-content-start (valor por defecto de la clase "nav")
 justify-content-between
 justify-content-around
Empleadas estas clases en una página:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<h2>justify-content-end</h2>
<nav class="nav justify-content-end">
</nav>
<hr>
<h2>justify-content-start</h2>
<nav class="nav justify-content-start">
</nav>
<hr>
<h2>justify-content-center</h2>
<nav class="nav justify-content-center">
</nav>
<hr>
<h2>justify-content-between</h2>
<nav class="nav justify-content-between">
</nav>
<hr>
<h2>justify-content-around</h2>
<nav class="nav justify-content-around">
</nav>
</div>
</body>
</html>
En el navegador tenemos el siguiente resultado:
Menú vertical.
Para mostrar las opciones una debajo del la otra debemos agregar la clase
"flex-column" a la etiqueta HTML "nav":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="nav flex-column">
</nav>
</div>
</body>
</html>
1 - Componente: nav (vista de pestañas o pastillas)
Podemos fácilmente transformar nuestro menú de opciones a pestañas
agregando la clase "nav-tabs", de forma similar si queremos que se muestren
como pastillas debemos emplear en su lugar la clase "nav-pills".
Veamos un ejemplo que muestre un menú con pestañas, mostrando la
segunda opción activa:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="nav nav-tabs mt-2">
<a class="nav-link active" href="#">Opción 2</a>
</nav>
</div>
</body>
</html>
Agregamos la clase mt-2 para dar un margen superior y evitar que salga
pegado.
Si cambiamos la clase "nav-tabs" por la clase "nav-pills" el resultado visual
será:
Con opciones que ocupan todo el contenedor.

Si queremos que las opciones ocupen todo el contenedor debemos agregar
a la etiqueta HTML "nav" la clase "nav-justified" y a cada uno de los
hipervínculos la clase "nav-item":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<nav class="nav nav-pills mt-2">
</nav>
</div>
</body>
</html>
2 - Componente: nav (con elementos de tipo dropdown)

Hemos visto que la componente "nav" nos permite definir una serie de
hipervínculos. Ahora veremos que en lugar de alguno de esos hipervínculos
podemos disponer una o más componentes de tipo "dropdown" que vimos en

conceptos anteriores.
Recordemos que las componentes de tipo "dropdown" (listas desplegables)
requieren el archivo de Javascript propuesto por Bootstrap 4.
Un ejemplo para ver la sintaxis de un menú horizontal con una opción de tipo
"dropdown":
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<ul class="nav mt-2">
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#">Buscadores</a>
</div>
</li>
</li>
</li>
</ul>
</div>
</body>
</html>

Utilizamos la etiqueta HTML "ul":
<ul class="nav mt-2">
Cada opción es un "li" con la clase "nav-item":
Los enlaces agregan la clase "nav-link":
El menú desplegable (dropdown) también es un "li" que le definimos las

clases "nav-item" y "dropdown":
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#">Buscadores</a>
</div>
</li>
3 - Componente: nav (con contenido para cada opción)

Una funcionalidad más compleja que podemos utilizar para los menús
con pestañas o píldoras es asociarle un div con contenido.
Solo se muestra la información de la opción seleccionada. Mediante
Javascript Bootstrap 5 resuelve el problema de hacer visible el div de la
opción que se selecciona y ocultar la otra.
Veamos un ejemplo con tres pestañas que muestran distintos contenidos al
ser presionados:
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<ul class="nav nav-tabs mt-3">
<a class="nav-link active" data-bs-toggle="tab" href="#opcion1"
>Opción 1</a>
</li>
<a class="nav-link" data-bs-toggle="tab" href="#opcion2">Opción
2</a>
</li>
<a class="nav-link" data-bs-toggle="tab" href="#opcion3">Opción
3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="opcion1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
vestibulum magna vitae
lectus iaculis ultricies. Donec nibh massa, ornare eget diam et,
mattis sodales augue.
Etiam tempus turpis id tellus vehicula egestas efficitur a nisi.
Pellentesque eget justo
tellus. Vivamus hendrerit leo neque, et sagittis lorem blandit sed.
Cras fringilla lorem
libero, a tempus lorem iaculis ut. Mauris ex purus, porta vitae
tristique consectetur,
posuere quis nibh. In ut laoreet nisi. Etiam elementum eget justo
in hendrerit. Morbi ut
orci a nisi porta vulputate non a libero. Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Praesent malesuada lorem arcu, convallis
scelerisque turpis dignissim quis.
</div>
<div class="tab-pane fade" id="opcion2" >
Cras non purus urna. Vestibulum nec felis felis. Quisque luctus
vehicula ipsum,
id pellentesque nulla luctus at. Maecenas ut sodales velit. Sed
orci leo, consequat
in lacus ac, pulvinar ullamcorper ex. Cras vulputate vel tortor
eget posuere.
Quisque sit amet metus sed urna ultrices placerat eu a nunc.
</div>
<div class="tab-pane fade" id="opcion3">
Etiam congue, metus eu ultricies euismod, est magna condimentum
sem, eget commodo
elit nisl id sapien. Proin sodales accumsan nulla non molestie.
Nulla tempus
congue arcu, a sagittis ante dapibus vitae. Proin tincidunt
tincidunt accumsan.
Morbi pretium venenatis tempor. Sed sollicitudin ante odio, non
commodo eros
egestas et. Nulla efficitur eros non quam vestibulum feugiat.
Aliquam libero magna,
dignissim id dapibus eget, posuere eu nibh.
</div>
</div>
</div>
</body>
</html>
En el navegador tenemos el siguiente resultado cuando está seleccionada
la primera opción:
Y cuando seleccionamos la segunda opción cambia el contenido que se
muestra:
Definimos una lista no ordenada (ul) con las clases "nav" y "nav-tabs":
<ul class="nav nav-tabs mt-3">
Cada "li" debe agregar la clase "nav-item" y el ancla contenida debe definir la
propiedad data-bs-toggle con el valor "tab" y la propiedad href con un valor
que debe coincidir con el div definido más abajo:
<a class="nav-link active" data-bs-toggle="tab" href="#opcion1" >Opc
ión 1</a>
</li>
De forma similar definimos las otras pestañas:
<a class="nav-link" data-bs-toggle="tab" href="#opcion2">Opción 2</a
>
</li>
<a class="nav-link" data-bs-toggle="tab" href="#opcion3">Opción 3</a
>
</li>
</ul>
Luego debemos declarar un div con la clase "tab-content" y dentro de este

div tantos div como pestañas tenga nuestro menú definiendo la propiedad id
con los valores iniciados en la propiedad href de las anclas, además a cada
div debemos inicializarlos con la clase "tab-pane":
...
</div>
...
</div>
...
</div>
</div>
Una pequeña variante es utilizar la clase "nav-pills" en lugar de "nav-tabs":
Menú vertical y panel de contenido en la misma fila.

Podemos utilizar el sistema de grillas de Bootstrap 4 para hacer variantes de
las barras de navegación. Por ejemplo dispondremos el menú de navegación
en forma vertical en una columna y en otra el contenido de cada una de las
opciones.
<!doctype html>
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<div class="row">
<div class="col-3">
<ul class="nav flex-column nav-pills">
<a class="nav-link active" data-bs-toggle="tab"
href="#opcion1" >Opción 1</a>
</li>
<a class="nav-link" data-bs-toggle="tab"
href="#opcion2">Opción 2</a>
</li>
<a class="nav-link" data-bs-toggle="tab"
href="#opcion3">Opción 3</a>
</li>
</ul>
</div>
<div class="col-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
vestibulum magna vitae
lectus iaculis ultricies. Donec nibh massa, ornare eget diam et,
mattis sodales augue.
Etiam tempus turpis id tellus vehicula egestas efficitur a nisi.
Pellentesque eget justo
tellus. Vivamus hendrerit leo neque, et sagittis lorem blandit
sed. Cras fringilla lorem
libero, a tempus lorem iaculis ut. Mauris ex purus, porta vitae
tristique consectetur,
posuere quis nibh. In ut laoreet nisi. Etiam elementum eget justo
in hendrerit. Morbi ut
orci a nisi porta vulputate non a libero. Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Praesent malesuada lorem arcu, convallis
scelerisque turpis dignissim quis.
</div>
Cras non purus urna. Vestibulum nec felis felis. Quisque luctus
vehicula ipsum,
id pellentesque nulla luctus at. Maecenas ut sodales velit. Sed
orci leo, consequat
in lacus ac, pulvinar ullamcorper ex. Cras vulputate vel tortor
eget posuere.
Quisque sit amet metus sed urna ultrices placerat eu a nunc.
</div>
Etiam congue, metus eu ultricies euismod, est magna condimentum
sem, eget commodo
elit nisl id sapien. Proin sodales accumsan nulla non molestie.
Nulla tempus
congue arcu, a sagittis ante dapibus vitae. Proin tincidunt
tincidunt accumsan.
Morbi pretium venenatis tempor. Sed sollicitudin ante odio, non
commodo eros
egestas et. Nulla efficitur eros non quam vestibulum feugiat.
Aliquam libero magna,
dignissim id dapibus eget, posuere eu nibh.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
31 - Componente: Scrollspy
Bootstrap 5 nos provee la posibilidad que según en que parte de la página
nos encontremos se ilumine la opción de dicha sección.
Se requiere para su funcionamiento tener importada la librería de Javascript.
Problema
Implementaremos una página que tenga un menú de navegación fijo en la
parte superior de la página con los enlaces "card", "form" y "accordion".
Cuando se presione alguno de los hipervínculos saltaremos a la sección que
muestra un ejemplo de dicha componente.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body data-spy="scroll">
<nav id="menu1" class="navbar navbar-expand-sm navbar-dark bg-dark
fixed-top">

<a class="nav-link" href="#seccion1">card</a>
</li>
<a class="nav-link" href="#seccion2">form</a>
</li>
<a class="nav-link" href="#seccion3">accordion</a>
</li>
</ul>
</nav>


<div id="seccion1" style="min-height:100vh; padding-top:70px">
<div class="row">
<div class="card">
</div>
</div>
</div>
<div class="card">
</div>
<img class="card-img-bottom"
</div>
</div>
</div>
</div>

<h1>Contacto</h1>
<form>
<div class="mb-3">
nombre:</label>
name="nombre">
</div>
<div class="mb-3">
name="clave">
</div>
</form>
</div>

<h1>Prueba de accordion</h1>
<h5 class="mb-0">
data-bs-target="#respuesta1"
aria-expanded="true" aria-controls="respuesta1">
</button>
</h5>
</div>
<div id="respuesta1" class="accordion-collapse collapse show"
aria-labelledby="cabecera1"
data-bs-parent="#accordion1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt
</div>
</div>
</div>
<h5 class="mb-0">
</button>
</h5>
</div>
labelledby="cabecera2"
</div>
</div>
</div>
<h5 class="mb-0">
</button>
</h5>
</div>
labelledby="cabecera3"
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Todo el contenido está en la misma página y lo que hacemos con los enlaces
es desplazarnos hasta la sección respectiva.
Si seleccionamos la primera opción:
Luego cuando seleccionamos la segunda opción:

Y cuando seleccionamos la tercera opción se desplaza y aparece:
Si nos desplazamos con la barra de scroll veremos que según en que sección
estamos la opción del menú se activa.
Cada sección tiene que definir una propiedad id con el mismo valor que
almacenamos en la propiedad href del menú:
El padding-top lo definimos ya que el menú es fijo y evitamos que datos de la

sección no se muestren. Con la propiedad min-height con el valor 100vh
estamos indicando que en la pantalla solo se muestre este div (es decir que
ocupe el 100% el alto del dispositivo) y no otro que se encuentre más abajo.
Para que funcione esta componente debemos iniciar la propiedad data-bs-
spy con el valor "scroll":
<body data-bs-spy="scroll">
32 - Componente: Tooltips
La componente Tooltip muestra un pequeño mensaje cuando el usuario se
desplaza con la flecha del mouse sobre un elemento HTML que se le ha
configurado un Tooltip.
Para trabajar con esta componente además de importar el archivo CSS,
debemos importar el archivo de Javascript.
Problema
Mostrar tres botones a sitios de buscadores. Mostrar un mensaje cuando la
flecha del mouse se encuentra encima de botón.
<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<a data-bs-toggle="mensaje" title="Google Inc."
href="https://www.google.com" class="btn btn-success">Google</a>
<a data-bs-toggle="mensaje" title="Microsoft"
href="https://www.bing.com" class="btn btn-success ms-2">Bing</a>
<a data-bs-toggle="mensaje" title="Yahoo Inc"
href="https://www.yahoo.com" class="btn btn-success ms-2">Yahoo</a>
</div>
<script>
var tooltipTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="mensaje"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl)
{
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
Cuando pasamos la flecha del mouse sobre la etiqueta HTML:
Debemos luego de importar el archivo JS agregar:
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-b
s-toggle="mensaje"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Agregamos en cada elemento HTML la propiedad 'data-bs-toggle' con un
valor que se hace referencia luego en el bloque de Javascript al final, el
mensaje que aparece es el fijado en la propiedad title:
<a data-bs-toggle="mensaje" title="Google Inc." href="https://www.google.

com" class="btn btn-success">Google</a>
Posicionamiento del mensaje.

Podemos inicializar la propiedad 'data-bs-placement' indicando si queremos
que el mensaje aparezca:
top
bottom
left
right
Mensaje con formato.

Podemos utilizar etiquetas HTML para dar formato al mensaje, para esto
debemos inicializar la propiedad 'data-bs-html' con el valor 'true' y luego
especificar en la propiedad 'title' el mensaje a mostrar empleando etiquetas
HTML en su interior:
<a data-bs-toggle="mensaje" data-bs-html="true" title="<em>G</em><b>oogle

</b>"
href="https://www.google.com" class="btn btn-success">Google
</a>
33 - Componente: Popover
La componente Popover es similar a Tooltips con la diferencia que su
contenido se presenta cuando se hace clic generalmente sobre un ancla.
Para trabajar con esta componente además de importar el archivo CSS
necesitamos importar el archivo Javascript.
Debemos agregar el siguiente código Javascript en la página:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-to

ggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Podemos posicionar el Popover asignando un valor a la propiedad 'data-bs-

placement':
top
bottom
left
right
Un ejemplo para conocer su sintaxis:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<a href="#" data-bs-toggle="popover" title="Historia de Google" data-
bs-trigger="focus"
data-bs-content="Larry Page y Sergey Brin comenzaron Google como un
proyecto universitario en enero de 1996 cuando ambos eran estudiantes de
posgrado en ciencias de la computación en la Universidad de
Stanford.">Google</a>
<a href="#" data-bs-toggle="popover" title="Historia de Yahoo" data-
bs-trigger="focus"
data-bs-content="Yahoo! inicialmente recibió el nombre de 'ulices
b' (La guía de Jerry para la World Wide Web), Su nombre proviene de unos
personajes del libro Los viajes de Gulliver">Yahoo</a>
<a href="#" data-bs-toggle="popover" title="Historia de Bing" data-
bs-trigger="focus"
data-bs-content="Bing (anteriormente Live Search, Windows Live
Search y MSN Search) es un buscador web de Microsoft. Presentado por el
antiguo director ejecutivo de Microsoft, Steve Ballmer, el 28 de mayo de
2009">Bing</a>
</div>
<script>
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl)
{
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
En el navegador tenemos como resultado al presionar un ancla:
La propiedad 'data-bs-trigger' si se inicializa con 'focus' luego cuando el

operador presiona en cualquier parte de la pantalla el mensaje se oculta. Si
no inicializamos esta propiedad para cerrar el mensaje debemos presionar
nuevamente en el elemento HTML que abrió el Popover:
data-bs-trigger="focus"
34 - Componente: Offcanvas
La componente Offcanvas permite crear una barra lateral oculta que se hará
visible cuando se dispare un evento. Muy útil en dispositivos móviles donde
tenemos poco espacio en pantalla.
Offcanvas es un componente de la barra lateral que se puede alternar a través
de JavaScript para que aparezca desde el borde izquierdo, derecho, superior
o inferior de la ventana del navegador.
Comparten muchas similitudes con los diálogos que dispone Bootstrap, igual
que los diálogos solo se puede mostrar una componente Offcanvas a la vez.
Veamos un ejemplo para su implementación:
El código necesario es:

<!doctype html>
<html>
<head>
shrink-to-fit=no">
</head>
<body>
<a class="btn btn-primary" data-bs-toggle="offcanvas"

href="#offcanvas1">
Login
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Login</h5>
<button type="button" class="btn-close text-reset" data-bs-
dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<form>
<div class="mb-3">
nombre:</label>
name="nombre">
</div>
<div class="mb-3">
<label for="clave" class="form-label">Ingrese su
clave:</label>
name="clave">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Mediante la clase 'offcanvas' creamos este panel oculto, que en este caso
aparece de izquierda a derecha gracias a la clase 'offcanvas-start':
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1">
Definimos una cabecera mediante la clase 'offcanvas-header':
<div class="offcanvas-header">
En la cabecera definimos un botón que será la cruz para cerrar el panel:
<button type="button" class="btn-close text-reset" data-bs-dismiss="o

ffcanvas"></button>
Por otro lado mediante la clase 'offcanvas-body' definimos el área donde

dispondremos los distintos controles visuales que se deben mostrar cuando
el offcanvas se encuentre visible (En nuestro ejemplo disponemos un
formulario de login):
<div class="offcanvas-body">
<form>
<div class="mb-3">
name="nombre">
</div>
<div class="mb-3">
name="clave">
</div>
</form>
</div>
Podemos utilizar las clases:
 offcanvas-start
aparece de izquierda a derecha
 offcanvas-end
aparece de derecha a izquierda
 offcanvas-top
aparece de arriba hacia abajo
 offcanvas-bottom
aparece de abajo hacia arriba
35 - Componente: Spinner
La componente Spinner nos permite mostrar el estado de carga de una
página o sección de una página mediante un gráfico animado.
No requiere Javascript para su funcionamiento.
Las clases que intervienen para mostrar un Spinner y su sintaxis es:
<div class="spinner-border text-primary">
<span class="visually-hidden">Loading...</span>
</div>
Luego tenemos la siguiente animación en la página:
<div class="spinner-grow text-primary">

<span class="visually-hidden">Cargando</span>
</div>
<div class="spinner-grow text-secondary">
</div>
<div class="spinner-grow text-success">
</div>
<div class="spinner-grow text-danger">
</div>
<div class="spinner-grow text-warning">
</div>
<div class="spinner-grow text-info">
</div>
<div class="spinner-grow text-light">
</div>
<div class="spinner-grow text-dark">
</div>
<div class="d-flex justify-content-start m-4 text-primary">

<div class="spinner-border">
</div>
</div>
<div class="d-flex justify-content-center m-4 text-danger">
</div>
</div>
<div class="d-flex justify-content-end m-4 text-warning">
</div>
</div>

Bootstrap 5 Ya

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bootstrap 5 Ya

Cargado por

Copyright:

Formatos disponibles

INDICE

1 - ¿Qué es Bootstrap? .................................................................................................. 3

<!-- Si utilizamos componentes de Bootstrap que requieran Javascript

En lugar de cargar el archivo "bootstrap.min.css" de nuestro servidor, lo

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="styleshee

Las ventajas de utilizar esta forma de cargar el framework Bootstrap 5 es:

 Reduce la carga de nuestros servidores (importante si utilizamos un

 Facilita que Bootstap 5 quede en caché del navegador y se vuelva a

 Reducción de costos de nuestros servidores por requerir menor ancho

Como desventaja podríamos decir:

 Esta la posibilidad que el servidor donde se aloja Bootstrap 5 se caiga,

Más adelante veremos componentes de Bootstrap 5 que si las utilizamos

3 - Sistema de grillas de Bootstrap 5

Lo más importante de entender en un principio es el sistema de grillas

Donde aparece el asterisco lo remplazamos por un valor entre 1 y 12 (en

Probemos ahora de empezar a disminuir el ancho del navegador mediante el

Lo mismo sucederá cuando utilicemos "col-lg-*" y reduzcamos los 992px:

4 - Múltiples reglas a las columnas de una fila

Si queremos que una página se muestre de forma diferente si la

Pantalla muy,muy grande: 10 unidades 2 unidades

Luego el código de la página queda definido:

Es decir podemos asignar múltiples reglas a un div de una columna, actuará

En un dispositivo muy grande >=1200:

En un dispositivo mediano >=768:

En un dispositivo pequeño >=576:

Y en un dispositivo muy pequeño <=576:

5 - Contenedor: clases container y containter-fluid

Cuando implementamos un contenedor podemos utilizar un:

Y si se trata de un contenedor fluido luego utilizamos la clase container-fluid:

Cuando modificamos el ancho del navegador podemos ver como el primer

6 - Columnas de diseño automático

Vimos en conceptos anteriores que en Bootstrap disponemos de 12

La sintaxis en un ejemplo con filas que tienen 3 columnas con la misma

<div class="col" style="background-color:#aaa">

<div class="col-4" style="background-color:#aaa">

<div class="col-lg" style="background-color:#aaa">

El resultado de cargar esta página en el navegador con más de 992px de

Definición con un valor fijo para una columna.

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

Podemos comprobar que en el navegador que la columna primera obtiene

7 - Alineamiento vertical de las columnas

Bootstrap 5 trae la posibilidad de alinear las columnas en forma vertical.

Debemos agregar la clase "align-items-start" al div que define la clase "row":

<div class="row align-items-start" style="height: 300px; background-

El resultado en el navegador es:

Finalmente podemos fijar con el valor "align-items-end" dando como

<div class="row" style="height: 300px; background-color:#dd0">

En el navegador tenemos como resultado:

8 - Alineamiento horizontal de las columnas

Esta posibilidad de alinear las columnas se puede presentar si no

En el navegador obtenemos como resultado:

Las 5 formas de alineación se logran mediante las clases:

9 - Varias líneas en una misma fila "row"

Con Bootstrap 5 tenemos la posibilidad de que en una fila definida por

10 - Reordenar las columnas en una fila

Por defecto el orden que indicamos los div de las columnas en el

Podemos ver luego en el navegador que la columna 3 aparece primero:

El reordenamiento se puede aplicar para los distintos tamaños de pantalla,

Recuerde que el asterisco representa un valor entre 1 y 12.

Otro tema perfectamente resuelto por Bootstrap 5 es el anidamiento

Lo importante es analizar la segunda columna donde vemos que insertamos

Podemos observar que la segunda columna contiene a su vez otras dos

También podemos ver que si reducimos el ancho del navegador colapsan