Docs: replace deprecated .lead with .fs-lg .fw-light in homepage and examples

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

@@ -43,7 +43,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="row lg:py-5">
       <div class="lg:col-6 md:col-8 mx-auto">
         <h1 class="fw-light">Album example</h1>
-        <p class="lead fg-2">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+        <p class="fs-lg fw-light fg-2">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn-solid theme-primary m-2">Main call to action</a>
           <a href="#" class="btn-solid theme-secondary m-2">Secondary action</a>

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

@@ -57,8 +57,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"
   <div class="p-4 md:p-5 mb-4 rounded text-body-emphasis bg-body-secondary">
     <div class="lg:col-6 px-0">
       <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
-      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-      <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
+      <p class="fs-lg fw-light my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
+      <p class="fs-lg fw-light mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
     </div>
   </div>
 

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

@@ -121,7 +121,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="row featurette">
       <div class="md:col-7">
         <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="fg-2">It’ll blow your mind.</span></h2>
-        <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
+        <p class="fs-lg fw-light">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="md:col-5">
         <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
@@ -133,7 +133,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="row featurette">
       <div class="md:col-7 md:order-2">
         <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="fg-2">See for yourself.</span></h2>
-        <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
+        <p class="fs-lg fw-light">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="md:col-5 md:order-1">
         <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
@@ -145,7 +145,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="row featurette">
       <div class="md:col-7">
         <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="fg-2">Checkmate.</span></h2>
-        <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
+        <p class="fs-lg fw-light">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="md:col-5">
         <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />

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

@@ -97,11 +97,6 @@ export const body_class = 'bg-body-tertiary'
         <p class="h5">Heading 5</p>
         <p class="h6">Heading 6</p>`} />
 
-        <Example showMarkup={false} code={`
-        <p class="lead">
-          This is a lead paragraph. It stands out from regular paragraphs.
-        </p>`} />
-
         <Example showMarkup={false} code={`
         <p>You can use the mark tag to <mark>highlight</mark> text.</p>
         <p><del>This line of text is meant to be treated as deleted text.</del></p>

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

@@ -12,7 +12,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="py-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="h2">Checkout form</h1>
-      <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
+      <p class="fs-lg fw-light">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
     </div>
 
     <div class="row g-5">

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

@@ -19,8 +19,8 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
 
   <main class="px-3">
     <h1>Cover your page.</h1>
-    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
-    <p class="lead">
+    <p class="fs-lg fw-light">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
+    <p class="fs-lg fw-light">
       <a href="#" class="btn-solid theme-inverse btn-lg fw-bold">Learn more</a>
     </p>
   </main>

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

@@ -8,7 +8,7 @@ export const body_class = 'py-4'
   <div class="container">
 
     <h1>Bootstrap grid examples</h1>
-    <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+    <p class="fs-lg fw-light">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
     <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
 
     <h2 class="mt-4">Five grid tiers</h2>

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

@@ -12,7 +12,7 @@ export const extra_css = ['heroes.css']
     <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>
     <div class="lg:col-6 mx-auto">
-      <p class="lead 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>
+      <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">
         <button type="button" class="btn-solid theme-primary btn-lg px-4">Primary button</button>
         <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
@@ -25,7 +25,7 @@ export const extra_css = ['heroes.css']
   <div class="px-4 pt-5 my-5 text-center border-bottom">
     <h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
     <div class="lg:col-6 mx-auto">
-      <p class="lead 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>
+      <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 mb-5">
         <button type="button" class="btn-solid theme-primary btn-lg px-4 sm:me-3">Primary button</button>
         <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
@@ -47,7 +47,7 @@ export const extra_css = ['heroes.css']
       </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>
-        <p class="lead">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>
+        <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>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Default</button>
@@ -92,7 +92,7 @@ export const extra_css = ['heroes.css']
     <div class="row p-4 pb-0 lg:pe-0 lg:pt-5 align-items-center rounded-3 border shadow-lg">
       <div class="lg:col-7 p-3 lg:p-5 lg:pt-3">
         <h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
-        <p class="lead">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>
+        <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 mb-4 lg:mb-3">
           <button type="button" class="btn-solid theme-primary btn-lg px-4 md:me-2">Primary</button>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Default</button>

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

@@ -58,7 +58,7 @@ export const extra_css = ['jumbotrons.css']
   <div class="p-5 text-center bg-body-tertiary">
     <div class="container py-5">
       <h1 class="text-body-emphasis">Full-width jumbotron</h1>
-      <p class="lg:col-8 mx-auto lead">
+      <p class="lg:col-8 mx-auto fs-lg fw-light">
         This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.
       </p>
     </div>
@@ -70,7 +70,7 @@ export const extra_css = ['jumbotrons.css']
 <div class="container my-5">
   <div class="p-5 text-center bg-body-tertiary rounded-3">
     <h1 class="text-body-emphasis">Basic jumbotron</h1>
-    <p class="lead">
+    <p class="fs-lg fw-light">
       This is a simple Bootstrap jumbotron that sits within a <code>.container</code>, recreated with built-in utility classes.
     </p>
   </div>

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

@@ -10,7 +10,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
 <main class="container py-5">
   <h1>Bootstrap and Masonry</h1>
-  <p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p>
+  <p class="fs-lg fw-light">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p>
 
   <p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:</p>
 

site/src/assets/examples/navbar-bottom/index.astro

@@ -7,7 +7,7 @@ export const title = 'Bottom navbar example'
 <main class="container">
   <div class="bg-body-tertiary p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
-    <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
+    <p class="fs-lg fw-light">This example is a quick exercise to illustrate how the bottom navbar works.</p>
     <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>

site/src/assets/examples/navbar-fixed/index.astro

@@ -34,7 +34,7 @@ export const extra_css = ['navbar-fixed.css']
 <main class="container">
   <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
-    <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
+    <p class="fs-lg fw-light">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
     <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>

site/src/assets/examples/navbar-static/index.astro

@@ -34,7 +34,7 @@ export const extra_css = ['navbar-static.css']
 <main class="container">
   <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
-    <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
+    <p class="fs-lg fw-light">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
     <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>

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

@@ -55,7 +55,7 @@ export const extra_css = ['product.css']
     <div class="md:col-6 lg:p-9 mx-auto my-9">
       <h1 class="fs-5xl fw-bold">Designed for engineers</h1>
       <h3 class="fw-normal fg-secondary mb-3 text-pretty">Build anything you want with Aperture</h3>
-      <div class="d-flex gap-3 justify-content-center lead fw-normal">
+      <div class="d-flex gap-3 justify-content-center fs-lg fw-light">
         <a class="icon-link" href="#">
           Learn more
           <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
@@ -74,14 +74,14 @@ export const extra_css = ['product.css']
     <div class="bg-black fg-white md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 py-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-subtle-secondary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 p-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-black shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
@@ -91,14 +91,14 @@ export const extra_css = ['product.css']
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 p-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-black shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="theme-primary theme-contrast md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 py-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-subtle-secondary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
@@ -108,14 +108,14 @@ export const extra_css = ['product.css']
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 p-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 py-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
@@ -125,14 +125,14 @@ export const extra_css = ['product.css']
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 p-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
       <div class="my-5 py-5">
         <h2 class="fs-3xl fw-light">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
+        <p class="fs-lg fw-light">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>

site/src/assets/examples/sticky-footer-navbar/index.astro

@@ -40,7 +40,7 @@ export const body_class = 'd-flex flex-column h-100'
 <main class="flex-shrink-0">
   <div class="container">
     <h1 class="mt-5">Sticky footer with fixed navbar</h1>
-    <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main &gt; .container</code>.</p>
+    <p class="fs-lg fw-light">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main &gt; .container</code>.</p>
     <p>Back to <a href={getVersionedDocsPath('/examples/sticky-footer/')}>the default sticky footer</a> minus the navbar.</p>
   </div>
 </main>