Update docs for new XXL grid tier

- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant

12 files changed, 72 insertions, 73 deletions

diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md
index 6b3fe8fc9..5260831da 100644
--- a/site/content/docs/4.3/components/dropdowns.md
+++ b/site/content/docs/4.3/components/dropdowns.md
@@ -607,7 +607,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 
 If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`.
 
 {{< example >}}
 <div class="btn-group">
@@ -622,7 +622,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
 </div>
 {{< /example >}}
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-left`.
 
 {{< example >}}
 <div class="btn-group">
diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
index a8aad394d..c050e164d 100644
--- a/site/content/docs/4.3/components/list-group.md
+++ b/site/content/docs/4.3/components/list-group.md
@@ -96,7 +96,7 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 
 ## Horizontal
 
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
 
diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index 4ae3dddc4..e50821b8c 100644
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -10,7 +10,7 @@ toc: true
 
 Here's what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
 - Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
 - Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
@@ -481,7 +481,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 
 ## Responsive behaviors
 
-Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
 
 For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
 
diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md
index f42d37d68..76b799fca 100644
--- a/site/content/docs/4.3/content/tables.md
+++ b/site/content/docs/4.3/content/tables.md
@@ -721,7 +721,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 ## 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}`.
+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
@@ -802,7 +802,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 
 ### 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.
+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.**
 
diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html
index 0d32279f3..9c01604be 100644
--- a/site/content/docs/4.3/examples/grid/index.html
+++ b/site/content/docs/4.3/examples/grid/index.html
@@ -46,6 +46,12 @@ include_js: false
     <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
   </div>
 
+  <div class="row mb-3">
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+  </div>
+
   <h2 class="mt-4">Three equal columns</h2>
   <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
   <div class="row mb-3">
@@ -168,7 +174,7 @@ include_js: false
   <hr class="my-4">
 
   <h2 class="mt-4">Containers</h2>
-  <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
+  <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
 </div>
 
 <div class="container themed-container">.container</div>
@@ -176,4 +182,5 @@ include_js: false
 <div class="container-md themed-container">.container-md</div>
 <div class="container-lg themed-container">.container-lg</div>
 <div class="container-xl themed-container">.container-xl</div>
+<div class="container-xxl themed-container">.container-xxl</div>
 <div class="container-fluid themed-container">.container-fluid</div>
diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html
index 6cd9ae380..8a5d4113c 100644
--- a/site/content/docs/4.3/examples/navbars/index.html
+++ b/site/content/docs/4.3/examples/navbars/index.html
@@ -198,6 +198,40 @@ extra_css:
   </div>
 </nav>
 
+<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Expand at xxl</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
+        <li class="nav-item active">
+          <a class="nav-link" aria-current="page" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
+          <ul class="dropdown-menu" aria-labelledby="dropdownXxl">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form>
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+      </form>
+    </div>
+  </div>
+</nav>
+
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
     <a class="navbar-brand" href="#">Container</a>
diff --git a/site/content/docs/4.3/layout/breakpoints.md b/site/content/docs/4.3/layout/breakpoints.md
index d33a2eda2..48ddeba5f 100644
--- a/site/content/docs/4.3/layout/breakpoints.md
+++ b/site/content/docs/4.3/layout/breakpoints.md
@@ -65,16 +65,7 @@ Each breakpoint size was chosen to be a multiple of 12 and to be representative
 
 These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
 
-{{< highlight scss >}}
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
 
diff --git a/site/content/docs/4.3/layout/containers.md b/site/content/docs/4.3/layout/containers.md
index 12e688a73..9b5afee74 100644
--- a/site/content/docs/4.3/layout/containers.md
+++ b/site/content/docs/4.3/layout/containers.md
@@ -153,15 +153,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 
 As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
 
-{{< highlight scss >}}
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 
diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 209f806dd..b55abae04 100644
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -141,7 +141,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 
 ### Equal-width
 
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 {{< example class="bd-example-row" >}}
 <div class="container">
@@ -418,30 +418,11 @@ Variables and maps determine the number of columns, the gutter width, and the me
 {{< highlight scss >}}
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
+{{< /highlight >}}
 
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 576px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px,
-  // Extra extra large screen / wide desktop
-  xxl: 1400px
-);
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
 ### Mixins
 
diff --git a/site/content/docs/4.3/layout/z-index.md b/site/content/docs/4.3/layout/z-index.md
index 2c732d5f1..1870d05d2 100644
--- a/site/content/docs/4.3/layout/z-index.md
+++ b/site/content/docs/4.3/layout/z-index.md
@@ -11,20 +11,6 @@ These higher values start at an arbitrary number, high and specific enough to id
 
 We don't encourage customization of these individual values; should you change one, you likely need to change them all.
 
-{{< highlight scss >}}
-{{< zindex.inline >}}
-{{- $file := readFile "scss/_variables.scss" -}}
-{{- $matches := findRE `\$zindex\-.+;` $file -}}
-
-{{- if (eq (len $matches) 0) -}}
-{{- errorf "Got no matches for $zindex- in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- range $matches }}
-{{ . | replaceRE "\\s{13}" "    " }}
-{{- end -}}
-
-{{< /zindex.inline >}}
-{{< /highlight >}}
+{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
 
 To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
diff --git a/site/content/docs/4.3/utilities/display.md b/site/content/docs/4.3/utilities/display.md
index 3f8f5ab23..b80266af0 100644
--- a/site/content/docs/4.3/utilities/display.md
+++ b/site/content/docs/4.3/utilities/display.md
@@ -12,12 +12,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
 
 ## Notation
 
-Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
 As such, the classes are named using the format:
 
 * `.d-{value}` for `xs`
-* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
+* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *value* is one of:
 
@@ -33,7 +33,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
 
-The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
+The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
 
 ## Examples
 
@@ -51,9 +51,9 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
 
 <table class="table">
   <thead>
@@ -88,6 +88,10 @@ To show an element only on a given interval of screen sizes you can combine one
       <td><code>.d-xl-none</code></td>
     </tr>
     <tr>
+      <td>Hidden only on xxl</td>
+      <td><code>.d-xxl-none</code></td>
+    </tr>
+    <tr>
       <td>Visible on all</td>
       <td><code>.d-block</code></td>
     </tr>
@@ -109,7 +113,11 @@ To show an element only on a given interval of screen sizes you can combine one
     </tr>
     <tr>
       <td>Visible only on xl</td>
-      <td><code>.d-none .d-xl-block</code></td>
+      <td><code>.d-none .d-xl-block .d-xxl-none</code></td>
+    </tr>
+    <tr>
+      <td>Visible only on xxl</td>
+      <td><code>.d-none .d-xxl-block</code></td>
     </tr>
   </tbody>
 </table>
diff --git a/site/content/docs/4.3/utilities/spacing.md b/site/content/docs/4.3/utilities/spacing.md
index 25e1579d6..58e16ec68 100644
--- a/site/content/docs/4.3/utilities/spacing.md
+++ b/site/content/docs/4.3/utilities/spacing.md
@@ -12,9 +12,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
 
 ## Notation
 
-Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *property* is one of: