<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>
<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>
<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" />
<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" />
<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" />
<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>
<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">
<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>
<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>
<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>
<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>
</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>
<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>
<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>
<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>
<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>
<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 »</a>
</div>
</main>
<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 »</a>
</div>
</main>
<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 »</a>
</div>
</main>
<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>
<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>
<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>
<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>
<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>
<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 > .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 > .container</code>.</p>
<p>Back to <a href={getVersionedDocsPath('/examples/sticky-footer/')}>the default sticky footer</a> minus the navbar.</p>
</div>
</main>
<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>
<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 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"
<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 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.
<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 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>
<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 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>
<CircleSquareIcon height={32} width={32} />
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap 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>
lazyload={false}
/>
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with 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>
<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 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>
| — | — | `.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>
@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 {