summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.2/content
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.2/content')
-rw-r--r--site/content/docs/5.2/content/figures.md33
-rw-r--r--site/content/docs/5.2/content/images.md63
-rw-r--r--site/content/docs/5.2/content/reboot.md446
-rw-r--r--site/content/docs/5.2/content/tables.md835
-rw-r--r--site/content/docs/5.2/content/typography.md286
5 files changed, 1663 insertions, 0 deletions
diff --git a/site/content/docs/5.2/content/figures.md b/site/content/docs/5.2/content/figures.md
new file mode 100644
index 0000000..29a38d7
--- /dev/null
+++ b/site/content/docs/5.2/content/figures.md
@@ -0,0 +1,33 @@
+---
+layout: docs
+title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
+group: content
+toc: true
+---
+
+Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
+
+Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
+
+{{< example >}}
+<figure class="figure">
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ <figcaption class="figure-caption">A caption for the above image.</figcaption>
+</figure>
+{{< /example >}}
+
+Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
+
+{{< example >}}
+<figure class="figure">
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
+</figure>
+{{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.2/content/images.md b/site/content/docs/5.2/content/images.md
new file mode 100644
index 0000000..b55e7a2
--- /dev/null
+++ b/site/content/docs/5.2/content/images.md
@@ -0,0 +1,63 @@
+---
+layout: docs
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
+group: content
+toc: true
+---
+
+## Responsive images
+
+Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
+
+{{< example >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< /example >}}
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+{{< /example >}}
+
+## Aligning images
+
+Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded float-start" >}}
+{{< placeholder width="200" height="200" class="rounded float-end" >}}
+{{< /example >}}
+
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+{{< /example >}}
+
+{{< example >}}
+<div class="text-center">
+ {{< placeholder width="200" height="200" class="rounded" >}}
+</div>
+{{< /example >}}
+
+
+## Picture
+
+If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
+
+```html
+<picture>
+ <source srcset="..." type="image/svg+xml">
+ <img src="..." class="img-fluid img-thumbnail" alt="...">
+</picture>
+```
+
+## Sass
+
+### Variables
+
+Variables are available for image thumbnails.
+
+{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.2/content/reboot.md b/site/content/docs/5.2/content/reboot.md
new file mode 100644
index 0000000..ca667b2
--- /dev/null
+++ b/site/content/docs/5.2/content/reboot.md
@@ -0,0 +1,446 @@
+---
+layout: docs
+title: Reboot
+description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
+group: content
+aliases: "/docs/5.2/content/"
+toc: true
+---
+
+## Approach
+
+Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+
+Here are our guidelines and reasons for choosing what to override in Reboot:
+
+- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
+- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
+
+## CSS variables
+
+{{< added-in "5.2.0" >}}
+
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+
+For example, consider these `:root` CSS variables for common `<body>` styles:
+
+{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}}
+
+In practice, those variables are then applied in Reboot like so:
+
+{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
+
+Which allows you to make real-time customizations however you like:
+
+```html
+<body style="--bs-body-color: #333;">
+ <!-- ... -->
+</body>
+```
+
+## Page defaults
+
+The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
+
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+ - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable.
+- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
+- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
+
+## Native font stack
+
+Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+
+```scss
+$font-family-sans-serif:
+ // Cross-platform generic font family (default user interface font)
+ system-ui,
+ // Safari for macOS and iOS (San Francisco)
+ -apple-system,
+ // Windows
+ "Segoe UI",
+ // Android
+ Roboto,
+ // older macOS and iOS
+ "Helvetica Neue"
+ // Linux
+ "Noto Sans",
+ "Liberation Sans",
+ // Basic web fallback
+ Arial,
+ // Sans serif fallback
+ sans-serif,
+ // Emoji fonts
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+```
+
+Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
+
+This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
+
+## Headings and paragraphs
+
+All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
+
+{{< bs-table "table" >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
+
+## Horizontal rules
+
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+{{< example >}}
+<hr>
+
+<div class="text-success">
+ <hr>
+</div>
+
+<hr class="border border-danger border-2 opacity-50">
+<hr class="border border-primary border-3 opacity-75">
+{{< /example >}}
+
+## Lists
+
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
+
+<div class="bd-example">
+{{< markdown >}}
+* All lists have their top margin removed
+* And their bottom margin normalized
+* Nested lists have no bottom margin
+ * This way they have a more even appearance
+ * Particularly when followed by more list items
+* The left padding has also been reset
+
+1. Here's an ordered list
+2. With a few list items
+3. It has the same overall look
+4. As the previous unordered list
+{{< /markdown >}}
+</div>
+
+For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
+
+<div class="bd-example">
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Term</dt>
+ <dd>Definition for the term.</dd>
+ <dd>A second definition for the same term.</dd>
+ <dt>Another term</dt>
+ <dd>Definition for this other term.</dd>
+ </dl>
+</div>
+
+## Inline code
+
+Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
+
+{{< example >}}
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+{{< /example >}}
+
+## Code blocks
+
+Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+{{< example >}}
+<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;And another line of sample text here...&lt;/p&gt;
+</code></pre>
+{{< /example >}}
+
+## Variables
+
+For indicating variables use the `<var>` tag.
+
+{{< example >}}
+<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+{{< /example >}}
+
+## User input
+
+Use the `<kbd>` to indicate input that is typically entered via keyboard.
+
+{{< example >}}
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+{{< /example >}}
+
+## Sample output
+
+For indicating sample output from a program use the `<samp>` tag.
+
+{{< example >}}
+<samp>This text is meant to be treated as sample output from a computer program.</samp>
+{{< /example >}}
+
+## Tables
+
+Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
+
+{{< example >}}
+<table>
+ <caption>
+ This is an example table, and this is its caption to describe the contents.
+ </caption>
+ <thead>
+ <tr>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+</table>
+{{< /example >}}
+
+## Forms
+
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
+
+- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
+- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
+- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
+- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
+- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.
+
+These changes, and more, are demonstrated below.
+
+<form class="bd-example">
+ <fieldset>
+ <legend>Example legend</legend>
+ <p>
+ <label for="input">Example input</label>
+ <input type="text" id="input" placeholder="Example input">
+ </p>
+ <p>
+ <label for="email">Example email</label>
+ <input type="email" id="email" placeholder="test@example.com">
+ </p>
+ <p>
+ <label for="tel">Example telephone</label>
+ <input type="tel" id="tel">
+ </p>
+ <p>
+ <label for="url">Example url</label>
+ <input type="url" id="url">
+ </p>
+ <p>
+ <label for="number">Example number</label>
+ <input type="number" id="number">
+ </p>
+ <p>
+ <label for="search">Example search</label>
+ <input type="search" id="search">
+ </p>
+ <p>
+ <label for="range">Example range</label>
+ <input type="range" id="range" min="0" max="10">
+ </p>
+ <p>
+ <label for="file">Example file input</label>
+ <input type="file" id="file">
+ </p>
+ <p>
+ <label for="select">Example select</label>
+ <select id="select">
+ <option value="">Choose...</option>
+ <optgroup label="Option group 1">
+ <option value="">Option 1</option>
+ <option value="">Option 2</option>
+ <option value="">Option 3</option>
+ </optgroup>
+ <optgroup label="Option group 2">
+ <option value="">Option 4</option>
+ <option value="">Option 5</option>
+ <option value="">Option 6</option>
+ </optgroup>
+ </select>
+ </p>
+ <p>
+ <label>
+ <input type="checkbox" value="">
+ Check this checkbox
+ </label>
+ </p>
+ <p>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </p>
+ <p>
+ <label for="textarea">Example textarea</label>
+ <textarea id="textarea" rows="3"></textarea>
+ </p>
+ <p>
+ <label for="date">Example date</label>
+ <input type="date" id="date">
+ </p>
+ <p>
+ <label for="time">Example time</label>
+ <input type="time" id="time">
+ </p>
+ <p>
+ <label for="password">Example password</label>
+ <input type="password" id="password">
+ </p>
+ <p>
+ <label for="datetime-local">Example datetime-local</label>
+ <input type="datetime-local" id="datetime-local">
+ </p>
+ <p>
+ <label for="week">Example week</label>
+ <input type="week" id="week">
+ </p>
+ <p>
+ <label for="month">Example month</label>
+ <input type="month" id="month">
+ </p>
+ <p>
+ <label for="color">Example color</label>
+ <input type="color" id="color">
+ </p>
+ <p>
+ <label for="output">Example output</label>
+ <output name="result" id="output">100</output>
+ </p>
+ <p>
+ <button type="submit">Button submit</button>
+ <input type="submit" value="Input submit button">
+ <input type="reset" value="Input reset button">
+ <input type="button" value="Input button">
+ </p>
+ <p>
+ <button type="submit" disabled>Button submit</button>
+ <input type="submit" value="Input submit button" disabled>
+ <input type="reset" value="Input reset button" disabled>
+ <input type="button" value="Input button" disabled>
+ </p>
+ </fieldset>
+</form>
+
+{{< callout warning >}}
+{{< partial "callout-warning-input-support.md" >}}
+{{< /callout >}}
+
+### Pointers on buttons
+
+Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
+
+{{< example >}}
+<span role="button" tabindex="0">Non-button element button</span>
+{{< /example >}}
+
+## Misc elements
+
+### Address
+
+The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.
+
+<div class="bd-example">
+ <address>
+ <strong>Twitter, Inc.</strong><br>
+ 1355 Market St, Suite 900<br>
+ San Francisco, CA 94103<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+
+ <address>
+ <strong>Full Name</strong><br>
+ <a href="mailto:first.last@example.com">first.last@example.com</a>
+ </address>
+</div>
+
+### Blockquote
+
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
+
+<div class="bd-example">
+ <blockquote class="blockquote">
+ <p>A well-known quote, contained in a blockquote element.</p>
+ </blockquote>
+ <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
+</div>
+
+### Inline elements
+
+The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
+
+<div class="bd-example">
+ The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+</div>
+
+### Summary
+
+The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
+
+<div class="bd-example">
+ <details>
+ <summary>Some details</summary>
+ <p>More info about the details.</p>
+ </details>
+
+ <details open>
+ <summary>Even more details</summary>
+ <p>Here are even more details about the details.</p>
+ </details>
+</div>
+
+## HTML5 `[hidden]` attribute
+
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
+
+```html
+<input type="text" hidden>
+```
+
+{{< callout warning >}}
+##### jQuery incompatibility
+
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{{< /callout >}}
+
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md
new file mode 100644
index 0000000..577e3ef
--- /dev/null
+++ b/site/content/docs/5.2/content/tables.md
@@ -0,0 +1,835 @@
+---
+layout: docs
+title: Tables
+description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
+group: content
+toc: true
+---
+
+## Overview
+
+Due to the widespread use of `<table>` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
+
+Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
+
+{{< table class="table" simplified="false" >}}
+
+## Variants
+
+Use contextual classes to color tables, table rows or individual cells.
+
+<div class="bd-example">
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">Class</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">Default</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ {{< table.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+ <tr class="table-{{ .name }}">
+ <th scope="row">{{ .name | title }}</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ {{- end -}}
+ {{< /table.inline >}}
+ </tbody>
+ </table>
+</div>
+
+{{< highlight html >}}
+<!-- On tables -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<table class="table-{{ .name }}">...</table>
+{{- end -}}
+{{< /table.inline >}}
+
+<!-- On rows -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<tr class="table-{{ .name }}">...</tr>
+{{- end -}}
+{{< /table.inline >}}
+
+<!-- On cells (`td` or `th`) -->
+<tr>{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+ <td class="table-{{ .name }}">...</td>
+{{- end -}}
+{{< /table.inline >}}
+</tr>
+{{< /highlight >}}
+
+{{< callout info >}}
+{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## Accented tables
+
+### Striped rows
+
+Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
+
+{{< table class="table table-striped" >}}
+
+### Striped columns
+
+Use `.table-striped-columns` to add zebra-striping to any table column.
+
+{{< table class="table table-striped-columns" >}}
+
+These classes can also be added to table variants:
+
+{{< table class="table table-dark table-striped" >}}
+
+{{< table class="table table-dark table-striped-columns" >}}
+
+{{< table class="table table-success table-striped" >}}
+
+{{< table class="table table-success table-striped-columns" >}}
+
+### Hoverable rows
+
+Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
+
+{{< table class="table table-hover" >}}
+
+{{< table class="table table-dark table-hover" >}}
+
+These hoverable rows can also be combined with the striped rows variant:
+
+{{< table class="table table-striped table-hover" >}}
+
+### Active tables
+
+Highlight a table row or cell by adding a `.table-active` class.
+
+<div class="bd-example">
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2" class="table-active">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+```html
+<table class="table">
+ <thead>
+ ...
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ ...
+ </tr>
+ <tr>
+ ...
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2" class="table-active">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+<div class="bd-example">
+ <table class="table table-dark">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2" class="table-active">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+```html
+<table class="table table-dark">
+ <thead>
+ ...
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ ...
+ </tr>
+ <tr>
+ ...
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2" class="table-active">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+## How do the variants and accented tables work?
+
+For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
+
+- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
+- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
+- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+- Text and border colors are generated the same way, and their colors are inherited by default.
+
+Behind the scenes it looks like this:
+
+{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}}
+
+## Table borders
+
+### Bordered tables
+
+Add `.table-bordered` for borders on all sides of the table and cells.
+
+{{< table class="table table-bordered" >}}
+
+[Border color utilities]({{< docsref "/utilities/borders#border-color" >}}) can be added to change colors:
+
+{{< table class="table table-bordered border-primary" >}}
+
+### Tables without borders
+
+Add `.table-borderless` for a table without borders.
+
+{{< table class="table table-borderless" >}}
+
+{{< table class="table table-dark table-borderless" >}}
+
+## Small tables
+
+Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
+
+{{< table class="table table-sm" >}}
+
+{{< table class="table table-dark table-sm" >}}
+
+## Table group dividers
+
+Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).
+
+{{< example >}}
+<table class="table">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="table-group-divider">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{{< /example >}}
+
+## Vertical alignment
+
+Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
+
+<div class="bd-example">
+ <div class="table-responsive">
+ <table class="table align-middle">
+ <thead>
+ <tr>
+ <th scope="col" class="w-25">Heading 1</th>
+ <th scope="col" class="w-25">Heading 2</th>
+ <th scope="col" class="w-25">Heading 3</th>
+ <th scope="col" class="w-25">Heading 4</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+ <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+ <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+ <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
+ </tr>
+ <tr class="align-bottom">
+ <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+ <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+ <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+ <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
+ </tr>
+ <tr>
+ <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+ <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+ <td class="align-top">This cell is aligned to the top.</td>
+ <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+```html
+<div class="table-responsive">
+ <table class="table align-middle">
+ <thead>
+ <tr>
+ ...
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ ...
+ </tr>
+ <tr class="align-bottom">
+ ...
+ </tr>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ <td class="align-top">This cell is aligned to the top.</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+```
+
+## Nesting
+
+Border styles, active styles, and table variants are not inherited by nested tables.
+
+<div class="bd-example">
+<table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">Header</th>
+ <th scope="col">Header</th>
+ <th scope="col">Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">A</th>
+ <td>First</td>
+ <td>Last</td>
+ </tr>
+ <tr>
+ <th scope="row">B</th>
+ <td>First</td>
+ <td>Last</td>
+ </tr>
+ <tr>
+ <th scope="row">C</th>
+ <td>First</td>
+ <td>Last</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+```html
+<table class="table table-striped">
+ <thead>
+ ...
+ </thead>
+ <tbody>
+ ...
+ <tr>
+ <td colspan="4">
+ <table class="table mb-0">
+ ...
+ </table>
+ </td>
+ </tr>
+ ...
+ </tbody>
+</table>
+```
+
+## How nesting works
+
+To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
+
+Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
+
+## Anatomy
+
+### Table head
+
+Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
+
+<div class="bd-example">
+<table class="table">
+ <thead class="table-light">
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+```html
+<table class="table">
+ <thead class="table-light">
+ ...
+ </thead>
+ <tbody>
+ ...
+ </tbody>
+</table>
+```
+
+<div class="bd-example">
+<table class="table">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+```html
+<table class="table">
+ <thead class="table-dark">
+ ...
+ </thead>
+ <tbody>
+ ...
+ </tbody>
+</table>
+```
+
+### Table foot
+
+<div class="bd-example">
+<table class="table">
+ <thead class="table-light">
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td>Footer</td>
+ <td>Footer</td>
+ <td>Footer</td>
+ <td>Footer</td>
+ </tr>
+ </tfoot>
+</table>
+</div>
+
+```html
+<table class="table">
+ <thead>
+ ...
+ </thead>
+ <tbody>
+ ...
+ </tbody>
+ <tfoot>
+ ...
+ </tfoot>
+</table>
+```
+
+### Captions
+
+A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
+
+<div class="bd-example">
+ <table class="table">
+ <caption>List of users</caption>
+ {{< partial "table-content" >}}
+ </table>
+</div>
+
+```html
+<table class="table table-sm">
+ <caption>List of users</caption>
+ <thead>
+ ...
+ </thead>
+ <tbody>
+ ...
+ </tbody>
+</table>
+```
+
+You can also put the `<caption>` on the top of the table with `.caption-top`.
+
+{{< example >}}
+<table class="table caption-top">
+ <caption>List of users</caption>
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{{< /example >}}
+
+## Responsive tables
+
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
+
+{{< callout warning >}}
+##### Vertical clipping/truncation
+
+Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
+{{< /callout >}}
+
+### Always responsive
+
+Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
+
+<div class="bd-example">
+ <div class="table-responsive">
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+```html
+<div class="table-responsive">
+ <table class="table">
+ ...
+ </table>
+</div>
+```
+
+### Breakpoint specific
+
+Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+
+**These tables may appear broken until their responsive styles apply at specific viewport widths.**
+
+{{< tables.inline >}}
+{{ range $.Site.Data.breakpoints }}
+{{ if not (eq . "xs") }}
+<div class="bd-example">
+ <div class="table-responsive{{ .abbr }}">
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+{{ end -}}
+{{- end -}}
+{{< /tables.inline >}}
+
+{{< highlight html >}}
+{{< tables.inline >}}
+{{- range $.Site.Data.breakpoints -}}
+{{- if not (eq . "xs") }}
+<div class="table-responsive{{ .abbr }}">
+ <table class="table">
+ ...
+ </table>
+</div>
+{{ end -}}
+{{- end -}}
+{{< /tables.inline >}}
+{{< /highlight >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
+
+### Customizing
+
+- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
+- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable.
diff --git a/site/content/docs/5.2/content/typography.md b/site/content/docs/5.2/content/typography.md
new file mode 100644
index 0000000..7330132
--- /dev/null
+++ b/site/content/docs/5.2/content/typography.md
@@ -0,0 +1,286 @@
+---
+layout: docs
+title: Typography
+description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
+group: content
+toc: true
+---
+
+## Global settings
+
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
+
+- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
+- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
+- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
+- Set the global link color via `$link-color`.
+- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
+
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
+
+## Headings
+
+All HTML headings, `<h1>` through `<h6>`, are available.
+
+{{< bs-table >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
+
+```html
+<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+```
+
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{{< example >}}
+<p class="h1">h1. Bootstrap heading</p>
+<p class="h2">h2. Bootstrap heading</p>
+<p class="h3">h3. Bootstrap heading</p>
+<p class="h4">h4. Bootstrap heading</p>
+<p class="h5">h5. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p>
+{{< /example >}}
+
+### Customizing headings
+
+Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
+
+{{< example >}}
+<h3>
+ Fancy display heading
+ <small class="text-muted">With faded secondary text</small>
+</h3>
+{{< /example >}}
+
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+<div class="bd-example">
+ <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 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>
+
+```html
+<h1 class="display-1">Display 1</h1>
+<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>
+```
+
+Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
+
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`.
+
+{{< example >}}
+<p class="lead">
+ This is a lead paragraph. It stands out from regular paragraphs.
+</p>
+{{< /example >}}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{{< example >}}
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined.</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+{{< /example >}}
+
+Beware that those tags should be used for semantic purpose:
+
+- `<mark>` represents text which is marked or highlighted for reference or notation purposes.
+- `<small>` represents side-comments and small print, like copyright and legal text.
+- `<s>` represents element that are no longer relevant or no longer accurate.
+- `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+
+If you want to style your text, you should use the following classes instead:
+
+- `.mark` will apply the same styles as `<mark>`.
+- `.small` will apply the same styles as `<small>`.
+- `.text-decoration-underline` will apply the same styles as `<u>`.
+- `.text-decoration-line-through` will apply the same styles as `<s>`.
+
+While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
+
+## Text utilities
+
+Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
+
+## Abbreviations
+
+Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
+
+Add `.initialism` to an abbreviation for a slightly smaller font-size.
+
+{{< example >}}
+<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
+{{< /example >}}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote.
+
+{{< example >}}
+<blockquote class="blockquote">
+ <p>A well-known quote, contained in a blockquote element.</p>
+</blockquote>
+{{< /example >}}
+
+### Naming a source
+
+The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well.
+
+{{< example >}}
+<figure>
+ <blockquote class="blockquote">
+ <p>A well-known quote, contained in a blockquote element.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer">
+ Someone famous in <cite title="Source Title">Source Title</cite>
+ </figcaption>
+</figure>
+{{< /example >}}
+
+### Alignment
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+{{< example >}}
+<figure class="text-center">
+ <blockquote class="blockquote">
+ <p>A well-known quote, contained in a blockquote element.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer">
+ Someone famous in <cite title="Source Title">Source Title</cite>
+ </figcaption>
+</figure>
+{{< /example >}}
+
+{{< example >}}
+<figure class="text-end">
+ <blockquote class="blockquote">
+ <p>A well-known quote, contained in a blockquote element.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer">
+ Someone famous in <cite title="Source Title">Source Title</cite>
+ </figcaption>
+</figure>
+{{< /example >}}
+
+## Lists
+
+### Unstyled
+
+Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+
+{{< example >}}
+<ul class="list-unstyled">
+ <li>This is a list.</li>
+ <li>It appears completely unstyled.</li>
+ <li>Structurally, it's still a list.</li>
+ <li>However, this style only applies to immediate child elements.</li>
+ <li>Nested lists:
+ <ul>
+ <li>are unaffected by this style</li>
+ <li>will still show a bullet</li>
+ <li>and have appropriate left margin</li>
+ </ul>
+ </li>
+ <li>This may still come in handy in some situations.</li>
+</ul>
+{{< /example >}}
+
+### Inline
+
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+
+{{< example >}}
+<ul class="list-inline">
+ <li class="list-inline-item">This is a list item.</li>
+ <li class="list-inline-item">And another one.</li>
+ <li class="list-inline-item">But they're displayed inline.</li>
+</ul>
+{{< /example >}}
+
+### Description list alignment
+
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{{< example >}}
+<dl class="row">
+ <dt class="col-sm-3">Description lists</dt>
+ <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+ <dt class="col-sm-3">Term</dt>
+ <dd class="col-sm-9">
+ <p>Definition for the term.</p>
+ <p>And some more placeholder definition text.</p>
+ </dd>
+
+ <dt class="col-sm-3">Another term</dt>
+ <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
+
+ <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+ <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
+
+ <dt class="col-sm-3">Nesting</dt>
+ <dd class="col-sm-9">
+ <dl class="row">
+ <dt class="col-sm-4">Nested definition list</dt>
+ <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
+ </dl>
+ </dd>
+</dl>
+{{< /example >}}
+
+## Responsive font sizes
+
+In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+
+## Sass
+
+### Variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-27 17:33:22 +0000