aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/docs/4.1/content
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/content')
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/code.md55
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/figures.md28
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/images.md84
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md364
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/tables.md831
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.1/content/typography.md331
6 files changed, 1693 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/code.md b/vendor/twbs/bootstrap/site/docs/4.1/content/code.md
new file mode 100644
index 000000000..d1ce12ccd
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/code.md
@@ -0,0 +1,55 @@
+---
+layout: docs
+title: Code
+description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
+group: content
+toc: true
+---
+
+## Inline code
+
+Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
+
+{% capture example %}
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+{% endcapture %}
+{% include example.html content=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. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
+
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Variables
+
+For indicating variables use the `<var>` tag.
+
+{% capture example %}
+<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+{% endcapture %}
+{% include example.html content=example %}
+
+## User input
+
+Use the `<kbd>` to indicate input that is typically entered via keyboard.
+
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Sample output
+
+For indicating sample output from a program use the `<samp>` tag.
+
+{% capture example %}
+<samp>This text is meant to be treated as sample output from a computer program.</samp>
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/figures.md b/vendor/twbs/bootstrap/site/docs/4.1/content/figures.md
new file mode 100644
index 000000000..7041997ba
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/figures.md
@@ -0,0 +1,28 @@
+---
+layout: docs
+title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
+group: content
+---
+
+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.
+
+{% capture example %}
+<figure class="figure">
+ <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+ <figcaption class="figure-caption">A caption for the above image.</figcaption>
+</figure>
+{% endcapture %}
+{% include example.html content=example %}
+
+Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
+
+{% capture example %}
+<figure class="figure">
+ <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+ <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
+</figure>
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/images.md b/vendor/twbs/bootstrap/site/docs/4.1/content/images.md
new file mode 100644
index 000000000..49576da9d
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/images.md
@@ -0,0 +1,84 @@
+---
+layout: docs
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+group: content
+toc: true
+---
+
+## Responsive images
+
+Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+
+<div class="bd-example">
+ <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image">
+</div>
+
+{% highlight html %}
+<img src="..." class="img-fluid" alt="Responsive image">
+{% endhighlight %}
+
+{% capture callout %}
+##### SVG images and IE 10
+
+In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+<div class="bd-example bd-example-images">
+ <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="img-thumbnail">
+{% endhighlight %}
+
+## Aligning images
+
+Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
+
+<div class="bd-example bd-example-images">
+ <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
+ <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
+</div>
+
+{% highlight html %}
+<img src="..." class="rounded float-left" alt="...">
+<img src="..." class="rounded float-right" alt="...">
+{% endhighlight %}
+
+<div class="bd-example bd-example-images">
+ <img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
+</div>
+
+{% highlight html %}
+<img src="..." class="rounded mx-auto d-block" alt="...">
+{% endhighlight %}
+
+<div class="bd-example bd-example-images">
+ <div class="text-center">
+ <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
+ </div>
+</div>
+
+{% highlight html %}
+<div class="text-center">
+ <img src="..." class="rounded" alt="...">
+</div>
+{% endhighlight %}
+
+
+## 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.
+
+{% highlight html %}
+​<picture>
+ <source srcset="..." type="image/svg+xml">
+ <img src="..." class="img-fluid img-thumbnail" alt="...">
+</picture>
+{% endhighlight %}
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md b/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md
new file mode 100644
index 000000000..0b9375d0a
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/reboot.md
@@ -0,0 +1,364 @@
+---
+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
+redirect_from: "/docs/4.1/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.
+
+## 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.
+- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. 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
+
+The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+
+{% highlight sass %}
+$font-family-sans-serif:
+ // Safari for OS X and iOS (San Francisco)
+ -apple-system,
+ // Chrome < 56 for OS X (San Francisco)
+ BlinkMacSystemFont,
+ // Windows
+ "Segoe UI",
+ // Android
+ "Roboto",
+ // Basic web fallback
+ "Helvetica Neue", Arial, sans-serif,
+ // Emoji fonts
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+{% endhighlight %}
+
+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.
+
+<table>
+ <thead>
+ <tr>
+ <th>Heading</th>
+ <th>Example</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ {{ "`<h1></h1>`" | markdownify }}
+ </td>
+ <td><span class="h1">h1. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h2></h2>`" | markdownify }}
+ </td>
+ <td><span class="h2">h2. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h3></h3>`" | markdownify }}
+ </td>
+ <td><span class="h3">h3. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h4></h4>`" | markdownify }}
+ </td>
+ <td><span class="h4">h4. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h5></h5>`" | markdownify }}
+ </td>
+ <td><span class="h5">h5. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h6></h6>`" | markdownify }}
+ </td>
+ <td><span class="h6">h6. Bootstrap heading</span></td>
+ </tr>
+ </tbody>
+</table>
+
+## Lists
+
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
+
+<div class="bd-example">
+{% capture markdown %}
+* Lorem ipsum dolor sit amet
+* Consectetur adipiscing elit
+* Integer molestie lorem at massa
+* Facilisis in pretium nisl aliquet
+* Nulla volutpat aliquam velit
+ * Phasellus iaculis neque
+ * Purus sodales ultricies
+ * Vestibulum laoreet porttitor sem
+ * Ac tristique libero volutpat at
+* Faucibus porta lacus fringilla vel
+* Aenean sit amet erat nunc
+* Eget porttitor lorem
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+{% endcapture %}
+{{ markdown | markdownify }}
+</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>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
+</div>
+
+## Preformatted text
+
+The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+<div class="bd-example">
+<pre>
+.example-element {
+ margin-bottom: 1rem;
+}
+</pre>
+</div>
+
+## 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/tables/).
+
+<div class="bd-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>
+</div>
+
+## 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.
+
+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="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="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="button" value="Input button">
+ </p>
+
+ <p>
+ <button type="submit" disabled>Button submit</button>
+ <input type="submit" value="Input submit button" disabled>
+ <input type="button" value="Input button" disabled>
+ </p>
+ </fieldset>
+</form>
+
+## 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</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+ </blockquote>
+</div>
+
+### Inline elements
+
+The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
+
+<div class="bd-example">
+ Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
+</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. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
+
+{% highlight html %}
+<input type="text" hidden>
+{% endhighlight %}
+
+{% capture callout %}
+##### 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.
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
+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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/tables.md b/vendor/twbs/bootstrap/site/docs/4.1/content/tables.md
new file mode 100644
index 000000000..8799d47f2
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/tables.md
@@ -0,0 +1,831 @@
+---
+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
+---
+
+## Examples
+
+Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
+
+Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
+
+{% capture 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
+
+{% capture 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Table head options
+
+Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.
+
+{% capture example %}
+<table class="table">
+ <thead class="thead-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>
+
+<table class="table">
+ <thead class="thead-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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Striped rows
+
+Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
+
+{% capture example %}
+<table class="table table-striped">
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<table class="table table-striped 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Bordered table
+
+Add `.table-bordered` for borders on all sides of the table and cells.
+
+{% capture example %}
+<table class="table 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<table class="table table-bordered 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Borderless table
+
+Add `.table-borderless` for a table without borders.
+
+{% capture example %}
+<table class="table table-borderless">
+ <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 colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endcapture %}
+{% include example.html content=example %}
+
+`.table-borderless` can also be used on dark tables.
+
+{% capture example %}
+<table class="table table-borderless 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Hoverable rows
+
+Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
+
+{% capture example %}
+<table class="table table-hover">
+ <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 colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<table class="table table-hover 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Small table
+
+Add `.table-sm` to make tables more compact by cutting cell padding in half.
+
+{% capture example %}
+<table class="table table-sm">
+ <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 colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+</table>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<table class="table table-sm 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>
+ <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>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Contextual classes
+
+Use contextual classes to color 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 class="table-active">
+ <th scope="row">Active</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">Default</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+
+ {% for color in site.data.theme-colors %}
+ <tr class="table-{{ color.name }}">
+ <th scope="row">{{ color.name | capitalize }}</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>{% endfor %}
+ </tbody>
+ </table>
+</div>
+
+{% highlight html %}
+<!-- On rows -->
+<tr class="table-active">...</tr>
+{% for color in site.data.theme-colors %}
+<tr class="table-{{ color.name }}">...</tr>{% endfor %}
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+ <td class="table-active">...</td>
+ {% for color in site.data.theme-colors %}
+ <td class="table-{{ color.name }}">...</td>{% endfor %}
+</tr>
+{% endhighlight %}
+
+Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
+
+<div class="bd-example">
+ <table class="table table-dark">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="bg-primary">
+ <th scope="row">1</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr class="bg-success">
+ <th scope="row">3</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr class="bg-info">
+ <th scope="row">5</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">6</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr class="bg-warning">
+ <th scope="row">7</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">8</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr class="bg-danger">
+ <th scope="row">9</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight html %}
+<!-- On rows -->
+<tr class="bg-primary">...</tr>
+<tr class="bg-success">...</tr>
+<tr class="bg-warning">...</tr>
+<tr class="bg-danger">...</tr>
+<tr class="bg-info">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+ <td class="bg-primary">...</td>
+ <td class="bg-success">...</td>
+ <td class="bg-warning">...</td>
+ <td class="bg-danger">...</td>
+ <td class="bg-info">...</td>
+</tr>
+{% endhighlight %}
+
+{% include callout-warning-color-assistive-technologies.md %}
+
+Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
+
+{% include callout-info-mediaqueries-breakpoints.md %}
+
+## 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.
+
+{% capture example %}
+<table class="table">
+ <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>
+{% endcapture %}
+{% include example.html content=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}`.
+
+{% capture callout %}
+##### 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.
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
+### 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>
+
+{% highlight html %}
+<div class="table-responsive">
+ <table class="table">
+ ...
+ </table>
+</div>
+{% endhighlight %}
+
+### Breakpoint specific
+
+Use `.table-responsive{-sm|-md|-lg|-xl}` 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.**
+
+{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<div class="bd-example">
+<div class="table-responsive{{ bp.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>
+{% highlight html %}
+<div class="table-responsive{{ bp.abbr }}">
+ <table class="table">
+ ...
+ </table>
+</div>
+{% endhighlight %}
+{% endunless %}{% endfor %}
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md b/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md
new file mode 100644
index 000000000..795f807b6
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/docs/4.1/content/typography.md
@@ -0,0 +1,331 @@
+---
+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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/).
+
+- Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/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 assume the browser 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` and apply link underlines only on `:hover`.
+- 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.
+
+<table>
+ <thead>
+ <tr>
+ <th>Heading</th>
+ <th>Example</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ {{ "`<h1></h1>`" | markdownify }}
+ </td>
+ <td><span class="h1">h1. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h2></h2>`" | markdownify }}
+ </td>
+ <td><span class="h2">h2. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h3></h3>`" | markdownify }}
+ </td>
+ <td><span class="h3">h3. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h4></h4>`" | markdownify }}
+ </td>
+ <td><span class="h4">h4. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h5></h5>`" | markdownify }}
+ </td>
+ <td><span class="h5">h5. Bootstrap heading</span></td>
+ </tr>
+ <tr>
+ <td>
+ {{ "`<h6></h6>`" | markdownify }}
+ </td>
+ <td><span class="h6">h6. Bootstrap heading</span></td>
+ </tr>
+ </tbody>
+</table>
+
+{% highlight 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>
+{% endhighlight %}
+
+`.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.
+
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+### Customizing headings
+
+Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
+
+<div class="bd-example">
+ <span class="h3">
+ Fancy display heading
+ <small class="text-muted">With faded secondary text</small>
+ </span>
+</div>
+
+{% highlight html %}
+<h3>
+ Fancy display heading
+ <small class="text-muted">With faded secondary text</small>
+</h3>
+{% endhighlight %}
+
+## 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 bd-example-type">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td><span class="display-1">Display 1</span></td>
+ </tr>
+ <tr>
+ <td><span class="display-2">Display 2</span></td>
+ </tr>
+ <tr>
+ <td><span class="display-3">Display 3</span></td>
+ </tr>
+ <tr>
+ <td><span class="display-4">Display 4</span></td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight 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>
+{% endhighlight %}
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`.
+
+{% capture example %}
+<p class="lead">
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+</p>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.
+
+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, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/) and [color utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/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.
+
+{% capture example %}
+<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
+
+{% capture example %}
+<blockquote class="blockquote">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+{% endcapture %}
+{% include example.html content=example %}
+
+### Naming a source
+
+Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
+
+{% capture example %}
+<blockquote class="blockquote">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+{% endcapture %}
+{% include example.html content=example %}
+
+### Alignment
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+{% capture example %}
+<blockquote class="blockquote text-center">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<blockquote class="blockquote text-right">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+{% endcapture %}
+{% include example.html content=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.
+
+{% capture example %}
+<ul class="list-unstyled">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+</ul>
+{% endcapture %}
+{% include example.html content=example %}
+
+### Inline
+
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+
+{% capture example %}
+<ul class="list-inline">
+ <li class="list-inline-item">Lorem ipsum</li>
+ <li class="list-inline-item">Phasellus iaculis</li>
+ <li class="list-inline-item">Nulla volutpat</li>
+</ul>
+{% endcapture %}
+{% include example.html content=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.
+
+{% capture 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">Euismod</dt>
+ <dd class="col-sm-9">
+ <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus.</p>
+ </dd>
+
+ <dt class="col-sm-3">Malesuada porta</dt>
+ <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+ <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+ <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+ </dl>
+ </dd>
+</dl>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Responsive typography
+
+*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+
+Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
+
+{% highlight scss %}
+html {
+ font-size: 1rem;
+}
+
+@include media-breakpoint-up(sm) {
+ html {
+ font-size: 1.2rem;
+ }
+}
+
+@include media-breakpoint-up(md) {
+ html {
+ font-size: 1.4rem;
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ html {
+ font-size: 1.6rem;
+ }
+}
+{% endhighlight %}