some grid changes, some brand and gutters docs updates

4 files changed, 35 insertions, 35 deletions

diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index 9637cfb18d..304075c92b 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -15,13 +15,13 @@
 // Individual items
 .bd-brand-item {
   + .bd-brand-item {
-    border-top: 1px solid $white;
+    border-top: 1px solid var(--#{$prefix}border-color);
   }
 
   @include media-breakpoint-up(md) {
     + .bd-brand-item {
       border-top: 0;
-      border-left: 1px solid $white;
+      border-left: 1px solid var(--#{$prefix}border-color);
     }
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 360ef6e192..30f7997315 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -129,12 +129,12 @@
 
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
-  background-color: rgba(var(--bs-violet-rgb), .1);
+  background-color: rgba(var(--bd-violet-rgb), .1);
 }
 
 .bd-example-flex div {
-  background-color: rgba(var(--bs-violet-rgb), .15);
-  border: 1px solid rgba(var(--bs-violet-rgb), .15);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .15);
 }
 
 // Grid mixins
diff --git a/site/content/docs/5.2/about/brand.md b/site/content/docs/5.2/about/brand.md
index 80c613526e..9c31da07ff 100644
--- a/site/content/docs/5.2/about/brand.md
+++ b/site/content/docs/5.2/about/brand.md
@@ -12,13 +12,13 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 
 When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
 
-<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
+<div class="bd-brand-item px-2 py-5 mb-3 border rounded-3">
   <img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
 </div>
 
 Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
 
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-3 overflow-hidden w-100 mb-3">
   <div class="bd-brand-item w-100 px-2 py-5">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
   </div>
@@ -31,7 +31,7 @@ Our logo mark is also available in black and white. All rules for our primary lo
 
 Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
 
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+<div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3">
   <div class="bd-brand-item w-100 p-3">
     <div class="h3">Bootstrap</div>
     <strong class="text-success">Correct</strong>
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.2/layout/gutters.md
index 5862094519..0650e039c6 100644
--- a/site/content/docs/5.2/layout/gutters.md
+++ b/site/content/docs/5.2/layout/gutters.md
@@ -18,14 +18,14 @@ toc: true
 
 `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container px-4 text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -33,14 +33,14 @@ toc: true
 
 An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -50,20 +50,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 `.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gy-5">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -73,20 +73,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 `.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
 
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container text-center">
   <div class="row g-2">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
 
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container text-center">
   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
   </div>
 </div>