]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Docs: replace deprecated `.lead` with `.fs-lg .fw-light` in homepage and examples...
authorJulien Déramond <juderamond@gmail.com>
Tue, 30 Jun 2026 19:37:50 +0000 (21:37 +0200)
committerGitHub <noreply@github.com>
Tue, 30 Jun 2026 19:37:50 +0000 (21:37 +0200)
25 files changed:
site/src/assets/examples/album/index.astro
site/src/assets/examples/blog/index.astro
site/src/assets/examples/carousel/index.astro
site/src/assets/examples/cheatsheet/index.astro
site/src/assets/examples/checkout/index.astro
site/src/assets/examples/cover/index.astro
site/src/assets/examples/grid/index.astro
site/src/assets/examples/heroes/index.astro
site/src/assets/examples/jumbotrons/index.astro
site/src/assets/examples/masonry/index.astro
site/src/assets/examples/navbar-bottom/index.astro
site/src/assets/examples/navbar-fixed/index.astro
site/src/assets/examples/navbar-static/index.astro
site/src/assets/examples/product/index.astro
site/src/assets/examples/sticky-footer-navbar/index.astro
site/src/assets/examples/sticky-footer/index.astro
site/src/components/home/CSSVariables.astro
site/src/components/home/ComponentUtilities.astro
site/src/components/home/Customize.astro
site/src/components/home/GetStarted.astro
site/src/components/home/Icons.astro
site/src/components/home/MastHead.astro
site/src/components/home/Plugins.astro
site/src/content/docs/guides/migration.mdx
site/src/scss/_masthead.scss

index 96867b75151e20e11e9df038bec1374451a28030..06ad314aa9e07b6c0bd8725bbce144ac2bdca820 100644 (file)
@@ -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>
index 0667ba03082afca2623c296c314ae54f80ab31f8..3a38cb777e52625e95ce26a0914fd1d2686e261e 100644 (file)
@@ -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>
 
index 6b1e826048bdd31cb6691f6083c813c7f4c95d28..7d09c7bdc18df77cbe9940d1be50262decb2997d 100644 (file)
@@ -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" />
index ffb2f2177d95bf9a7e7d59d035c522bf4254f42e..b4e459eed2ff77026816762bdf1ede1742dc246e 100644 (file)
@@ -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>
index 69e7ab70371e9cc6ac25e658de40dc69b2296301..f98f3334dfeab710a2accf1085f738494e7f4e8f 100644 (file)
@@ -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">
index b827fa463b8cfc9b3a519cab1f786b0734c9971a..6e5d316ca6e32a48d8eebd969d7c9029dfd74115 100644 (file)
@@ -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>
index 541babc95ecd48ac65ac8426e55da3eb41af1a39..f1950a1a287100c1ed4a2205b03bc6e008b4b8f9 100644 (file)
@@ -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>
index f518f64695408a24ea6974dacf8f513c84734400..307a10e36c0bd767ce366121731b35585ab4b4ba 100644 (file)
@@ -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>
index a86a743e7764aabcd0ca4b1ff3a0cb26b33572a1..b4166d980b4fed5e4f3c0f18ad6ea4bc6ade2214 100644 (file)
@@ -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>
index 4f1f265cd7c0f00548ee794ae1e9aa6342176def..c80981456d5f0168e948f9cf0aeb711a6fda4401 100644 (file)
@@ -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>
 
index e0e5378664861556ebb2af059eee8b1432933a17..87a23836e4d1ee3b09c5c68befa35e181244202f 100644 (file)
@@ -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>
index dc13ad1bb895e491c522d2e06a86606806c7b1ce..6168eb57dd369d0d107210cf7d9c1af1d62c6b8b 100644 (file)
@@ -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>
index 3f018703567989edd7a9d83a95f0c9fb0c0eaa50..4cfc67e0d38ce3fbca9d8694d8659a6733874ceb 100644 (file)
@@ -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>
index a870b8f2fef7299497d82fe45dd683cb73e50080..57cebfa1e702cc5184f6350c7b202a996deb1557 100644 (file)
@@ -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>
index a420bad424b21d05767410df0e29e6e65988be32..1cddae76210e8d1aa5483e08458db83bdedafc49 100644 (file)
@@ -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>
index fb7ccf8d1ef44795c9a88770e7b5a8c86fc4b661..8a73cafea6fc28177d6e8a3c398ed56bea5c462d 100644 (file)
@@ -11,7 +11,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</h1>
-    <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</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.</p>
     <p>Use <a href={getVersionedDocsPath('/examples/sticky-footer-navbar/')}>the sticky footer with a fixed navbar</a> if need be, too.</p>
   </div>
 </main>
index 249716cd945f84e0131d7e39d872ec487304d6d4..95591be43b6f910019f8bbaa07e9e0209a505085 100644 (file)
@@ -9,12 +9,12 @@ import Code from '@shortcodes/Code.astro'
       <svg class="bi fs-1" aria-hidden="true"><use href="#braces"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
-    <p class="lead fw-normal">
+    <p class="fs-lg fw-light">
       Bootstrap makes extensive use of CSS variables across global theme styles, individual components, and utilities.
       We provide dozens of variables for colors, font styles, and more at the <code>:root</code> level for use anywhere, while
       component and utility variables stay scoped to the relevant class for easy customization.
     </p>
-    <p class="d-flex flex-column lead fw-normal mb-0">
+    <p class="d-flex flex-column fs-lg fw-light mb-0">
       <a
         href={getVersionedDocsPath('getting-started/css-variables')}
         class="icon-link icon-link-hover fw-semibold mb-3"
index f735aff9a5a0b9ea57afdfad3147605cbf7fc627..20c5e2fa89f7f29f3e2250359f33961dbe5e637f 100644 (file)
@@ -13,7 +13,7 @@ import Code from '@shortcodes/Code.astro'
       <svg class="bi fs-1" aria-hidden="true"><use href="#braces-asterisk"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
-    <p class="lead fw-normal">
+    <p class="fs-lg fw-light">
       Our utilities are generated by our <a href={getVersionedDocsPath('utilities/api')}>Utility API</a>. We built it as
       a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or
       modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
index aff090bb86678c33b667daae9c34e2e9ec99c12e..ce76ab7ad0ba48c8b99da8b6816f1b40a18df35c 100644 (file)
@@ -8,11 +8,11 @@ import Code from '@shortcodes/Code.astro'
     <svg class="bi fs-1" aria-hidden="true"><use href="#palette2"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
-  <p class="lead fw-normal">
+  <p class="fs-lg fw-light">
     Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable
     global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
-  <p class="d-flex lead fw-normal">
+  <p class="d-flex fs-lg fw-light">
     <a href={getVersionedDocsPath('customize/overview/')} class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
       <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
index 4395ed94e1acc2b5c622f19c8a3ed3ee5c1530cd..906cfc92a050890e67155c30303245390683c1eb 100644 (file)
@@ -9,10 +9,10 @@ import Code from '@shortcodes/Code.astro'
     <svg class="bi fs-1" aria-hidden="true"><use href="#code"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
-  <p class="lead fw-normal">
+  <p class="fs-lg fw-light">
     Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
   </p>
-  <p class="d-flex md:justify-content-center lead fw-normal">
+  <p class="d-flex md:justify-content-center fs-lg fw-light">
     <a href={getVersionedDocsPath('getting-started/install/')} class="icon-link icon-link-hover fw-semibold md:ps-4">
       Read installation docs
       <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
index 4a02083b42e34f435d6c929e19b76ed0553e1663..933173d1af62b3af817e3152dcfe8f2c630ed27b 100644 (file)
@@ -10,12 +10,12 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
       <CircleSquareIcon height={32} width={32} />
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
-    <p class="lead fw-normal">
+    <p class="fs-lg fw-light">
       <a href={getConfig().icons}>Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with
       more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them
       as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
     </p>
-    <p class="d-flex lead fw-normal md:mb-0">
+    <p class="d-flex fs-lg fw-light md:mb-0">
       <a href={getConfig().icons} class="icon-link icon-link-hover fw-semibold">
         Get Bootstrap Icons
         <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
index 776e0359ac910f56999a33ac6196a381b2c8295b..ce77a3959f148ca9e4c9134646a3724ee45b7f1f 100644 (file)
@@ -33,7 +33,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
         lazyload={false}
       />
       <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
-      <p class="lead mb-4">
+      <p class="fs-lg fw-light mb-4">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid
         system and components, and bring projects to life with powerful JavaScript plugins.
       </p>
index 37a2b97a5a4e27c0f9d8b0f1fc6a120a970af403..13a35a1e714f9636381b9d8caf3c7a47924efc35 100644 (file)
@@ -12,12 +12,12 @@ const plugins = getData('plugins')
       <svg class="bi fs-1" aria-hidden="true"><use href="#plugin"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
-    <p class="lead fw-normal">
+    <p class="fs-lg fw-light">
       Add toggleable hidden elements, dialogs and drawer menus, popovers and tooltips, and so much more—all without
       jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your
       HTML. Need more control? Include individual plugins programmatically.
     </p>
-    <p class="d-flex lead fw-normal md:mb-0">
+    <p class="d-flex fs-lg fw-light md:mb-0">
       <a href={getVersionedDocsPath('getting-started/javascript')} class="icon-link icon-link-hover fw-semibold">
         Learn more about Bootstrap JavaScript
         <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
index a8db1cece0d047d34587f734ef8e5a5fbe345643..678c845263be3ed1bd9cb45b8a5db367dfdda989 100644 (file)
@@ -351,6 +351,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 | — | — | `.fs-6xl` | `clamp(3.75rem, …, 5rem)` |
 </BsTable>
 
+- **Removed `.lead` utility.** The v5 `.lead` class no longer exists in v6, and there is no exact one-class replacement. If you want a similar effect with utilities, use `.fs-lg` associated to `.fw-light`.
+
 - **Border radius tokens replaced with a numeric scale.** The named `$border-radius-*` Sass variables and `--border-radius-*` CSS custom properties (`-xs`, `-sm`, default, `-lg`, `-xl`, `-2xl`) have been removed in favor of a numeric `$radii` Sass map (keyed `0`–`9`) that generates `--radius-0` through `--radius-9` tokens, plus `--radius-pill`. The scale is driven by a single `$radius: .5rem` base, so all steps move together when the base changes. To migrate any custom Sass or CSS that referenced the old tokens directly:
 
 <BsTable>
index b1e4b77d02126c91069f39d1ecaa051a019408e4..fe0ef30deb3d2a6ee9a8d770d3f433fe37e6200c 100644 (file)
@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/border-radius" as *;
 @use "../../../scss/mixins/transition" as *;
 
       font-size: var(--bs-font-size-4xl);
     }
 
-    .lead {
-      font-size: 1.125rem;
-      font-weight: 400;
-      color: var(--bs-fg-3);
-    }
-
     .btn-clipboard {
       position: absolute;
       top: -.625rem;
       margin-block: 2rem;
       margin-inline: auto;
     }
-
-    @include media-breakpoint-up(md) {
-      .lead {
-        font-size: 1.25rem;
-      }
-    }
   }
 
   .masthead-followup {
     h4 {
       --bs-heading-color: var(--bs-fg-body);
     }
-
-    .lead {
-      font-size: 1rem;
-    }
-
-    @include media-breakpoint-up(md) {
-      .lead {
-        font-size: 1.25rem;
-      }
-    }
   }
 
   .masthead-followup-icon {