Spacing
Bootstrap5 spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an element or container.
Utilities |
Descriptions |
---|---|
Margin and padding | Bootstrap provides several short-hand utility classes to add margin and padding between two elements or a subgroup of an element’s sides to modify its appearance. It allows spacing ranging from .25rem to 3rem. |
Horizontal centering | There are mx-auto utility for center horizontally. |
Negative margin | Bootstrap has negative margin classes that can be used to add negative margins to elements as well. These classes have a similar syntax to general spacing classes but with an n just before the size. |
Gap | When the display is set to grid, you can make use of gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual grid items. |
Sass | This involves the Sass map and spacing utilities that are declared in Utility API. |
Bootstrap 5 Utility Reference
Bootstrap 5 Utility facilitates various types of utilities to make a stylish, mobile-friendly, and responsive front-end website. The utility layout is used for showing, hiding, aligning, and spacing content.
The complete list of Utilities is listed below with their brief description: