Guía Bootstrap 5

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 que hidden-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. .

Aumenta la productividad con IA

Te ofrecemos una reunión inicial GRATIS para que podamos evaluar el estado de tu empresa. Detectamos los principales requisitos y hacemos una evaluación de posibles errores o barreras que limitan el crecimiento de tu negocio.