Esta es mi propia guía de Bootstrap con los elementos que utilizo con más frecuencia, si le llega a otra persona y le resulta de interés pues mucho mejor. En esta página están las diferencias entre Bootstrap 4 y Bootstrap 5.
Embed youtube
Embed youtube en Bootstrap 4, código de ejemplo para cortar y pegar:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" alt="" title="YouTube video" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Embed youtube en Bootstrap 5, código de ejemplo para cortar y pegar:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Mostrar y ocultar contenido con bootstrap 5
Actualizado 15-Marzo-2021
Bootstrap 5, por el momento en su versión Alpha-2 ha añadido nuevas clases para el tamaño XXL.
Ocultar solo en xxl: d-xxl-none
Visible solo en xxl: d-none d-xxl-block
En Bootstrap 4 Las clases hidden-* and visible-*. Para mostrar y ocultar un elemento específico ahora se usa la clase d-* . A continuación muestro la conversión para aplicar de forma fácil.
Primero está el ejemplo en Bootstrap 3 y luego la convalidación a Boostrap 4 y 5, que es igual:
Mostrar/ocultar para un tamaño e inferior:
hidden-xs-down (hidden-xs)=d-none d-sm-blockhidden-sm-down (hidden-sm hidden-xs)=d-none d-md-blockhidden-md-down (hidden-md hidden-sm hidden-xs)=d-none d-lg-blockhidden-lg-down=d-none d-xl-blockhidden-xl-down(n/a 3.x) =d-none(igual que hidden)
Mostrar/ocultar para un tamaño y superior:
hidden-xs-up=d-none(igual que hidden)hidden-sm-up=d-sm-nonehidden-md-up=d-md-nonehidden-lg-up=d-lg-nonehidden-xl-up(n/a 3.x) =d-xl-none
Mostrar/ocultar para un único tamaño:
hidden-xs(solo) =d-none d-sm-block((igual quehidden-xs-down)hidden-sm(osolo) =d-block d-sm-none d-md-blockhidden-md(solo) =d-block d-md-none d-lg-blockhidden-lg(solo) =d-block d-lg-none d-xl-blockhidden-xl(n/a 3.x) =d-block d-xl-nonevisible-xs(solo) =d-block d-sm-nonevisible-sm(solo) =d-none d-sm-block d-md-nonevisible-md(solo) =d-none d-md-block d-lg-nonevisible-lg(solo) =d-none d-lg-block d-xl-nonevisible-xl(n/a 3.x) =d-none d-xl-block
Hay que tener en cuenta que el bloque d-*-block se puede remplazar con d-*-inline, d-*-flex, d-*-table-cell, d-*-table etc.. dependiendo del tipo de visualización del elemento. Lee más información en display classes.
Variables de color CSS
Bootstrap 5 incluye 21 variables de color en su código css. Las variables de color se encuentran dentro del archivo CSS de Bootstrap 5, tan solo cargas los colores que vas a necesitar.
Para usar el selector de CSS con la variable –bs-indigo, usa var (–bs-indigo).
Modificar las variables de color integradas de Bootstrap es una manera fácil de hacer coincidir los colores de su sitio web con las pautas de color de su identidad corporativa. .