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.

Spacing values are based on a 1rem = 16px spacing scale, broken down into these units:

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

Horizontal Alignment

Note: any of the flex- classes must be used on a parent element that has d-flex applied to it.

Vertical Alignment

Display

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

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 }

← ↑ →