Doc: minor modifications in Scrollspy (#36195)

Doc: minor modifications in Scrollspy

diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md
index ac9679279043f0d0d51457bc53a09e6095725fe6..6dfd9732fa9e9b1927f04b9b5176482698412df8 100644 (file)
--- a/site/content/docs/5.1/components/scrollspy.md
+++ b/site/content/docs/5.1/components/scrollspy.md
@@ -117,32 +117,32 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
     <div class="col-8">
       <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
         <div id="item-1">
-            <h4>Item 1</h4>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h4>Item 1</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-1-1">
-            <h5>Item 1-1</h5>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h5>Item 1-1</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-1-2">
-            <h5>Item 1-2</h5>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h5>Item 1-2</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-2">
-            <h4>Item 2</h4>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h4>Item 2</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-3">
-            <h4>Item 3</h4>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h4>Item 3</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-3-1">
-            <h5>Item 3-1</h5>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h5>Item 3-1</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
         <div id="item-3-2">
-            <h5>Item 3-2</h5>
-            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <h5>Item 3-2</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         </div>
       </div>
     </div>
@@ -168,20 +168,34 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 </nav>
 
 <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
-  <h4 id="item-1">Item 1</h4>
-  <p>...</p>
-  <h5 id="item-1-1">Item 1-1</h5>
-  <p>...</p>
-  <h5 id="item-1-2">Item 1-2</h5>
-  <p>...</p>
-  <h4 id="item-2">Item 2</h4>
-  <p>...</p>
-  <h4 id="item-3">Item 3</h4>
-  <p>...</p>
-  <h5 id="item-3-1">Item 3-1</h5>
-  <p>...</p>
-  <h5 id="item-3-2">Item 3-2</h5>
-  <p>...</p>
+  <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>
 ```