Spacing
Configure the spacing between elements in your application.
info
To see the available sizes, visit the customize spacing documentation.
Paddings and Margins
Using the values from the table above, you can add padding and margins using the p* and m* classes, respectively.
Additionally, you can customize them with the following directions:
| Class | Direction |
|---|---|
*t | top |
*r | right |
*b | bottom |
*l | left |
*x | left and right |
*y | top and bottom |
Next, you must add the spacing size, which can be from 0 to 7.
Examples
| Example | Style |
|---|---|
pt-0 | padding-top: 0rem |
mb-3 | margin-bottom: 0.75rem |
mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
Additional
You can also use the *auto attributes, which will set the padding or margin to auto.
Additional Examples
px-automx-auto
Responsive
tip
For more details, visit the breakpoints documentation.
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. |