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

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" >}}).
 

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.
 

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,31 +418,12 @@ Variables and maps determine the number of columns, the gutter width, and the me
 {{< highlight scss >}}
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
-
-$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
-);
-
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
 {{< /highlight >}}
 
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
+
 ### Mixins
 
 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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.