diff options
| author | Mark Otto <[email protected]> | 2020-04-14 04:57:11 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-04-14 13:57:11 +0200 |
| commit | 4efc1c462da3be1ef7f6716436349ee67be60ee6 (patch) | |
| tree | 40ca17ccecb64154e3331313bd2292347b32cdc9 /site/content/docs | |
| parent | e2afbbfa828418dd93c8de8c1c2ce60361d04fbf (diff) | |
| download | bootstrap-4efc1c462da3be1ef7f6716436349ee67be60ee6.tar.xz bootstrap-4efc1c462da3be1ef7f6716436349ee67be60ee6.zip | |
Redo display headings (#30568)
- Convert to Sass map
- Consolidate font-weights into single option (matching line-height for them)
- Add two new sizes and create a new scale
- Update migration docs
Co-authored-by: Martijn Cuppens <[email protected]>
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/4.3/content/typography.md | 10 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 7 |
2 files changed, 16 insertions, 1 deletions
diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index 5b6516609..7d4875e92 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -108,7 +108,9 @@ Traditional heading elements are designed to work best in the meat of your page <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div> <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div> <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div> - <div class="display-4">Display 4</div> + <div class="display-4 pb-3 mb-3 border-bottom">Display 4</div> + <div class="display-5 pb-3 mb-3 border-bottom">Display 5</div> + <div class="display-6">Display 6</div> </div> {{< highlight html >}} @@ -116,8 +118,14 @@ Traditional heading elements are designed to work best in the meat of your page <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> +<h1 class="display-5">Display 5</h1> +<h1 class="display-6">Display 6</h1> {{< /highlight >}} +Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. + +{{< scss-docs name="display-headings" file="scss/_variables.scss" >}} + ## Lead Make a paragraph stand out by adding `.lead`. diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 736115af2..fecf23d79 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -77,6 +77,13 @@ Changes to Reboot, typography, tables, and more. - `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) - Drop `.text-justify` class. [See #229793](https://github.com/twbs/bootstrap/pull/29793) +## Typography + +- Removed `$display-*` variables for a new `$display-font-sizes` Sass map. +- Removed individiual `$display-*-weight` variables for a single `$display-font-weight`. +- Added two new `.display-*` heading styles, `.display-5` and `.display-6`. +- Resized existing display headings for a slightly more consistent set of `font-size`s. + ## Forms - Rearranged form documentation under its own top-level section. |