2017-03-27 01:09:19 +00:00
---
layout: default
title: Layout
parent: Utilities
---
# Layout Utilities
2019-01-14 19:18:09 +00:00
{: .no_toc }
2017-03-27 01:09:19 +00:00
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## 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 |
2020-05-01 19:32:42 +00:00
| `auto` | auto | auto |
Use `mx-auto` to horizontally center elements.
2017-03-27 01:09:19 +00:00
#### Examples
{: .no_toc }
In Markdown, use the `{: }` wrapper to apply custom classes:
2019-01-14 19:32:41 +00:00
```markdown
2017-03-27 01:09:19 +00:00
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 }
```
2020-05-01 19:32:42 +00:00
## 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` |
2020-05-05 16:48:45 +00:00
_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
2020-05-01 19:32:42 +00:00
2017-03-27 01:09:19 +00:00
## 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
{: .no_toc }
In Markdown, use the `{: }` wrapper to apply custom classes:
2019-01-14 19:32:41 +00:00
```markdown
2017-03-27 01:09:19 +00:00
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
2019-01-26 15:28:26 +00:00
{: .d-inline-block }
2017-03-27 01:09:19 +00:00
### heading 3
2019-01-26 15:28:26 +00:00
{: .d-inline-block }
2017-03-27 01:09:19 +00:00
```
