Spacing
Bootstrap offers an extensive collection of responsive margin and padding utility classes, designed to effortlessly customize the appearance of elements. These shorthand classes provide convenient shortcuts for adjusting spacing, allowing you to modify margins and paddings with ease. By utilizing Bootstrap’s responsive utility classes, you can easily fine-tune the spacing of your elements and achieve the desired visual effect, ensuring a polished and professional look for your website or application.
The Workflow
With Bootstrap’s shorthand classes, customizing the margin or padding of an element becomes a breeze. These classes offer responsive-friendly values, making it effortless to adjust margins and paddings. Whether you need to modify individual properties, all properties, or control vertical and horizontal spacing, Bootstrap provides comprehensive solutions. The classes are generated from a default Sass map that offers a wide range of options, from .25rem to 3rem, giving you the flexibility to choose the perfect spacing for your elements. With Bootstrap’s intuitive approach, achieving flawless spacing in your project has never been simpler.
Notation
Spacing utilities encompassing all breakpoints, from xs to xl, are denoted without a specific abbreviation. This is because these classes are applied starting from a minimum width of 0 and are not limited by any media queries. On the other hand, the remaining breakpoints do include a designated abbreviation.
The naming convention for the classes follows the structure of {property}{sides}-{size} for xs, and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Property Options:
- “m”: Classes that set margin;
- “p”: Classes that set padding.
| Property | Description |
|---|---|
| m | Sets margin for the element |
| p | Sets padding for the element |
Sides Options:
- “t”: Classes that set margin-top or padding-top;
- “b”: Classes that set margin-bottom or padding-bottom;
- “l”: Classes that set margin-left or padding-left;
- “r”: Classes that set margin-right or padding-right;
- “x”: Classes that set both left and right sides (*-left and *-right);
- “y”: Classes that set both top and bottom sides (*-top and *-bottom);
- Blank: Classes that set margin or padding on all four sides of the element.
| Sides | Description |
|---|---|
| t | Sets margin-top or padding-top |
| b | Sets margin-bottom or padding-bottom |
| l | Sets margin-left or padding-left |
| r | Sets margin-right or padding-right |
| x | Sets both left and right sides |
| y | Sets both top and bottom sides |
| Blank | Sets margin or padding on all four sides of element |
Size Options:
- 0: Classes that eliminate the margin or padding by setting it to 0;
- 1: Classes that set the margin or padding to $spacer * .25 (default);
- 2: Classes that set the margin or padding to $spacer * .5 (default);
- 3: Classes that set the margin or padding to $spacer (default);
- 4: Classes that set the margin or padding to $spacer * 1.5 (default);
- 5: Classes that set the margin or padding to $spacer * 3 (default);
- “auto”: Classes that set the margin to auto.
| Size | Description |
|---|---|
| 0 | Eliminates margin or padding by setting it to 0 |
| 1 | Sets margin or padding to $spacer * .25 |
| 2 | Sets margin or padding to $spacer * .5 |
| 3 | Sets margin or padding to $spacer |
| 4 | Sets margin or padding to $spacer * 1.5 |
| 5 | Sets margin or padding to $spacer * 3 |
| auto | Sets the margin to auto |
You have the flexibility to expand the available sizes by adding additional entries to the $spacers Sass map variable.
Examples
Below, you’ll find a selection of illustrative examples showcasing these classes:
.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;
}Horizontal centering
Moreover, Bootstrap provides an .mx-auto class specifically designed to horizontally center block-level content with a fixed width. This is accomplished by setting the horizontal margins to auto.
<div class=”mx-auto” style=”width: 200px;”>
Centered element
</div>