Bootstrap4 Utilidades

Bootstrap4 proporciona algunas utilidades que nos permiten lograr el efecto deseado sin tener que escribir código CSS.

---

Bordes

Usando laborderclase puede agregar o eliminar bordes:

---

Color de borde

Bootstrap4 proporciona algunas clases para configurar el color de los bordes:

---

Configuración de bordes redondeados

Usando laroundedclase puede agregar bordes redondeados:

---

Flotación

.float-rightLa clase se usa para hacer flotar el elemento a la derecha,.float-leftpara hacer flotar el elemento a la izquierda,.clearfixy la clase se usa para limpiar la flotación:

---

Flotación responsiva

Podemos configurar la flotación (.float-*-left|right- * es sm, md, lg o xl) la dirección depende del tamaño de la pantalla:

---

Alineación centrada

Usando la.mx-autoclase para configurar la alineación centrada:

---

Ancho

Use la clase w-* en el elemento (.w-25, .w-50, .w-75, .w-100, .mw-100) para configurar el ancho:

---

Alto

Use la clase h-* en el elemento (.h-25, .h-50, .h-75, .h-100, .mh-100) para configurar la altura:

---

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) 

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

propertyRepresenta la propiedad, incluye:

• m- Se usa para establecermargin
• p- Se usa para establecerpadding

sidesSe refiere principalmente a la dirección:

• t- Se usa para establecermargin-topopadding-top
• b- Se usa para establecermargin-bottomopadding-bottom
• l- Se usa para establecermargin-leftopadding-left
• r- Se usa para establecermargin-rightopadding-right
• x- Se usa para establecer*-lefty*-right
• y- Se usa para establecer*-topy*-bottom
• blank - Se usa para establecer el margin/padding del elemento en las cuatro direccionesmarginopadding

sizeSe refiere al tamaño del margen:

• 0- EstablecemarginopaddingPara0
• 1- EstablecemarginopaddingPara$spacer * .25
• 2- EstablecemarginopaddingPara$spacer * .5
• 3- EstablecemarginopaddingPara$spacer
• 4- EstablecemarginopaddingPara$spacer * 1.5
• 5- EstablecemarginopaddingPara$spacer * 3
• auto- Establecemargincomo auto

Margen exteriormarginSe pueden establecer números negativos, añadiendo la letra delante del número"n" :

• n1- Establece margin a -.25rem (si font-size es 16px, entonces -4px)
• n2- Establece margin a -.5rem (si font-size es 16px, entonces -8px)
• n3- Establece margin a -1rem (si font-size es 16px, entonces -16px)
• n4- Establece margin a -1.5rem (si font-size es 16px, entonces -24px)
• n5- Establece margin a -3rem (si font-size es 16px, entonces -48px)

Echa un vistazo a la configuración del código fuente de algunos márgenes:

.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-*-#	Establecer el margen en todos los lados	Pruébalo
.mt-# / mt-*-#	margin top	Pruébalo
.mb-# / mb-*-#	margin bottom	Pruébalo
.ml-# / ml-*-#	margin left	Pruébalo
.mr-# / mr-*-#	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
.pl-# / pl-*-#	padding left	Pruébalo
.pr-# / pr-*-#	padding right	Pruébalo
.py-# / py-*-#	padding top y bottom	Pruébalo
.px-# / px-*-#	padding left y right	Pruébalo

Otras extensiones