Docs: replaced deprecated .display-5 with .fs-4xl .fw-light

Spotted in #42487

Author: julien-deramond

site/src/assets/examples/blog/index.astro

@@ -106,7 +106,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </h3>
 
       <article class="blog-post">
-        <h2 class="display-5 fg-emphasis-inverse mb-1">Sample blog post</h2>
+        <h2 class="fs-4xl fw-light fg-emphasis-inverse mb-1">Sample blog post</h2>
         <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
 
         <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -160,7 +160,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </article>
 
       <article class="blog-post">
-        <h2 class="display-5 fg-emphasis-inverse mb-1">Another blog post</h2>
+        <h2 class="fs-4xl fw-light fg-emphasis-inverse mb-1">Another blog post</h2>
         <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -208,7 +208,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </article>
 
       <article class="blog-post">
-        <h2 class="display-5 fg-emphasis-inverse mb-1">New feature</h2>
+        <h2 class="fs-4xl fw-light fg-emphasis-inverse mb-1">New feature</h2>
         <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>

site/src/assets/examples/heroes/index.astro

@@ -10,7 +10,7 @@ export const extra_css = ['heroes.css']
 
   <div class="px-4 py-5 my-5 text-center">
     <img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
-    <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
+    <h1 class="fs-4xl fw-bold text-body-emphasis">Centered hero</h1>
     <div class="lg:col-6 mx-auto">
       <p class="fs-lg fw-light mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
       <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">
@@ -46,7 +46,7 @@ export const extra_css = ['heroes.css']
         <img src="bootstrap-themes.png" class="d-block lg:mx-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
       </div>
       <div class="lg:col-6">
-        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
+        <h1 class="fs-4xl fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
         <p class="fs-lg fw-light">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 md:d-flex md:justify-content-start">
           <button type="button" class="btn-solid theme-primary btn-lg px-4 md:me-2">Primary</button>
@@ -108,7 +108,7 @@ export const extra_css = ['heroes.css']
 
   <div class="bg-black fg-secondary px-4 py-5 text-center" data-bs-theme="dark">
     <div class="py-5">
-      <h1 class="display-5 fw-bold fg-white">Dark color hero</h1>
+      <h1 class="fs-4xl fw-bold fg-white">Dark color hero</h1>
       <div class="lg:col-6 mx-auto">
         <p class="mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">