Layout Utilities

Table of contents

  1. Spacing
  2. Horizontal Alignment
  3. Vertical Alignment
  4. 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 prefixWhat 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 prefixWhat 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/suffixSize in remsRem converted to px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.5rem24px
62rem32px
72.5rem40px
83rem48px
autoautoauto

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

ClassnameWhat it does
.float-leftfloat: left
.float-rightfloat: right
.flex-justify-startjustify-content: flex-start
.flex-justify-endjustify-content: flex-end
.flex-justify-betweenjustify-content: space-between
.flex-justify-aroundjustify-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

ClassnameWhat it does
.v-align-baselinevertical-align: baseline
.v-align-bottomvertical-align: bottom
.v-align-middlevertical-align: middle
.v-align-text-bottomvertical-align: text-bottom
.v-align-text-topvertical-align: text-top
.v-align-topvertical-align: top

Display

Display classes aid in adapting the layout of the elements on a page:

Class 
.d-blockdisplay: block
.d-flexdisplay: flex
.d-inlinedisplay: inline
.d-inline-blockdisplay: inline-block
.d-nonedisplay: 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 }