Link Search Menu Expand Document

Layout & Typography

  1. Spacing
  2. Horizontal Alignment
  3. Vertical Alignment
  4. Display
  5. Font size
  6. Font weight
  7. Line height
  8. Text justification

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

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 }

Typography Utilities

Font size

Use the .fs-1 - .fs-10 to set an explicit font-size.

ClassSmall screen size font-sizeLarge screen size font-size
.fs-19px10px
.fs-211px12px
.fs-312px14px
.fs-414px16px
.fs-516px18px
.fs-618px24px
.fs-724px32px
.fs-832px38px
.fs-938px42px
.fs-1042px48px

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Font size 8

Font size 9

Font size 10

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

Font size 1
{: .fs-1 }
Font size 2
{: .fs-2 }
Font size 3
{: .fs-3 }
Font size 4
{: .fs-4 }
Font size 5
{: .fs-5 }
Font size 6
{: .fs-6 }
Font size 7
{: .fs-7 }
Font size 8
{: .fs-8 }
Font size 9
{: .fs-9 }
Font size 10
{: .fs-10 }

Font weight

Use the .fw-300 - .fw-700 to set an explicit font-size.

Font weight 300

Font weight 400

Font weight 500

Font weight 700

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

Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }

Line height

Use the lh- classes to explicitly apply line height to text.

Classline-height valueNotes
.lh-00 
.lh-tight1.1Default for headings
.lh-default1.4Default for body (paragraphs)

No Line height No Line height

Tight line height Tight line height

Default line height Default line height

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

No Line height
No Line height
{: .lh-0 }

Tight line height
Tight line height
{: .lh-tight }

Default line height
Default line height
{: .fh-default }

Text justification

By default text is justified left. Use these text- classes to override settings:

ClassWhat it does
.text-lefttext-align: left
.text-righttext-align: right
.text-centertext-align: center

Back to top

Copyright © 2021 SEDS Celestia. Built by Plutoniumm.

Use these Keybindings to zip around the site!

  • ? - Open Hotkeys Info
  • ❶ - Home
  • ❷ - General
  • ❸ - Korolev
  • ❹ - Edu
  • ❺ - Thales
  • 🅹 - Prev. Page in List
  • 🅺 - Next Page in Index