Merge pull request #30354 from twbs/grid-xxl-and-sidebar-toc

v5: Add new `xxl` grid tier and move ToC to a sidebar

.bundlewatch.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.1 kB"
+      "maxSize": "7.2 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",

scss/_variables.scss

@@ -271,13 +271,16 @@ $paragraph-margin-bottom:   1rem !default;
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
+// scss-docs-start grid-breakpoints
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
+  xxl: 1400px
 ) !default;
+// scss-docs-end grid-breakpoints
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
@@ -287,12 +290,15 @@ $grid-breakpoints: (
 //
 // Define the maximum width of `.container` for different screen sizes.
 
+// scss-docs-start container-max-widths
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1140px,
+  xxl: 1320px
 ) !default;
+// scss-docs-end container-max-widths
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
@@ -793,13 +799,15 @@ $form-validation-states: (
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
+// scss-docs-start zindex-stack
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
 $zindex-fixed:                      1030 !default;
 $zindex-modal-backdrop:             1040 !default;
 $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
+// scss-docs-end zindex-stack
 
 
 // Navs

site/assets/scss/_layout.scss

@@ -0,0 +1,35 @@
+.bd-layout {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: $grid-gutter-width;
+    grid-template-areas:
+      "sidebar intro"
+      "sidebar toc"
+      "sidebar content";
+    grid-template-columns: 1fr 3fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "sidebar intro toc"
+      "sidebar content toc";
+    grid-template-columns: 1fr 4fr 1fr;
+  }
+}
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}

site/assets/scss/_toc.scss

@@ -1,24 +1,44 @@
-// stylelint-disable selector-max-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type
 
-.bd-toc nav {
-  padding-top: .125em;
-  padding-bottom: .125em;
-  border-left: .25em solid $gray-200;
-
-  > ul {
-    margin-bottom: 0;
+.bd-toc {
+  @include media-breakpoint-up(lg) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 5rem;
+      right: 0;
+      z-index: 2;
+      height: subtract(100vh, 7rem);
+      overflow-y: auto;
+    }
   }
 
-  li ul li {
-    margin-bottom: .25rem;
-    list-style-type: disc;
-  }
+  nav {
+    @include font-size(.875rem);
 
-  a:not(:hover) {
-    text-decoration: none;
-  }
+    ul {
+      padding-left: 0;
+      list-style: none;
+
+      ul {
+        padding-left: 1rem;
+        margin-top: .25rem;
+      }
+    }
+
+    li {
+      margin-bottom: .25rem;
+    }
+
+    a {
+      color: inherit;
+
+      &:not(:hover) {
+        text-decoration: none;
+      }
 
-  a code {
-    font: inherit;
+      code {
+        font: inherit;
+      }
+    }
   }
 }

site/assets/scss/docs.scss

@@ -37,6 +37,7 @@
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";

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">

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.
 

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.
 

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.**
 

site/content/docs/4.3/examples/grid/index.html

@@ -46,6 +46,12 @@ <h2 class="mt-4">Five grid tiers</h2>
     <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,12 +174,13 @@ <h2 class="mt-4">Gutters</h2>
   <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>
 <div class="container-sm themed-container">.container-sm</div>
 <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>

site/content/docs/4.3/examples/navbars/index.html

@@ -198,6 +198,40 @@
   </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>

site/content/docs/4.3/extend/approach.md

@@ -55,7 +55,7 @@ Bootstrap includes several components that function as an overlay of some kind.
 
 Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
 
-Learn more about this in our [`z-index` layout page]({{< docsref "/layout/overview#z-index" >}}).
+Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
 
 ## HTML and CSS over JS
 

site/content/docs/4.3/getting-started/introduction.md

@@ -67,7 +67,7 @@ Be sure to have your pages set up with the latest design and development standar
 </html>
 {{< /highlight >}}
 
-That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/overview" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
 
 ## Important globals
 

site/content/docs/4.3/getting-started/rfs.md

@@ -61,7 +61,7 @@ When you don't want to use the includes, there are also two functions:
 - `rfs-value()` converts a value into a `rem` value if a `px` value is passed, in other cases it returns the same result.
 - `rfs-fluid-value()` returns the fluid version of a value if the property needs rescaling.
 
-In this example, we use one of Bootstrap's built-in [responsive breakpoint mixins]({{< docsref "/layout/overview#responsive-breakpoints" >}}) to only apply styling below the `lg` breakpoint.
+In this example, we use one of Bootstrap's built-in [responsive breakpoint mixins]({{< docsref "/layout/breakpoints" >}}) to only apply styling below the `lg` breakpoint.
 
 ```scss
 .selector {