Search by

Layout

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

In Markdown, use the {: } wrapper to apply custom classes:

<p class="mb-lg-4">This paragraph will have a margin bottom of 1rem/16px at large screens.</p>

<p class="px-6">This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.</p>

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.