Correct heading levels in features example

to keep the look the same, added `fs-...` sizing classes where necessary

site/content/docs/5.2/examples/features/index.html

@@ -74,7 +74,7 @@ <h2 class="pb-2 border-bottom">Columns with icons</h2>
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
@@ -85,7 +85,7 @@ <h2>Featured title</h2>
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
@@ -96,7 +96,7 @@ <h2>Featured title</h2>
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
@@ -116,7 +116,7 @@ <h2 class="pb-2 border-bottom">Hanging icons</h2>
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -128,7 +128,7 @@ <h2>Featured title</h2>
           <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -140,7 +140,7 @@ <h2>Featured title</h2>
           <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -159,7 +159,7 @@ <h2 class="pb-2 border-bottom">Custom cards</h2>
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -180,7 +180,7 @@ <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -201,7 +201,7 @@ <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps t
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -230,56 +230,56 @@ <h2 class="pb-2 border-bottom">Icon grid</h2>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>