Espaciado
Configura los espacios entre los elementos de tu aplicación.
info
Para ver los tamaños disponibles visitar la documentacion de personalizar espacios
Paddings y margins
Usando los valores de la tabla anterior se pueden usar para agregar padding y margins usando la clase p* y m* respectivamente.
Además se puden personalizar con las siguientes direcciones
| Clase | Dirección |
|---|---|
*t | top |
*r | right |
*b | bottom |
*l | left |
*x | left and right |
*y | top and bottom |
Seguidamente se debe agregar el tamaño del espaciado que puede ser del 0 al 7
Ejemplos
| Ejemplo | Style |
|---|---|
pt-0 | padding-top: 0rem |
mb-3 | margin-bottom: 0.75rem |
mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
Adicionales
Tambien se pueden usar los atributos *auto lo cual asignará el padding o margin a auto
Ejemplo de adicionales
px-automx-auto
Responsive
tip
Para más detalle visita la documentación de breakpoints
Examples
| Class | Description |
|---|---|
| Adds a padding-top of space 2 when the screen is larger than sm. |
| Adds a padding-bottom of space 3 for mobile screens and sets the padding-bottom to space 2 when the screen is larger than lg. |