diff --git a/site/docs/4.2/components/toasts.md b/site/docs/4.2/components/toasts.md
index 2f692e22d582..56c6848e98b6 100644
--- a/site/docs/4.2/components/toasts.md
+++ b/site/docs/4.2/components/toasts.md
@@ -25,7 +25,6 @@ To encourage extensible and predictable toasts, we recommend a header and body.
 
 Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
 
-<div class="bg-light">
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
@@ -41,14 +40,12 @@ Toasts are as flexible as you need and have very little required markup. At a mi
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-light" %}
 
 ### Translucent
 
 Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
 
-<div class="bg-dark">
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
@@ -64,14 +61,12 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-dark" %}
 
 ### Stacking
 
 When you have multiple toasts, we default to vertically stacking them in a readable manner.
 
-<div class="bg-light">
 {% capture example %}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
@@ -101,14 +96,12 @@ When you have multiple toasts, we default to vertically stacking them in a reada
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-light" %}
 
 ## Placement
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
-<div class="bg-dark">
 {% capture example %}
 <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
   <div class="toast" style="position: absolute; top: 0; right: 0;">
@@ -126,12 +119,10 @@ Place toasts with custom CSS as you need them. The top right is often used for n
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-dark" %}
 
 For systems that generate more notifications, consider using a wrapping element so they can easily stack.
 
-<div class="bg-dark">
 {% capture example %}
 <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
   <!-- Position it -->
@@ -168,12 +159,10 @@ For systems that generate more notifications, consider using a wrapping element
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-dark" %}
 
 You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
 
-<div class="bg-dark">
 {% capture example %}
 <!-- Flexbox container for aligning the toasts -->
 <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
@@ -194,8 +183,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-dark" %}
 
 ## Accessibility
 
@@ -215,7 +203,6 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
 
 When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
 
-<div class="bg-light">
 {% capture example %}
 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
   <div class="toast-header">
@@ -231,8 +218,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
   </div>
 </div>
 {% endcapture %}
-{% include example.html content=example %}
-</div>
+{% include example.html content=example class="bg-light" %}
 
 ## JavaScript behavior