Docs: fix some ScrollSpy HTML copyable codesmain-jd-fix-scrollspy-html-copy-code

1 files changed, 86 insertions, 80 deletions

diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md
index be2564e6ef..abbb596dfe 100644
--- a/site/content/docs/5.2/components/scrollspy.md
+++ b/site/content/docs/5.2/components/scrollspy.md
@@ -162,53 +162,55 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 </div>
 
 ```html
-<div class="col-4">
-  <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
-    <nav class="nav nav-pills flex-column">
-      <a class="nav-link" href="#item-1">Item 1</a>
+<div class="row">
+  <div class="col-4">
+    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
       <nav class="nav nav-pills flex-column">
-        <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
-        <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
-      </nav>
-      <a class="nav-link" href="#item-2">Item 2</a>
-      <a class="nav-link" href="#item-3">Item 3</a>
-      <nav class="nav nav-pills flex-column">
-        <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
-        <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+        <a class="nav-link" href="#item-1">Item 1</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+        </nav>
+        <a class="nav-link" href="#item-2">Item 2</a>
+        <a class="nav-link" href="#item-3">Item 3</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+        </nav>
       </nav>
     </nav>
-  </nav>
-</div>
+  </div>
 
-<div class="col-8">
-  <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
-    <div id="item-1">
-      <h4>Item 1</h4>
-      <p>...</p>
-    </div>
-    <div id="item-1-1">
-      <h5>Item 1-1</h5>
-      <p>...</p>
-    </div>
-    <div id="item-1-2">
-      <h5>Item 1-2</h5>
-      <p>...</p>
-    </div>
-    <div id="item-2">
-      <h4>Item 2</h4>
-      <p>...</p>
-    </div>
-    <div id="item-3">
-      <h4>Item 3</h4>
-      <p>...</p>
-    </div>
-    <div id="item-3-1">
-      <h5>Item 3-1</h5>
-      <p>...</p>
-    </div>
-    <div id="item-3-2">
-      <h5>Item 3-2</h5>
-      <p>...</p>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
+      <div id="item-1">
+        <h4>Item 1</h4>
+        <p>...</p>
+      </div>
+      <div id="item-1-1">
+        <h5>Item 1-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-1-2">
+        <h5>Item 1-2</h5>
+        <p>...</p>
+      </div>
+      <div id="item-2">
+        <h4>Item 2</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3">
+        <h4>Item 3</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3-1">
+        <h5>Item 3-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-3-2">
+        <h5>Item 3-2</h5>
+        <p>...</p>
+      </div>
     </div>
   </div>
 </div>
@@ -244,24 +246,26 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 </div>
 
 ```html
-<div class="col-4">
-  <div id="list-example" class="list-group">
-    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
-    <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
-    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
-    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
+<div class="row">
+  <div class="col-4">
+    <div id="list-example" class="list-group">
+      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
+    </div>
   </div>
-</div>
-<div class="col-8">
-  <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
-    <h4 id="list-item-1">Item 1</h4>
-    <p>...</p>
-    <h4 id="list-item-2">Item 2</h4>
-    <p>...</p>
-    <h4 id="list-item-3">Item 3</h4>
-    <p>...</p>
-    <h4 id="list-item-4">Item 4</h4>
-    <p>...</p>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="list-item-4">Item 4</h4>
+      <p>...</p>
+    </div>
   </div>
 </div>
 ```
@@ -299,27 +303,29 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
 </div>
 
 ```html
-<div class="col-4">
-  <div id="list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
-    <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
-    <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
-    <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
-    <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
-    <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
+<div class="row">
+  <div class="col-4">
+    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
+      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
+      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
+      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
+      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
+      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
+    </div>
   </div>
-</div>
-<div class="col-8">
-  <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
-    <h4 id="simple-list-item-1">Item 1</h4>
-    <p>...</p>
-    <h4 id="simple-list-item-2">Item 2</h4>
-    <p>...</p>
-    <h4 id="simple-list-item-3">Item 3</h4>
-    <p>...</p>
-    <h4 id="simple-list-item-4">Item 4</h4>
-    <p>...</p>
-    <h4 id="simple-list-item-5">Item 5</h4>
-    <p>...</p>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="simple-list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-4">Item 4</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-5">Item 5</h4>
+      <p>...</p>
+    </div>
   </div>
 </div>
 ```