Link Search Menu Expand Document

Layout Utilities

Table of contents

  1. Spacing
  2. Vertical Alignment
  3. Display

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

Examples

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

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 }