Add additional layout and text justifcations

This commit is contained in:
Patrick Marsceill
2020-05-01 15:32:42 -04:00
parent 2f13db1f01
commit 411c508806
5 changed files with 69 additions and 5 deletions

View File

@@ -51,6 +51,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
| `6` | 2rem | 32px |
| `7` | 2.5rem | 40px |
| `8` | 3rem | 48px |
| `auto` | auto | auto |
Use `mx-auto` to horizontally center elements.
#### Examples
{: .no_toc }
@@ -65,6 +68,19 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree
{: .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 |

View File

@@ -144,3 +144,13 @@ 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` |