diff --git a/scss/_variables.scss b/scss/_variables.scss index 0be9a9ab13..8d7c56afa2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -271,6 +271,7 @@ $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, @@ -279,6 +280,7 @@ $grid-breakpoints: ( 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"); @@ -288,6 +290,7 @@ $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, @@ -295,6 +298,7 @@ $container-max-widths: ( xl: 1140px, xxl: 1320px ) !default; +// scss-docs-end container-max-widths @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -795,6 +799,7 @@ $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; @@ -802,6 +807,7 @@ $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; +// scss-docs-end zindex-stack // Navs diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss new file mode 100644 index 0000000000..116df720ee --- /dev/null +++ b/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 `
` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index cc9a6d6ddf..17ac4b819c 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,6 +1,6 @@
-// stylelint-disable selector-max-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type
 
-.bd-toc-wrap {
+.bd-toc {
   @include media-breakpoint-up(lg) {
     @supports (position: sticky) {
       position: sticky;
@@ -11,34 +11,34 @@
       overflow-y: auto;
     }
   }
-}
 
-.bd-toc nav {
-  @include font-size(.875rem);
-
-  ul {
-    padding-left: 0;
-    list-style: none;
+  nav {
+    @include font-size(.875rem);
 
     ul {
-      padding-left: 1rem;
-      margin-top: .25rem;
+      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;
+      }
+
+      code {
+        font: inherit;
+      }
     }
   }
-
-  li {
-    margin-bottom: .25rem;
-  }
-
-  a {
-    color: inherit;
-  }
-
-  a:not(:hover) {
-    text-decoration: none;
-  }
-
-  a code {
-    font: inherit;
-  }
 }
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 53622b9c2c..4da387aa4a 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -37,6 +37,7 @@
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";
diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md
index 6b3fe8fc9e..5260831da9 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 >}}
 

@@ -622,7 +622,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
 

 {{< /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 >}}
 

diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
index a8aad394d4..c050e164d4 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 4ae3dddc4a..e50821b8c0 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 f42d37d683..76b799fca3 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 `` 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 0d32279f39..9c01604be5 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
     
.col-xl-4

   

 
+  

+    
.col-xxl-4

+    
.col-xxl-4

+    
.col-xxl-4

+  

+
   
Three equal columns

   
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

   

@@ -168,7 +174,7 @@ include_js: false
   

 
   
Containers

-  
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

+  
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

 

 
 
.container

@@ -176,4 +182,5 @@ include_js: false
 
.container-md

 
.container-lg

 
.container-xl

+
.container-xxl

 
.container-fluid

diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html
index 6cd9ae380e..8a5d4113c4 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:
   
 
 
+
+