Bootstrap5 Utilidades

Bootstrap 5 proporciona muchas clases útiles para ayudarnos a lograr efectos rápidamente, sin necesidad de escribir repetidamente código CSS.

---

Color de fondo

Al establecer el color de fondo de diferentes elementos, debe usar.text-*la clase para establecer el color de texto coincidente:

.bg-gradientla clase puede establecer el efecto de degradado del color de fondo:

---

Bordes

Podemos usarborderlas clases relacionadas para mostrar bordes según sea necesario:

.border-1llegar.border-5La clase se usa para establecer el ancho de la línea del borde:

Lo siguiente establece diferentes colores de borde:

roundedLas clases relacionadas se usan para establecer los bordes redondeados:

rounded-0llegarrounded-3Las clases se usan para establecer el tamaño de los bordes redondeados:

---

Flotación y limpieza de flotación

Los elementos flotan a la derecha usando la clase .float-end, a la izquierda usando la clase .float-start, y la clase .clearfix se usa para limpiar la flotación:

También se puede establecer el efecto de flotación según el tamaño de pantalla (.float-*-left|right - * indica sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) o xxl (>=1400px)):

---

Centrado

Use.mx-autola clase para centrar el elemento (agregue margin-left y margin-right como auto):

---

Ancho y alto

El ancho se establece usandow-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100)la clase para configurarlo.

El alto se establece usandoh-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100)la clase para configurarlo.

---

Espaciado

La sintaxis para configurar el espaciado es la siguiente:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) o  xxl (>=1400px)

breakpoints se refiere al ancho de pantalla: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) o xxl (>=1400px).

propertyRepresenta la propiedad, incluye:

• m- se usa para configurarmargin
• p- se usa para configurarpadding

sidesSe refiere principalmente a la dirección:

• t- se usa para configurarmargin-topopadding-top
• b- se usa para configurarmargin-bottomopadding-bottom
• s- se usa para configurarmargin-leftopadding-left
• e- se usa para configurarmargin-rightopadding-right
• x- se usa para configurar*-lefty*-right
• y- se usa para configurar*-topy*-bottom
• blank - se usa para configurar el elemento en las cuatro direccionesmarginopadding

sizese refiere al tamaño del espaciado:

• 0- establecemarginopaddingPara0
• 1- establecemarginopaddingPara$spacer * .25
• 2- establecemarginopaddingPara$spacer * .5
• 3- establecemarginopaddingPara$spacer
• 4- establecemarginopaddingPara$spacer * 1.5
• 5- establecemarginopaddingPara$spacer * 3
• auto- establecemargina auto

Mira la configuración del código fuente de algunos espaciados:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Más ejemplos

.m-# / m-*-#	Configurar el margen exterior de todos los lados	Pruébalo
.mt-# / mt-*-#	margin top	Pruébalo
.mb-# / mb-*-#	margin bottom	Pruébalo
.ms-# / ms-*-#	margin left	Pruébalo
.me-# / me-*-#	margin right	Pruébalo
.mx-# / mx-*-#	margin left y right	Pruébalo
.my-# / my-*-#	margin top y bottom	Pruébalo
.p-# / p-*-#	Usar los lados para configurar padding	Pruébalo
.pt-# / pt-*-#	padding top	Pruébalo
.pb-# / pb-*-#	padding bottom	Pruébalo
.ps-# / ps-*-#	padding left	Pruébalo
.pe-# / pe-*-#	padding right	Pruébalo
.py-# / py-*-#	padding top y bottom	Pruébalo
.px-# / px-*-#	padding left y right	Pruébalo

Otras extensiones