notes/docs/utilities/layout.md

layout	title	parent
default	Layout	Utilities

Layout Utilities

{: .no_toc }

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

Use mx-auto to horizontally center elements.

Examples

{: .no_toc }

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

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

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

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:

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 }