Layout & Typography
- Spacing
- Horizontal Alignment
- Vertical Alignment
- Display
- Font size
- Font weight
- Line height
- 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 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:
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
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.
Class | Small screen size font-size | Large screen size font-size |
---|---|---|
.fs-1 | 9px | 10px |
.fs-2 | 11px | 12px |
.fs-3 | 12px | 14px |
.fs-4 | 14px | 16px |
.fs-5 | 16px | 18px |
.fs-6 | 18px | 24px |
.fs-7 | 24px | 32px |
.fs-8 | 32px | 38px |
.fs-9 | 38px | 42px |
.fs-10 | 42px | 48px |
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.
Class | line-height value | Notes |
---|---|---|
.lh-0 | 0 | |
.lh-tight | 1.1 | Default for headings |
.lh-default | 1.4 | Default 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:
Class | What it does |
---|---|
.text-left | text-align: left |
.text-right | text-align: right |
.text-center | text-align: center |