Bootstrap 5 Components Code Snippet

Live demo

Notas

Contenedores:

• container: predeterminado
• container-fluid: menos márgenes
• container-{breakpoint}: ancho 100% hasta llegar al breakpoint

Float:

Útiles para alinear elementos hacia la izquierda o hacia la derecha.

• float-start
• float-end
• float-none

Grid:

• El máximo de columnas que tenemos disponibles son 12.
• Podemos distribuir este espacio en los tamaños de las columnas. Ej: col-6 | col-6 (ocuparían la mitad de la pantalla).

Columnas:

• Alineación:

• col align-self-start
• col align-self-center
• col align-self-end

• Espacios (offset): Permite saltear espacio de columnas. Ej: si quiero saltear una columna:

• col-4 offset-1

• col-4 ms-auto //coloca automáticamente las columnas hacia los extremos, sin dejar espacios.

Gutters:

Permite insertar espacios más específicos (de forma vertical u horizontal). Permite valores desde el 0 (sin espacio) hasta el 5 (máx.).

• gx-1 //horizontal
• gx-1 //vertical
• g-1 //ambos

Podemos especificar según el tipo de pantalla:

• gx-sm-0 gx-md-3 gx-lg-5

Espacios / Tamaños:

• p-3 //padding de 3, en todas las direcciones (max. 5)
• m-3 //margin de 3, en todas las direcciones (max. 5)

• mt-3 //margin top
• mb-3 //margin bottom
• my-3 //margen hacia arriba y hacia abajo
• ms-3 //margin start (left)
• me-3 //margin end (right)
• mx-3 //margen hacia los laterales

• Ancho:

• w-25 //El elemento se ajusta al 25% de ancho del contenedor
• w-auto //Se ajusta al tamaño del elemento actual

• Alto:

• h-25 //El elemento se ajusta al 25% de alto del contenedor
• h-auto //Se ajusta al tamaño del elemento actual

Alineación:

• justify-content-center
• justify-content-start
• justify-content-end
• ...

Badge:

Útiles para contener elementos aplicando estilos.

Textos:

• Tamaños:

• .fs-1
• ...
• .fs-6

• Quitar estilos (útil por ejemplo para los enlaces):

• text-decoration-none