v6: `justify-items` and `place-items` utilities (#41757)

* Add utilities for place-items and justify-items

* bump

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index e9b4540e9ef9bb5f7031129d195f27e6798234d0..0177b5f615c9bbad11d6fed8b8739f7edf7b78ed 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.5 kB"
+      "maxSize": "7.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",

diff --git a/scss/_root.scss b/scss/_root.scss
index 9a7ee1f91d6561c7ac283f28e44f1a4c5e64d856..241147aa6526d71a57a1d5f543b41bb2f4159ba4 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -9,7 +9,7 @@
 @use "forms/form-variables" as *;
 
 // mdo-do: do we need theme?
-@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+@layer colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities;
 
 :root {
   color-scheme: light dark;

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 1baeeb77c0137577cfc22e08bd7c7a71fd462cd9..890bff981304727cef742f2deafcb9a44c181c5a 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -355,6 +355,16 @@ $utilities: map.merge(
         evenly: space-evenly,
       )
     ),
+    "justify-items": (
+      responsive: true,
+      property: justify-items,
+      values: (
+        start: start,
+        end: end,
+        center: center,
+        stretch: stretch,
+      )
+    ),
     "justify-self": (
       responsive: true,
       property: justify-self,
@@ -399,6 +409,16 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    "place-items": (
+      responsive: true,
+      property: place-items,
+      values: (
+        start: start,
+        end: end,
+        center: center,
+        stretch: stretch,
+      )
+    ),
     "order": (
       responsive: true,
       property: order,

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index a65a895ca9cd43c3e2c6f9d0ab8c5d3399f2efec..0b3abbaddf54f7571091d16c65d835a5ad0fb716 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -27,9 +27,11 @@ $utilities: map-get-multiple(
     "flex-shrink",
     "flex-wrap",
     "justify-content",
+    "justify-items",
     "align-items",
     "align-content",
     "align-self",
+    "place-items",
     "margin",
     "margin-x",
     "margin-y",

diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx
index 62722619246d456e8285c4b89692dd0938364a29..0b0e562c93202cc788806389e2a0d3ead90c2e31 100644 (file)
--- a/site/src/content/docs/utilities/flex.mdx
+++ b/site/src/content/docs/utilities/flex.mdx
@@ -623,6 +623,108 @@ Responsive variations also exist for `align-content`.
 })}
 </ul>
 
+## CSS Grid utilities
+
+While most of the utilities above apply to flexbox containers, Bootstrap also includes utilities specifically for CSS Grid layouts.
+
+### Justify items
+
+Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. Choose from `start`, `end`, `center`, or `stretch` (browser default).
+
+<div class="bd-example bd-example-flex vstack gap-3">
+  <div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+</div>
+
+```html
+<div class="d-grid justify-items-start">...</div>
+<div class="d-grid justify-items-end">...</div>
+<div class="d-grid justify-items-center">...</div>
+<div class="d-grid justify-items-stretch">...</div>
+```
+
+Responsive variations also exist for `justify-items`.
+
+<ul>
+{getData('breakpoints').map((breakpoint) => {
+  return (
+    <Fragment>
+      <li><code>.justify-items{breakpoint.abbr}-start</code></li>
+      <li><code>.justify-items{breakpoint.abbr}-end</code></li>
+      <li><code>.justify-items{breakpoint.abbr}-center</code></li>
+      <li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
+    </Fragment>
+  )
+})}
+</ul>
+
+### Place items
+
+Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. Choose from `start`, `end`, `center`, or `stretch` (browser default).
+
+<div class="bd-example bd-example-flex vstack gap-3">
+  <div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+  <div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+    <div class="p-2">Grid item</div>
+  </div>
+</div>
+
+```html
+<div class="d-grid place-items-start">...</div>
+<div class="d-grid place-items-end">...</div>
+<div class="d-grid place-items-center">...</div>
+<div class="d-grid place-items-stretch">...</div>
+```
+
+Responsive variations also exist for `place-items`.
+
+<ul>
+{getData('breakpoints').map((breakpoint) => {
+  return (
+    <Fragment>
+      <li><code>.place-items{breakpoint.abbr}-start</code></li>
+      <li><code>.place-items{breakpoint.abbr}-end</code></li>
+      <li><code>.place-items{breakpoint.abbr}-center</code></li>
+      <li><code>.place-items{breakpoint.abbr}-stretch</code></li>
+    </Fragment>
+  )
+})}
+</ul>
+
 ## Media object
 
 Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
@@ -651,6 +753,6 @@ And say you want to vertically center the content next to the image:
 
 ### Sass utilities API
 
-Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+Flexbox and CSS Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
 <ScssDocs name="utils-flex" file="scss/_utilities.scss" />

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 60508fa5f52fc20c8d9e51c128b0767813306331..4c42abc4de690ca41d546024b9e9a944db903edf 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -9,392 +9,394 @@
 // Docs examples
 //
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color);
-  border-width: 1px 0;
+@layer custom {
+  .bd-code-snippet {
+    margin: 0 ($bd-gutter-x * -.5) 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0;
 
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--bs-border-radius));
+    @include media-breakpoint-up(md) {
+      margin-right: 0;
+      margin-left: 0;
+      border-width: 1px;
+      @include border-radius(var(--bs-border-radius));
+    }
   }
-}
 
-.bd-example {
-  --bd-example-padding: 1rem;
+  .bd-example {
+    --bd-example-padding: 1rem;
 
-  position: relative;
-  display: flow-root;
-  padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color);
-  border-width: 1px 0;
+    position: relative;
+    display: flow-root;
+    padding: var(--bd-example-padding);
+    margin: 0 ($bd-gutter-x * -.5) 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0;
 
-  @include media-breakpoint-up(md) {
-    --bd-example-padding: 1.5rem;
+    @include media-breakpoint-up(md) {
+      --bd-example-padding: 1.5rem;
 
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--bs-border-radius));
-  }
+      margin-right: 0;
+      margin-left: 0;
+      border-width: 1px;
+      @include border-radius(var(--bs-border-radius));
+    }
 
-  + p {
-    margin-top: 2rem;
-  }
+    + p {
+      margin-top: 2rem;
+    }
+
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
+    }
 
-  > .form-control {
-    + .form-control {
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: $spacer;
+    }
+
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
+
+    > :last-child,
+    > nav:last-child .breadcrumb {
+      margin-bottom: 0;
+    }
+
+    > hr:last-child {
+      margin-bottom: $spacer;
+    }
+
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
+
+    // Buttons
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
       margin-top: .5rem;
     }
-  }
 
-  > .nav + .nav,
-  > .alert + .alert,
-  > .navbar + .navbar,
-  > .progress + .progress {
-    margin-top: $spacer;
-  }
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
 
-  > .dropdown-menu {
-    position: static;
-    display: block;
-  }
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
 
-  > :last-child,
-  > nav:last-child .breadcrumb {
-    margin-bottom: 0;
-  }
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
+    }
 
-  > hr:last-child {
-    margin-bottom: $spacer;
-  }
+    .fixed-bottom,
+    .sticky-bottom {
+      position: static;
+      margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
 
-  // Images
-  > svg + svg,
-  > img + img {
-    margin-left: .5rem;
-  }
+    }
 
-  // Buttons
-  > .btn,
-  > .btn-group {
-    margin: .25rem .125rem;
-  }
-  > .btn-toolbar + .btn-toolbar {
-    margin-top: .5rem;
+    // Pagination
+    .pagination {
+      margin-bottom: 0;
+    }
   }
 
-  // List groups
-  > .list-group {
-    max-width: 400px;
-  }
+  //
+  // Grid examples
+  //
 
-  > [class*="list-group-horizontal"] {
-    max-width: 100%;
+  .bd-example-row [class^="col"],
+  .bd-example-cols [class^="col"] > *,
+  .bd-example-cssgrid [class*="grid"] > * {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
   }
 
-  // Navbars
-  .fixed-top,
-  .sticky-top {
-    position: static;
-    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
+  .bd-example-row .row + .row,
+  .bd-example-cssgrid .grid + .grid {
+    margin-top: 1rem;
   }
 
-  .fixed-bottom,
-  .sticky-bottom {
-    position: static;
-    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
-
+  .bd-example-row-flex-cols .row {
+    min-height: 10rem;
+    background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
   }
 
-  // Pagination
-  .pagination {
-    margin-bottom: 0;
+  .bd-example-flex div:not(.vr) {
+    background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
+  }
+
+  // // Grid mixins
+  // .example-container {
+  //   width: 800px;
+  //   @include make-container();
+  // }
+
+  // .example-row {
+  //   @include make-row();
+  // }
+
+  // .example-content-main {
+  //   @include make-col-ready();
+
+  //   @include media-breakpoint-up(sm) {
+  //     @include make-col(6);
+  //   }
+
+  //   @include media-breakpoint-up(lg) {
+  //     @include make-col(8);
+  //   }
+  // }
+
+  // .example-content-secondary {
+  //   @include make-col-ready();
+
+  //   @include media-breakpoint-up(sm) {
+  //     @include make-col(6);
+  //   }
+
+  //   @include media-breakpoint-up(lg) {
+  //     @include make-col(4);
+  //   }
+  // }
+
+  // Ratio helpers
+  .bd-example-ratios {
+    [class*="ratio"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1rem;
+      color: var(--bs-secondary-color);
+      background-color: var(--bs-tertiary-bg);
+      border: var(--bs-border-width) solid var(--bs-border-color);
+      @include border-radius(var(--bs-border-radius));
+    }
   }
-}
 
-//
-// Grid examples
-//
-
-.bd-example-row [class^="col"],
-.bd-example-cols [class^="col"] > *,
-.bd-example-cssgrid [class*="grid"] > * {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
-  border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
-}
 
-.bd-example-row .row + .row,
-.bd-example-cssgrid .grid + .grid {
-  margin-top: 1rem;
-}
+  .bd-example-offcanvas {
+    .offcanvas {
+      position: static;
+      display: block;
+      height: 200px;
+      visibility: visible;
+      transform: translate(0);
+    }
+  }
 
-.bd-example-row-flex-cols .row {
-  min-height: 10rem;
-  background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
-}
+  // Tooltips
+  .tooltip-demo {
+    a {
+      white-space: nowrap;
+    }
 
-.bd-example-flex div:not(.vr) {
-  background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
-  border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
-}
+    .btn {
+      margin: .25rem .125rem;
+    }
+  }
 
-// // Grid mixins
-// .example-container {
-//   width: 800px;
-//   @include make-container();
-// }
-
-// .example-row {
-//   @include make-row();
-// }
-
-// .example-content-main {
-//   @include make-col-ready();
-
-//   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
-//   }
-
-//   @include media-breakpoint-up(lg) {
-//     @include make-col(8);
-//   }
-// }
-
-// .example-content-secondary {
-//   @include make-col-ready();
-
-//   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
-//   }
-
-//   @include media-breakpoint-up(lg) {
-//     @include make-col(4);
-//   }
-// }
-
-// Ratio helpers
-.bd-example-ratios {
-  [class*="ratio"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1rem;
-    color: var(--bs-secondary-color);
-    background-color: var(--bs-tertiary-bg);
-    border: var(--bs-border-width) solid var(--bs-border-color);
-    @include border-radius(var(--bs-border-radius));
+  // scss-docs-start custom-tooltip
+  .custom-tooltip {
+    --bs-tooltip-bg: var(--bd-violet-bg);
+    --bs-tooltip-color: var(--bs-white);
   }
-}
+  // scss-docs-end custom-tooltip
 
+  // scss-docs-start custom-popovers
+  .custom-popover {
+    --bs-popover-max-width: 200px;
+    --bs-popover-border-color: var(--bd-violet-bg);
+    --bs-popover-header-bg: var(--bd-violet-bg);
+    --bs-popover-header-color: var(--bs-white);
+    --bs-popover-body-padding-x: 1rem;
+    --bs-popover-body-padding-y: .5rem;
+  }
+  // scss-docs-end custom-popovers
 
-.bd-example-offcanvas {
-  .offcanvas {
-    position: static;
-    display: block;
+  // Scrollspy demo on fixed height div
+  .scrollspy-example {
     height: 200px;
-    visibility: visible;
-    transform: translate(0);
+    margin-top: .5rem;
+    overflow: auto;
   }
-}
 
-// Tooltips
-.tooltip-demo {
-  a {
-    white-space: nowrap;
+  .scrollspy-example-2 {
+    height: 350px;
+    overflow: auto;
   }
 
-  .btn {
-    margin: .25rem .125rem;
+  .simple-list-example-scrollspy {
+    .active {
+      background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
+    }
   }
-}
 
-// scss-docs-start custom-tooltip
-.custom-tooltip {
-  --bs-tooltip-bg: var(--bd-violet-bg);
-  --bs-tooltip-color: var(--bs-white);
-}
-// scss-docs-end custom-tooltip
-
-// scss-docs-start custom-popovers
-.custom-popover {
-  --bs-popover-max-width: 200px;
-  --bs-popover-border-color: var(--bd-violet-bg);
-  --bs-popover-header-bg: var(--bd-violet-bg);
-  --bs-popover-header-color: var(--bs-white);
-  --bs-popover-body-padding-x: 1rem;
-  --bs-popover-body-padding-y: .5rem;
-}
-// scss-docs-end custom-popovers
-
-// Scrollspy demo on fixed height div
-.scrollspy-example {
-  height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
-}
-
-.scrollspy-example-2 {
-  height: 350px;
-  overflow: auto;
-}
-
-.simple-list-example-scrollspy {
-  .active {
-    background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
+  .bd-example-border-utils {
+    [class^="border"] {
+      display: inline-block;
+      width: 5rem;
+      height: 5rem;
+      margin: .25rem;
+      background-color: var(--bs-tertiary-bg);
+    }
   }
-}
 
-.bd-example-border-utils {
-  [class^="border"] {
-    display: inline-block;
-    width: 5rem;
-    height: 5rem;
-    margin: .25rem;
-    background-color: var(--bs-tertiary-bg);
+  .bd-example-rounded-utils {
+    [class*="rounded"] {
+      margin: .25rem;
+    }
   }
-}
 
-.bd-example-rounded-utils {
-  [class*="rounded"] {
-    margin: .25rem;
-  }
-}
+  .bd-example-position-utils {
+    position: relative;
+    padding: 2rem;
 
-.bd-example-position-utils {
-  position: relative;
-  padding: 2rem;
+    .position-relative {
+      height: 200px;
+      background-color: var(--bs-tertiary-bg);
+    }
 
-  .position-relative {
-    height: 200px;
-    background-color: var(--bs-tertiary-bg);
+    .position-absolute {
+      width: 2rem;
+      height: 2rem;
+      background-color: var(--bs-body-color);
+      @include border-radius();
+    }
   }
 
-  .position-absolute {
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--bs-body-color);
-    @include border-radius();
+  .bd-example-position-examples {
+    &::after {
+      content: none;
+    }
   }
-}
 
-.bd-example-position-examples {
-  &::after {
-    content: none;
-  }
-}
+  // Placeholders
+  .bd-example-placeholder-cards {
+    &::after {
+      display: none;
+    }
 
-// Placeholders
-.bd-example-placeholder-cards {
-  &::after {
-    display: none;
+    .card {
+      width: 18rem;
+    }
   }
 
-  .card {
-    width: 18rem;
+  // Toasts
+  .bd-example-toasts {
+    min-height: 240px;
   }
-}
 
-// Toasts
-.bd-example-toasts {
-  min-height: 240px;
-}
+  .bd-example-zindex-levels {
+    min-height: 15rem;
 
-.bd-example-zindex-levels {
-  min-height: 15rem;
+    > div {
+      color: var(--bs-body-bg);
+      background-color: var(--bd-violet);
+      border: 1px solid var(--bd-purple);
 
-  > div {
-    color: var(--bs-body-bg);
-    background-color: var(--bd-violet);
-    border: 1px solid var(--bd-purple);
+      > span {
+        position: absolute;
+        right: 5px;
+        bottom: 0;
+      }
+    }
 
-    > span {
-      position: absolute;
-      right: 5px;
-      bottom: 0;
+    > :nth-child(2) {
+      top: 3rem;
+      left: 3rem;
+    }
+    > :nth-child(3) {
+      top: 4.5rem;
+      left: 4.5rem;
+    }
+    > :nth-child(4) {
+      top: 6rem;
+      left: 6rem;
+    }
+    > :nth-child(5) {
+      top: 7.5rem;
+      left: 7.5rem;
     }
   }
 
-  > :nth-child(2) {
-    top: 3rem;
-    left: 3rem;
-  }
-  > :nth-child(3) {
-    top: 4.5rem;
-    left: 4.5rem;
-  }
-  > :nth-child(4) {
-    top: 6rem;
-    left: 6rem;
-  }
-  > :nth-child(5) {
-    top: 7.5rem;
-    left: 7.5rem;
-  }
-}
+  //
+  // Code snippets
+  //
 
-//
-// Code snippets
-//
+  .highlight {
+    position: relative;
+    padding: .75rem ($bd-gutter-x * .5);
+    background-color: var(--bd-pre-bg);
 
-.highlight {
-  position: relative;
-  padding: .75rem ($bd-gutter-x * .5);
-  background-color: var(--bd-pre-bg);
+    @include media-breakpoint-up(md) {
+      padding: .75rem 1.25rem;
+      @include border-radius(calc(var(--bs-border-radius) - 1px));
+    }
 
-  @include media-breakpoint-up(md) {
-    padding: .75rem 1.25rem;
-    @include border-radius(calc(var(--bs-border-radius) - 1px));
-  }
+    @include media-breakpoint-up(lg) {
+      pre {
+        margin-right: 1.875rem;
+      }
+    }
 
-  @include media-breakpoint-up(lg) {
     pre {
-      margin-right: 1.875rem;
+      padding: .25rem 0 .875rem;
+      margin-top: .8125rem;
+      margin-bottom: 0;
+      overflow: overlay;
+      white-space: pre;
+      background-color: transparent;
+      border: 0;
     }
-  }
 
-  pre {
-    padding: .25rem 0 .875rem;
-    margin-top: .8125rem;
-    margin-bottom: 0;
-    overflow: overlay;
-    white-space: pre;
-    background-color: transparent;
-    border: 0;
+    pre code {
+      @include font-size(inherit);
+      color: var(--bs-body-color); // Effectively the base text color
+      word-wrap: normal;
+    }
   }
 
-  pre code {
-    @include font-size(inherit);
-    color: var(--bs-body-color); // Effectively the base text color
-    word-wrap: normal;
+  .bd-example-snippet .highlight pre {
+    margin-right: 0;
   }
-}
 
-.bd-example-snippet .highlight pre {
-  margin-right: 0;
-}
-
-.highlight-toolbar {
-  background-color: var(--bd-pre-bg);
+  .highlight-toolbar {
+    background-color: var(--bd-pre-bg);
 
-  + .highlight {
-    @include border-top-radius(0);
+    + .highlight {
+      @include border-top-radius(0);
+    }
   }
-}
 
-.bd-file-ref {
-  .highlight-toolbar {
-    @include media-breakpoint-up(md) {
-      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+  .bd-file-ref {
+    .highlight-toolbar {
+      @include media-breakpoint-up(md) {
+        @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+      }
     }
   }
-}
 
-.bd-content .bd-code-snippet {
-  margin-bottom: 1rem;
+  .bd-content .bd-code-snippet {
+    margin-bottom: 1rem;
+  }
 }