`. Be sure to escape HTML angle brackets.
-
-{{< example >}}
-For example, <section> should be wrapped as inline.
-{{< /example >}}
-
-## Code blocks
-
-Use ``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.
-
-{{< example >}}
-<p>Sample text here...</p>
-<p>And another line of sample text here...</p>
-` tag.
-
-{{< example >}}
-y = m x + b
-{{< /example >}}
-
-## User input
-
-Use the `` to indicate input that is typically entered via keyboard.
-
-{{< example >}}
-To switch directories, type cd followed by the name of the directory.ctrl + , ` tag.
-
-{{< example >}}
-This text is meant to be treated as sample output from a computer program.
-{{< /example >}}
diff --git a/admin/tool/componentlibrary/content/bootstrap/content/figures.md b/admin/tool/componentlibrary/content/bootstrap/content/figures.md
deleted file mode 100644
index 036b66aafa3..00000000000
--- a/admin/tool/componentlibrary/content/bootstrap/content/figures.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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 ``.
-
-Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `
- {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
- A caption for the above image.
-
-{{< /example >}}
-
-Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
-
-{{< example >}}
-
- {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
- A caption for the above image.
-
-{{< /example >}}
diff --git a/admin/tool/componentlibrary/content/bootstrap/content/images.md b/admin/tool/componentlibrary/content/bootstrap/content/images.md
deleted file mode 100644
index f5af9d08c38..00000000000
--- a/admin/tool/componentlibrary/content/bootstrap/content/images.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-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.
-
-{{< example >}}
-{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
-{{< /example >}}
-
-{{< callout warning >}}
-##### SVG images and Internet Explorer
-
-In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100%;` or `.w-100` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
-{{< /callout >}}
-
-## 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 >}}
-
- {{< placeholder width="200" height="200" class="rounded" >}}
-
-{{< /example >}}
-
-
-## Picture
-
-If you are using the `` element to specify multiple `` elements for a specific `` tag.
-
-```html
-
-
-
-```
diff --git a/admin/tool/componentlibrary/content/bootstrap/content/reboot.md b/admin/tool/componentlibrary/content/bootstrap/content/reboot.md
deleted file mode 100644
index b882c808193..00000000000
--- a/admin/tool/componentlibrary/content/bootstrap/content/reboot.md
+++ /dev/null
@@ -1,360 +0,0 @@
----
-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/4.6/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 `` 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 `` and `` 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 ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
-- The `` 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 `` 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/).
-
-```scss
-$font-family-sans-serif:
- // Safari for macOS and iOS (San Francisco)
- -apple-system,
- // Chrome < 56 for macOS (San Francisco)
- BlinkMacSystemFont,
- // Windows
- "Segoe UI",
- // Android
- Roboto,
- // Basic web fallback
- "Helvetica Neue", Arial,
- // Linux
- "Noto Sans",
- "Liberation Sans",
- // 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 multi-colored 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 `` 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., ``—and ` ` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
-
-
-
-
- Heading
- Example
-
-
-
-
-
- {{< markdown >}}`
- h1. Bootstrap heading
-
-
- {{< markdown >}}`
- h2. Bootstrap heading
-
-
- {{< markdown >}}`
- h3. Bootstrap heading
-
-
- {{< markdown >}}`
- h4. Bootstrap heading
-
-
- {{< markdown >}}`
- h5. Bootstrap heading
-
-
- {{< markdown >}}`
- h6. Bootstrap heading
-
-
-
-## Lists
-
-All lists—``, ``, and ``—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
-
-
-{{< 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 >}}
-
-
-For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. ``s reset `margin-left` to `0` and add `margin-bottom: .5rem`. ` `s are **bolded**.
-
-
-
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- A second definition for the same term.
- Another term
- Definition for this other term.
-
-
` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
-
-
-
-.example-element {
- margin-bottom: 1rem;
-}
-
-
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
-
-
-
-
- This is an example table, and this is its caption to describe the contents.
-
-
-
- Table heading
- Table heading
- Table heading
- Table heading
-
-
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
-
-
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
-- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
-- ``s are set to `display: inline-block` to allow `margin` to be applied.
-- ``s, `
-
-
- Example date
-
-
- Example time
-
-
- Example output
- 100
-
-
- Button submit
-
-
- Button submit
-
-
-
-
-### 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 `` elements, which get their own `cursor` change.
-
-{{< example >}}
-Non-button element button
-{{< /example >}}
-
-## Misc elements
-
-### Address
-
-The `` 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. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
-
- Twitter, Inc. P: (123) 456-7890
-
-
-
- Full Name first.last@example.com
-
-
-
- A well-known quote, contained in a blockquote element.
- Someone famous in Source Title
-
-
` element receives basic styling to make it stand out amongst paragraph text.
-
-
- Nulla
attr vitae elit libero, a pharetra augue.
-
-
- Some details
- More info about the details.
-
-
-
- Even more details
- Here are even more details about the details.
-
-
`, 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.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Table head options
-
-Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Striped rows
-
-Use `.table-striped` to add zebra-striping to any table row within the ` `.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Bordered table
-
-Add `.table-bordered` for borders on all sides of the table and cells.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Borderless table
-
-Add `.table-borderless` for a table without borders.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-`.table-borderless` can also be used on dark tables.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Hoverable rows
-
-Add `.table-hover` to enable a hover state on table rows within a ` `.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Small table
-
-Add `.table-sm` to make tables more compact by cutting cell padding in half.
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-{{< example >}}
-
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-{{< /example >}}
-
-## Contextual classes
-
-Use contextual classes to color table rows or individual cells.
-
-
-
-
-
- Class
- Heading
- Heading
-
-
-
-
- Active
- Cell
- Cell
-
-
- Default
- Cell
- Cell
-
- {{< table.inline >}}
- {{- range (index $.Site.Data "theme-colors") }}
-
- {{ .name | title }}
- Cell
- Cell
-
- {{- end -}}
- {{< /table.inline >}}
-
-
-
... {{< table.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-...
-{{- end -}}
-{{< /table.inline >}}
-
-
-
- ... {{< table.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
- ...
-{{- end -}}
-{{< /table.inline >}}
-
-{{< /highlight >}}
-
-Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles.
-
-
-
-
-
- #
- Heading
- Heading
-
-
-
-
- 1
- Cell
- Cell
-
-
- 2
- Cell
- Cell
-
-
- 3
- Cell
- Cell
-
-
- 4
- Cell
- Cell
-
-
- 5
- Cell
- Cell
-
-
- 6
- Cell
- Cell
-
-
- 7
- Cell
- Cell
-
-
- 8
- Cell
- Cell
-
-
- 9
- Cell
- Cell
-
-
-
-
...
-...
-...
-...
-...
-
-
-
- ...
- ...
- ...
- ...
- ...
-
-```
-
-{{< callout warning >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{< /callout >}}
-
-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.
-
-{{< callout info >}}
-{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
-{{< /callout >}}
-
-## Captions
-
-A `` 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.
-
-{{< example >}}
-
- List of users
-
-
- #
- First
- Last
- Handle
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-{{< /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}`.
-
-{{< 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.
-
-
-
-
-
-
- #
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
-
-
-
-
- 1
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 2
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 3
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
-
-
-
-
-
-
-
- #
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
-
-
-
-
- 1
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 2
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 3
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
-
-
-
` through ``, are available.
-
-
-
-
- Heading
- Example
-
-
-
-
-
- {{< markdown >}}`
- h1. Bootstrap heading
-
-
- {{< markdown >}}`
- h2. Bootstrap heading
-
-
- {{< markdown >}}`
- h3. Bootstrap heading
-
-
- {{< markdown >}}`
- h4. Bootstrap heading
-
-
- {{< markdown >}}`
- h5. Bootstrap heading
-
-
- {{< markdown >}}`
- h6. Bootstrap heading
-
-
-
-```html
-h1. Bootstrap heading
-h2. Bootstrap heading
-h3. Bootstrap heading
-h4. Bootstrap heading
-h5. Bootstrap heading
-h6. Bootstrap heading
-```
-
-`.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 >}}
-h1. Bootstrap heading
-h2. Bootstrap heading
-h3. Bootstrap heading
-h4. Bootstrap heading
-h5. Bootstrap heading
-h6. Bootstrap heading
-{{< /example >}}
-
-### Customizing headings
-
-Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
-
-{{< example >}}
-
- Fancy display heading
- With faded secondary text
-
-{{< /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. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
-
-
-
-
-
- Display 1
-
- Display 2
-
- Display 3
-
- Display 4
-
-
-
Display 1
-Display 2
-Display 3
-Display 4
-```
-
-## Lead
-
-Make a paragraph stand out by adding `.lead`.
-
-{{< example >}}
-
- This is a lead paragraph. It stands out from regular paragraphs.
-
-{{< /example >}}
-
-## Inline text elements
-
-Styling for common inline HTML5 elements.
-
-{{< example >}}
-You can use the mark tag to highlight text.
-This line of text is meant to be treated as deleted text.
-This line of text is meant to be treated as no longer accurate.
-This line of text is meant to be treated as an addition to the document.
-This line of text will render as underlined
-This line of text is meant to be treated as fine print.
-This line rendered as bold text.
-This line rendered as italicized text.
-{{< /example >}}
-
-`.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring.
-
-While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc.
-
-## Text utilities
-
-Change text alignment, transform, style, weight, and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
-
-## Abbreviations
-
-Stylized implementation of HTML's `` 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 >}}
-attr
-HTML
-{{< /example >}}
-
-## Blockquotes
-
-For quoting blocks of content from another source within your document. Wrap `` around any HTML as the quote.
-
-{{< example >}}
-
- A well-known quote, contained in a blockquote element.
-
-{{< /example >}}
-
-### Naming a source
-
-Add a `