From: Julien Déramond Date: Tue, 30 Jun 2026 19:37:50 +0000 (+0200) Subject: Docs: replace deprecated `.lead` with `.fs-lg .fw-light` in homepage and examples... X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=b0341895fd1ee5888e96854e219be7c75fc864dd;p=thirdparty%2Fbootstrap.git Docs: replace deprecated `.lead` with `.fs-lg .fw-light` in homepage and examples (#42574) --- diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro index 96867b7515..06ad314aa9 100644 --- a/site/src/assets/examples/album/index.astro +++ b/site/src/assets/examples/album/index.astro @@ -43,7 +43,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

Album example

-

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.

+

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.

Main call to action Secondary action diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro index 0667ba0308..3a38cb777e 100644 --- a/site/src/assets/examples/blog/index.astro +++ b/site/src/assets/examples/blog/index.astro @@ -57,8 +57,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

Title of a longer featured blog post

-

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

-

Continue reading...

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

diff --git a/site/src/assets/examples/carousel/index.astro b/site/src/assets/examples/carousel/index.astro index 6b1e826048..7d09c7bdc1 100644 --- a/site/src/assets/examples/carousel/index.astro +++ b/site/src/assets/examples/carousel/index.astro @@ -121,7 +121,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

First featurette heading. It’ll blow your mind.

-

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

@@ -133,7 +133,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

Oh yeah, it’s that good. See for yourself.

-

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.

+

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.

@@ -145,7 +145,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

And lastly, this one. Checkmate.

-

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.

+

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.

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro index ffb2f2177d..b4e459eed2 100644 --- a/site/src/assets/examples/cheatsheet/index.astro +++ b/site/src/assets/examples/cheatsheet/index.astro @@ -97,11 +97,6 @@ export const body_class = 'bg-body-tertiary'

Heading 5

Heading 6

`} /> - - This is a lead paragraph. It stands out from regular paragraphs. -

`} /> - You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro index 69e7ab7037..f98f3334df 100644 --- a/site/src/assets/examples/checkout/index.astro +++ b/site/src/assets/examples/checkout/index.astro @@ -12,7 +12,7 @@ export const body_class = 'bg-body-tertiary'

Checkout form

-

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.

+

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.

diff --git a/site/src/assets/examples/cover/index.astro b/site/src/assets/examples/cover/index.astro index b827fa463b..6e5d316ca6 100644 --- a/site/src/assets/examples/cover/index.astro +++ b/site/src/assets/examples/cover/index.astro @@ -19,8 +19,8 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'

Cover your page.

-

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.

-

+

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.

+

Learn more

diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro index 541babc95e..f1950a1a28 100644 --- a/site/src/assets/examples/grid/index.astro +++ b/site/src/assets/examples/grid/index.astro @@ -8,7 +8,7 @@ export const body_class = 'py-4'

Bootstrap grid examples

-

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

Five grid tiers

diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro index f518f64695..307a10e36c 100644 --- a/site/src/assets/examples/heroes/index.astro +++ b/site/src/assets/examples/heroes/index.astro @@ -12,7 +12,7 @@ export const extra_css = ['heroes.css']

Centered hero

-

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.

+

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.

@@ -25,7 +25,7 @@ export const extra_css = ['heroes.css']

Centered screenshot

-

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.

+

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.

@@ -47,7 +47,7 @@ export const extra_css = ['heroes.css']

Responsive left-aligned hero with image

-

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.

+

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.

@@ -92,7 +92,7 @@ export const extra_css = ['heroes.css']

Border hero with cropped image and shadows

-

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.

+

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.

diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro index a86a743e77..b4166d980b 100644 --- a/site/src/assets/examples/jumbotrons/index.astro +++ b/site/src/assets/examples/jumbotrons/index.astro @@ -58,7 +58,7 @@ export const extra_css = ['jumbotrons.css']

Full-width jumbotron

-

+

This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.

@@ -70,7 +70,7 @@ export const extra_css = ['jumbotrons.css']

Basic jumbotron

-

+

This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes.

diff --git a/site/src/assets/examples/masonry/index.astro b/site/src/assets/examples/masonry/index.astro index 4f1f265cd7..c80981456d 100644 --- a/site/src/assets/examples/masonry/index.astro +++ b/site/src/assets/examples/masonry/index.astro @@ -10,7 +10,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

Bootstrap and Masonry

-

Integrate Masonry with the Bootstrap grid system and cards component.

+

Integrate Masonry with the Bootstrap grid system and cards component.

Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro index e0e5378664..87a23836e4 100644 --- a/site/src/assets/examples/navbar-bottom/index.astro +++ b/site/src/assets/examples/navbar-bottom/index.astro @@ -7,7 +7,7 @@ export const title = 'Bottom navbar example'

Bottom Navbar example

-

This example is a quick exercise to illustrate how the bottom navbar works.

+

This example is a quick exercise to illustrate how the bottom navbar works.

View navbar docs »
diff --git a/site/src/assets/examples/navbar-fixed/index.astro b/site/src/assets/examples/navbar-fixed/index.astro index dc13ad1bb8..6168eb57dd 100644 --- a/site/src/assets/examples/navbar-fixed/index.astro +++ b/site/src/assets/examples/navbar-fixed/index.astro @@ -34,7 +34,7 @@ export const extra_css = ['navbar-fixed.css']

Navbar example

-

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.

+

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.

View navbar docs »
diff --git a/site/src/assets/examples/navbar-static/index.astro b/site/src/assets/examples/navbar-static/index.astro index 3f01870356..4cfc67e0d3 100644 --- a/site/src/assets/examples/navbar-static/index.astro +++ b/site/src/assets/examples/navbar-static/index.astro @@ -34,7 +34,7 @@ export const extra_css = ['navbar-static.css']

Navbar example

-

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.

+

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.

View navbar docs »
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro index a870b8f2fe..57cebfa1e7 100644 --- a/site/src/assets/examples/product/index.astro +++ b/site/src/assets/examples/product/index.astro @@ -55,7 +55,7 @@ export const extra_css = ['product.css']

Designed for engineers

Build anything you want with Aperture

-
+
Learn more @@ -74,14 +74,14 @@ export const extra_css = ['product.css']

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

@@ -91,14 +91,14 @@ export const extra_css = ['product.css']

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

@@ -108,14 +108,14 @@ export const extra_css = ['product.css']

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

@@ -125,14 +125,14 @@ export const extra_css = ['product.css']

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

Another headline

-

And an even wittier subheading.

+

And an even wittier subheading.

diff --git a/site/src/assets/examples/sticky-footer-navbar/index.astro b/site/src/assets/examples/sticky-footer-navbar/index.astro index a420bad424..1cddae7621 100644 --- a/site/src/assets/examples/sticky-footer-navbar/index.astro +++ b/site/src/assets/examples/sticky-footer-navbar/index.astro @@ -40,7 +40,7 @@ export const body_class = 'd-flex flex-column h-100'

Sticky footer with fixed navbar

-

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 padding-top: 60px; on the main > .container.

+

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 padding-top: 60px; on the main > .container.

Back to the default sticky footer minus the navbar.

diff --git a/site/src/assets/examples/sticky-footer/index.astro b/site/src/assets/examples/sticky-footer/index.astro index fb7ccf8d1e..8a73cafea6 100644 --- a/site/src/assets/examples/sticky-footer/index.astro +++ b/site/src/assets/examples/sticky-footer/index.astro @@ -11,7 +11,7 @@ export const body_class = 'd-flex flex-column h-100'

Sticky footer

-

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Use the sticky footer with a fixed navbar if need be, too.

diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro index 249716cd94..95591be43b 100644 --- a/site/src/components/home/CSSVariables.astro +++ b/site/src/components/home/CSSVariables.astro @@ -9,12 +9,12 @@ import Code from '@shortcodes/Code.astro'

Build and extend in real-time with CSS variables

-

+

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 :root level for use anywhere, while component and utility variables stay scoped to the relevant class for easy customization.

-

+

Utility API. 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. diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro index aff090bb86..ce76ab7ad0 100644 --- a/site/src/components/home/Customize.astro +++ b/site/src/components/home/Customize.astro @@ -8,11 +8,11 @@ import Code from '@shortcodes/Code.astro'

Customize everything with Sass

-

+

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.

-

+

Learn more about customizing diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro index 4395ed94e1..906cfc92a0 100644 --- a/site/src/components/home/GetStarted.astro +++ b/site/src/components/home/GetStarted.astro @@ -9,10 +9,10 @@ import Code from '@shortcodes/Code.astro'

Get started any way you want

-

+

Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.

-

+

Read installation docs diff --git a/site/src/components/home/Icons.astro b/site/src/components/home/Icons.astro index 4a02083b42..933173d1af 100644 --- a/site/src/components/home/Icons.astro +++ b/site/src/components/home/Icons.astro @@ -10,12 +10,12 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'

Personalize it with Bootstrap Icons

-

+

Bootstrap Icons 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.

-

+

Get Bootstrap Icons diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro index 776e0359ac..ce77a3959f 100644 --- a/site/src/components/home/MastHead.astro +++ b/site/src/components/home/MastHead.astro @@ -33,7 +33,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro' lazyload={false} />

Build fast, responsive sites with Bootstrap

-

+

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.

diff --git a/site/src/components/home/Plugins.astro b/site/src/components/home/Plugins.astro index 37a2b97a5a..13a35a1e71 100644 --- a/site/src/components/home/Plugins.astro +++ b/site/src/components/home/Plugins.astro @@ -12,12 +12,12 @@ const plugins = getData('plugins')

Powerful JavaScript plugins without jQuery

-

+

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 data attributes in your HTML. Need more control? Include individual plugins programmatically.

-

+

Learn more about Bootstrap JavaScript diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx index a8db1cece0..678c845263 100644 --- a/site/src/content/docs/guides/migration.mdx +++ b/site/src/content/docs/guides/migration.mdx @@ -351,6 +351,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb | — | — | `.fs-6xl` | `clamp(3.75rem, …, 5rem)` | +- **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: diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss index b1e4b77d02..fe0ef30deb 100644 --- a/site/src/scss/_masthead.scss +++ b/site/src/scss/_masthead.scss @@ -1,5 +1,4 @@ @use "sass:math"; -@use "../../../scss/layout/breakpoints" as *; @use "../../../scss/mixins/border-radius" as *; @use "../../../scss/mixins/transition" as *; @@ -19,12 +18,6 @@ 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; @@ -37,12 +30,6 @@ margin-block: 2rem; margin-inline: auto; } - - @include media-breakpoint-up(md) { - .lead { - font-size: 1.25rem; - } - } } .masthead-followup { @@ -51,16 +38,6 @@ 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 {