Replace .bg-white with .bg-body in docs

Response to issue #32810

Use of the .bg-white class to define visual aspects of the examples
would be unintuitive for theme builders to test themes on.
This replaces instances of .bg-white with .bg-body in the examples.

- Edited examples to replace use .bg-white class with .bg-body class
  - product
  - offcanvas
  - pricing
  - cheatsheet
  - cheatsheet-rtl
- Edited utilities colors.md & shadows.md to include .bg-body class

diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
index 9b9b81ea64542d340160b812162d343860fecc7d..712c583dd5e403287c696e3d68964d6a1aee0a9b 100644 (file)
--- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
@@ -70,7 +70,7 @@ direction: rtl
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<div class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
 

diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html
index 39637a487c01b2ef92780372fcee70e77ad27e8c..394142510462881d11ea82e5c838f0caa96639e3 100644 (file)
--- a/site/content/docs/5.0/examples/cheatsheet/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet/index.html
@@ -69,7 +69,7 @@ body_class: "bg-light"
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<div class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
 

diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas/index.html
index a7c99a5382e62d03eb27c510a36494f396b6dc07..c25c6a11627f0c78a029ec0b3315ad434b6c7701 100644 (file)
--- a/site/content/docs/5.0/examples/offcanvas/index.html
+++ b/site/content/docs/5.0/examples/offcanvas/index.html
@@ -46,7 +46,7 @@ body_class: "bg-light"
   </div>
 </nav>
 
-<div class="nav-scroller bg-white shadow-sm">
+<div class="nav-scroller bg--body shadow-sm">
   <nav class="nav nav-underline" aria-label="Secondary navigation">
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
@@ -72,7 +72,7 @@ body_class: "bg-light"
     </div>
   </div>
 
-  <div class="my-3 p-3 bg-white rounded shadow-sm">
+  <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
@@ -100,7 +100,7 @@ body_class: "bg-light"
     </small>
   </div>
 
-  <div class="my-3 p-3 bg-white rounded shadow-sm">
+  <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}

diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html
index 58bb22ccf9c3553bdaf5522187ccaa2f07262031..57d4747ddff37f194366e403bbfe014859eab266 100644 (file)
--- a/site/content/docs/5.0/examples/pricing/index.html
+++ b/site/content/docs/5.0/examples/pricing/index.html
@@ -6,7 +6,7 @@ extra_css:
 include_js: false
 ---
 
-<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
+<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
   <p class="h5 my-0 me-md-auto fw-normal">Company name</p>
   <nav class="my-2 my-md-0 me-md-3">
     <a class="p-2 text-dark" href="#">Features</a>

diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.0/examples/product/index.html
index 423890e3b484428d6c63c592e26cb003dfd4c832..291901efa26951913dc87481c74c42cc2d075691 100644 (file)
--- a/site/content/docs/5.0/examples/product/index.html
+++ b/site/content/docs/5.0/examples/product/index.html
@@ -71,14 +71,14 @@ extra_css:
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 
@@ -88,14 +88,14 @@ extra_css:
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 </main>

diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
index ede13df06557b67a5a77329e8e8c0e4ee603edb7..3f11cb2b5ba3788350812cd12c52490e69d0bd27 100644 (file)
--- a/site/content/docs/5.0/utilities/colors.md
+++ b/site/content/docs/5.0/utilities/colors.md
@@ -44,6 +44,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {{- end -}}
 {{< /colors.inline >}}
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
 <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.0/utilities/shadows.md b/site/content/docs/5.0/utilities/shadows.md
index 2803031d6602f49ad82e212055b5320acb690d29..c1a15568983d98b6304d04591a5ddba467dd2f66 100644 (file)
--- a/site/content/docs/5.0/utilities/shadows.md
+++ b/site/content/docs/5.0/utilities/shadows.md
@@ -11,7 +11,7 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 
 {{< example >}}
 <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
 {{< /example >}}