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-block
hidden-sm-down (hidden-sm hidden-xs)
=d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs)
=d-none d-lg-block
hidden-lg-down
=d-none d-xl-block
hidden-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-none
hidden-md-up
=d-md-none
hidden-lg-up
=d-lg-none
hidden-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-block
hidden-md
(solo) =d-block d-md-none d-lg-block
hidden-lg
(solo) =d-block d-lg-none d-xl-block
hidden-xl
(n/a 3.x) =d-block d-xl-none
visible-xs
(solo) =d-block d-sm-none
visible-sm
(solo) =d-none d-sm-block d-md-none
visible-md
(solo) =d-none d-md-block d-lg-none
visible-lg
(solo) =d-none d-lg-block d-xl-none
visible-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. .