Move custom docs gutter to new class

Author: mdo

site/assets/scss/_layout.scss

@@ -1,5 +1,8 @@
-.bd-layout {
+.bd-gutter {
   --bs-gutter-x: #{$bd-gutter-x};
+}
+
+.bd-layout {
 
   @include media-breakpoint-up(lg) {
     display: grid;

site/assets/scss/_masthead.scss

@@ -55,11 +55,6 @@
   padding: .8rem 2rem;
 }
 
-.bd-masthead-followup,
-.bd-masthead .container-xxl {
-  --bs-gutter-x: #{$bd-gutter-x};
-}
-
 .masthead-followup-icon {
   padding: 1rem;
   background-color: currentColor;

site/assets/scss/_navbar.scss

@@ -4,10 +4,6 @@
   background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 
-  .container-xxl {
-    --bs-gutter-x: #{$bd-gutter-x};
-  }
-
   .navbar-toggler {
     padding: 0;
     border: 0;

site/layouts/_default/docs.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="container-xxl mt-3 my-md-4 bd-layout">
+  <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
       <div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">

site/layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <header class="py-5 border-bottom">
-    <div class="container pt-md-1 pb-md-4">
+  <div class="container-xxl bd-gutter pt-md-1 pb-md-4">
       <div class="row">
         <div class="col-xl-8">
           <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
@@ -25,7 +25,7 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
   </header>
 
   <main class="bd-content order-1 py-5" id="content">
-    <div class="container">
+    <div class="container-xxl bd-gutter">
       {{ .Content }}
 
       {{ if eq .Title "Examples" }}

site/layouts/partials/docs-navbar.html

@@ -1,5 +1,5 @@
 <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
-  <nav class="container-xxl flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {{- if eq .Layout "docs" }}
       <button class="navbar-toggler p-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
         {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}

site/layouts/partials/home/masthead-followup.html

@@ -1,4 +1,4 @@
-<div class="container-xxl masthead-followup">
+<div class="container-xxl bd-gutter masthead-followup">
   <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
     <div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-indigo);">
       <svg class="bi fs-1"><use xlink:href="#code"></use></svg>

site/layouts/partials/home/masthead.html

@@ -1,5 +1,5 @@
 <div class="bd-masthead mb-3" id="content">
-  <div class="container-xxl">
+  <div class="container-xxl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a class="d-block d-sm-inline-block py-2 px-3 mb-4 text-dark text-decoration-none rounded-3 masthead-notice" href="https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/">
         <strong>New in v5.1:</strong> CSS Grid, offcanvas navbars, improved utilities, and more!