Layout Utilities
Table of contents
Spacing
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
| Classname prefix | What it does |
|---|---|
.m- | margin |
.mx- | margin-left, margin-right |
.my- | margin top, margin bottom |
.mt- | margin-top |
.mr- | margin-right |
.mb- | margin-bottom |
.ml- | margin-left |
| Classname prefix | What it does |
|---|---|
.p- | padding |
.px- | padding-left, padding-right |
.py- | padding top, padding bottom |
.pt- | padding-top |
.pr- | padding-right |
.pb- | padding-bottom |
.pl- | padding-left |
Spacing values are based on a 1rem = 16px spacing scale, broken down into these units:
| Spacer/suffix | Size in rems | Rem converted to px |
|---|---|---|
1 | 0.25rem | 4px |
2 | 0.5rem | 8px |
3 | 0.75rem | 12px |
4 | 1rem | 16px |
5 | 1.5rem | 24px |
6 | 2rem | 32px |
7 | 2.5rem | 40px |
8 | 3rem | 48px |
auto | auto | auto |
Use mx-auto to horizontally center elements.
Examples
In Markdown, use the {: } wrapper to apply custom classes:
This paragraph will have a margin bottom of 1rem/16px on large screens.
{: .mb-lg-4 }
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 }
Horizontal Alignment
| Classname | What it does |
|---|---|
.float-left | float: left |
.float-right | float: right |
.flex-justify-start | justify-content: flex-start |
.flex-justify-end | justify-content: flex-end |
.flex-justify-between | justify-content: space-between |
.flex-justify-around | justify-content: space-around |
Note: any of the flex- classes must be used on a parent element that has d-flex applied to it.
Vertical Alignment
| Classname | What it does |
|---|---|
.v-align-baseline | vertical-align: baseline |
.v-align-bottom | vertical-align: bottom |
.v-align-middle | vertical-align: middle |
.v-align-text-bottom | vertical-align: text-bottom |
.v-align-text-top | vertical-align: text-top |
.v-align-top | vertical-align: top |
Display
Display classes aid in adapting the layout of the elements on a page:
| Class | |
|---|---|
.d-block | display: block |
.d-flex | display: flex |
.d-inline | display: inline |
.d-inline-block | display: inline-block |
.d-none | display: none |
Use these classes in conjunction with the responsive modifiers.
Examples
In Markdown, use the {: } wrapper to apply custom classes:
This button will be hidden until medium screen sizes:
[ A button ](#url)
{: .d-none .d-md-inline-block }
These headings will be `inline-block`:
### heading 3
{: .d-inline-block }
### heading 3
{: .d-inline-block }