Layout Utilities

Table of contents

  1. Spacing
  2. Vertical Alignment
  3. Display


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


In Markdown, use the {: } wrapper to apply custom classes:

This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 }

This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 }

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 classes aid in adapting the layout of the elements on a page:

.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.


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 }