Add temporary script to detect usage of Bootstrap v5 deprecated classes by julien-deramond · Pull Request #42487 · twbs/bootstrap

julien-deramond · 2026-06-08T17:54:58Z

Description

This PR adds a temporary vibe coded script to detect usages of Bootstrap v5 classes that no longer exist in v6 across our codebase, in a similar spirit to the approach used by the Bootstrap Deprecated Classes extension: https://github.com/julien-deramond/bootstrap-deprecated-classes-extension.

It's only been lightly tested so far (and only on my macOS environment), but the results I've spot-checked all appear to be legitimate v5 classes that should no longer be used in v6.

I'm not sure whether it makes sense to merge this, since its purpose is mainly to help with the migration work on this branch. If not, @mdo and/or @coliff may still find it useful.

Example output from a run today:

▶ Extracting v6 classes from dist/css/bootstrap.css…
  → 1140 unique classes

▶ Fetching v5 CSS from https://raw.githubusercontent.com/twbs/bootstrap/refs/heads/main/dist/css/bootstrap.css…
  → 2027 unique classes

▶ Classes only in v5 (deprecated in v6): 1428

▶ Scanning codebase for deprecated classes…
  → Scanned 435 files
  → 55 deprecated class(es) found in codebase

✖ Found 55 deprecated v5 class(es) with 526 occurrence(s) in the codebase.
  Report written to: deprecated-classes-2026-06-08T17-50-24.log

The corresponding report is generated at the repository root:
deprecated-classes-2026-06-08T17-50-24.log

Warning

Some classes are considered found in v6 codebase because of their simple names. For now, I've kept them in the results. I'm not sure it's easy to better spot what's a class or not in the docs.

julien-deramond · 2026-06-20T06:13:17Z

Added an option to the script to be able to run npm run check-deprecated-v5-classes -- --only-used and have only the things to fix.

`.log` output example


╔══════════════════════════════════════════════════════════════════════╗
║       Bootstrap v5 → v6  Deprecated Classes Report                  ║
╚══════════════════════════════════════════════════════════════════════╝
Generated : 2026-06-20T06:13:40.247Z

v6 source : dist/css/bootstrap.css

v5 source : https://raw.githubusercontent.com/twbs/bootstrap/refs/heads/main/dist/css/bootstrap.css
SUMMARY

──────────────────────────────────────────────────────────────────────

v6 unique classes .............. 1146

v5 unique classes .............. 2027

Classes only in v5 (deprecated) 1439

Deprecated classes used here ... 48

Files scanned .................. 435
USED DEPRECATED CLASSES  [only classes still found in this codebase]

──────────────────────────────────────────────────────────────────────

.bg-body-secondary  (5 occurrences)

.bg-body-tertiary  (59 occurrences)

.bg-dark  (20 occurrences)

.bg-light  (3 occurrences)

.bg-primary-subtle  (1 occurrence)

.bg-success-subtle  (1 occurrence)

.bg-warning-subtle  (2 occurrences)

.border-dark  (2 occurrences)

.border-warning-subtle  (1 occurrence)

.btn-primary  (1 occurrence)

.btn-success  (1 occurrence)

.card-link  (4 occurrences)

.clearfix  (3 occurrences)

.col-md-6  (6 occurrences)

.col-sm-12  (4 occurrences)

.col-sm-3  (2 occurrences)

.collapsed  (47 occurrences)

.display-1  (2 occurrences)

.display-2  (1 occurrence)

.display-3  (2 occurrences)

.display-4  (6 occurrences)

.display-5  (23 occurrences)

.display-6  (5 occurrences)

.dropdown  (8 occurrences)

.dropup  (3 occurrences)

.figure-img  (1 occurrence)

.fs-1  (6 occurrences)

.fs-2  (3 occurrences)

.fs-5  (7 occurrences)

.fs-6  (2 occurrences)

.lead  (53 occurrences)

.link-body-emphasis  (74 occurrences)

.link-offset-1  (3 occurrences)

.link-underline  (2 occurrences)

.link-underline-primary  (1 occurrence)

.mb-lg-0  (1 occurrence)

.modal  (56 occurrences)

.modal-backdrop  (2 occurrences)

.modal-header  (1 occurrence)

.navbar-collapse  (24 occurrences)

.navbar-dark  (11 occurrences)

.pointer-event  (4 occurrences)

.ratio  (15 occurrences)

.table-dark  (7 occurrences)

.table-primary  (1 occurrence)

.text-bg-dark  (9 occurrences)

.text-body-emphasis  (19 occurrences)

.text-secondary-emphasis  (3 occurrences)
DETAILED FINDINGS

──────────────────────────────────────────────────────────────────────
.bg-body-secondary  (5 occurrences)

─────────────────────────────────────

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



site/src/assets/examples/features/index.astro:106



site/src/assets/examples/features/index.astro:118



site/src/assets/examples/features/index.astro:130



site/src/content/docs/components/accordion.mdx:90

<Example class="bg-body-secondary" code={`
.bg-body-tertiary  (59 occurrences)

────────────────────────────────────

js/tests/visual/menu-submenu.html:225



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



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



site/src/assets/examples/breadcrumbs/index.astro:14



site/src/assets/examples/breadcrumbs/index.astro:26



site/src/assets/examples/breadcrumbs/index.astro:47



site/src/assets/examples/breadcrumbs/index.astro:68



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

export const body_class = 'bg-body-tertiary'

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



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



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

export const body_class = 'bg-body-tertiary'

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



site/src/assets/examples/dashboard/index.astro:83



site/src/assets/examples/dashboard/index.astro:84



site/src/assets/examples/drawer-navbar/index.astro:7

export const body_class = 'bg-body-tertiary'

site/src/assets/examples/headers/index.astro:196



site/src/assets/examples/headers/index.astro:199



site/src/assets/examples/headers/index.astro:207



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



site/src/assets/examples/jumbotron/index.astro:14



site/src/assets/examples/jumbotron/index.astro:31



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



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



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



site/src/assets/examples/list-groups/index.astro:143



site/src/assets/examples/list-groups/index.astro:144



site/src/assets/examples/menus/index.astro:70



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



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



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



site/src/assets/examples/navbars/index.astro:339



site/src/assets/examples/navbars/index.astro:373



site/src/assets/examples/navbars/index.astro:403



site/src/assets/examples/navbars/index.astro:438



site/src/assets/examples/navbars-drawer/index.astro:49



site/src/assets/examples/navbars-drawer/index.astro:130



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



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



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



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



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



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



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



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



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



site/src/assets/examples/sidebars/index.astro:90



site/src/assets/examples/sidebars/index.astro:146



site/src/assets/examples/sidebars/index.astro:257



site/src/assets/examples/sign-in/index.astro:6

export const body_class = 'd-flex align-items-center py-4 bg-body-tertiary'

site/src/assets/examples/sticky-footer/index.astro:19



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



site/src/components/footer/Footer.astro:7



site/src/components/shortcodes/NavbarPlacementPlayground.astro:113

const htmlCode = <nav class="navbar${placementClass} bg-body-tertiary"> site/src/content/docs/components/nav-overflow.mdx:162 <ResizableExample code={

site/src/content/docs/helpers/stretched-link.mdx:60



site/src/content/docs/utilities/overflow.mdx:16



site/src/content/docs/utilities/overflow.mdx:19



site/src/content/docs/utilities/overflow.mdx:22



site/src/content/docs/utilities/overflow.mdx:25


.bg-dark  (20 occurrences)

───────────────────────────

js/tests/visual/scrollspy.html:13



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



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

<Example showMarkup={false} class="bg-dark p-5 align-items-center" code={ site/src/assets/examples/dashboard/index.astro:60 <header class="navbar sticky-top bg-dark md:flex-nowrap p-0 shadow" data-bs-theme="dark"> site/src/assets/examples/drawer-navbar/index.astro:12 <nav class="navbar lg:navbar-expand fixed-top navbar-dark bg-dark" aria-label="Main navigation"> site/src/assets/examples/menus/index.astro:92 <form class="p-2 mb-2 bg-dark border-bottom border-dark"> site/src/assets/examples/menus/index.astro:93 <input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter..."> site/src/assets/examples/navbar-bottom/index.astro:14 <nav class="navbar fixed-bottom sm:navbar-expand navbar-dark bg-dark"> site/src/assets/examples/navbars/index.astro:236 <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Eighth navbar example"> site/src/assets/examples/navbars/index.astro:270 <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Ninth navbar example"> site/src/assets/examples/navbars/index.astro:308 <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Tenth navbar example"> site/src/assets/examples/navbars-drawer/index.astro:9 <nav class="navbar navbar-dark bg-dark" aria-label="Dark drawer navbar"> site/src/assets/examples/navbars-drawer/index.astro:89 <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Drawer navbar large"> site/src/assets/examples/product/index.astro:19 <nav class="navbar md:navbar-expand bg-dark sticky-top border-bottom" data-bs-theme="dark"> site/src/assets/examples/product/index.astro:86 <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> site/src/assets/examples/product/index.astro:96 <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> site/src/assets/examples/sticky-footer-navbar/index.astro:12 <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark"> site/src/content/docs/components/card.mdx:404 <Example class="bg-dark" code={

site/src/content/docs/components/card.mdx:412

<Example class="bg-dark" code={<div class="card card-translucent" style="width: 18rem;"> site/src/content/docs/components/toasts.mdx:106 <Example class="bg-dark" code={
.bg-light  (3 occurrences)

────────────────────────────

js/tests/unit/menu.spec.js:1282

'
',

js/tests/visual/datepicker.html:108



js/tests/visual/menu.html:13


.bg-primary-subtle  (1 occurrence)

─────────────────────────────────────

site/src/content/docs/components/carousel.mdx:128


.bg-success-subtle  (1 occurrence)

─────────────────────────────────────

site/src/content/docs/components/carousel.mdx:135


.bg-warning-subtle  (2 occurrences)

─────────────────────────────────────

site/src/components/shortcodes/DeprecatedIn.astro:14

class="d-inline-flex mb-3 px-2 py-1 fw-semibold fg-emphasis-warning bg-warning-subtle border border-warning-subtle rounded-2"

site/src/content/docs/components/carousel.mdx:142


.border-dark  (2 occurrences)

───────────────────────────────

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



site/src/assets/examples/menus/index.astro:92


.border-warning-subtle  (1 occurrence)

─────────────────────────────────────────

site/src/components/shortcodes/DeprecatedIn.astro:14

class="d-inline-flex mb-3 px-2 py-1 fw-semibold fg-emphasis-warning bg-warning-subtle border border-warning-subtle rounded-2"
.btn-primary  (1 occurrence)

───────────────────────────────

site/src/content/docs/customize/components.mdx:9

Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like .btn, and t
.btn-success  (1 occurrence)

───────────────────────────────

site/src/content/docs/customize/components.mdx:9

Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like .btn, and t
.card-link  (4 occurrences)

─────────────────────────────

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

Card link

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

Another link

site/src/content/docs/components/card.mdx:144

Card link

site/src/content/docs/components/card.mdx:145

Another link
.clearfix  (3 occurrences)

────────────────────────────

site/src/content/docs/layout/columns.mdx:308

The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a [.d-flow-root]([[docsref:/utilities/di

site/src/content/docs/utilities/display.mdx:42

There’s no more clearfix helper in Bootstrap 6 as it’s an outdated technique. Instead, use the display: flow-root utility, .d-flow-root. This forces a conta

site/src/content/docs/utilities/float.mdx:19

Use the .d-flow-root utility on a parent element to clear floats.
.col-md-6  (6 occurrences)

────────────────────────────

js/tests/visual/menu-submenu.html:416



js/tests/visual/menu-submenu.html:426



js/tests/visual/menu-submenu.html:437



js/tests/visual/menu-submenu.html:446



js/tests/visual/menu-submenu.html:455



js/tests/visual/menu-submenu.html:464


.col-sm-12  (4 occurrences)

─────────────────────────────

js/tests/visual/menu.html:63



js/tests/visual/menu.html:83



js/tests/visual/menu.html:105



js/tests/visual/menu.html:127


.col-sm-3  (2 occurrences)

────────────────────────────

js/tests/visual/menu.html:174



js/tests/visual/menu.html:187


.collapsed  (47 occurrences)

─────────────────────────────

js/src/collapse.js:34

const CLASS_NAME_COLLAPSED = 'collapsed'

js/tests/unit/collapse.spec.js:182

it('should show a collapsed element', () => {

js/tests/unit/collapse.spec.js:204

it('should show a collapsed element on width', () => {

js/tests/unit/collapse.spec.js:426

it('should hide a collapsed element', () => {

js/tests/unit/collapse.spec.js:496

'',

js/tests/unit/collapse.spec.js:518

it('should show multiple collapsed elements', () => {

js/tests/unit/collapse.spec.js:521

'',

js/tests/unit/collapse.spec.js:532

expect(trigger).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:542

it('should hide multiple collapsed elements', () => {

js/tests/unit/collapse.spec.js:556

expect(trigger).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:566

it('should remove "collapsed" class from target when collapse is shown', () => {

js/tests/unit/collapse.spec.js:569

'',

js/tests/unit/collapse.spec.js:570

'',

js/tests/unit/collapse.spec.js:581

expect(link1).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:582

expect(link2).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:590

it('should add "collapsed" class to target when collapse is hidden', () => {

js/tests/unit/collapse.spec.js:605

expect(link1).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:606

expect(link2).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:699

expect(triggerEl).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:703

expect(triggerTwoEl).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:708

expect(triggerEl).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:712

expect(triggerTwoEl).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:863

it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', () => {

js/tests/unit/collapse.spec.js:880

expect(trigger1).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:883

expect(trigger2).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:886

expect(trigger3).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:890

expect(trigger1).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:893

expect(trigger2).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:896

expect(trigger3).not.toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:900

expect(trigger1).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:903

expect(trigger2).toHaveClass('collapsed')

js/tests/unit/collapse.spec.js:906

expect(trigger3).toHaveClass('collapsed')

js/tests/visual/collapse.html:32



js/tests/visual/collapse.html:46



js/tests/visual/collapse.html:60



site/src/assets/examples/cheatsheet/cheatsheet.js:49

if (parent.classList.contains('collapsed')) {

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

<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-

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

<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-col

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

<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#component

site/src/assets/examples/navbars/index.astro:442

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.


site/src/assets/examples/sidebars/index.astro:201

<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expand

site/src/assets/examples/sidebars/index.astro:213

<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-e

site/src/assets/examples/sidebars/index.astro:226

<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expa

site/src/assets/examples/sidebars/index.astro:240

<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-exp

site/src/content/docs/components/accordion.mdx:215

- Screen readers announce the expanded/collapsed state automatically

site/src/content/docs/components/nav-overflow.mdx:266

Above the threshold, normal progressive collapse resumes. Items with .nav-overflow-keep are never collapsed.

site/src/content/docs/components/navbar.mdx:621

These examples omit the .lg:navbar-expand class to always show the collapsed state with the toggler visible. Click the toggler to open the drawer.
.display-1  (2 occurrences)

─────────────────────────────

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

Display 1


site/src/pages/404.astro:14

404

.display-2  (1 occurrence)

─────────────────────────────

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

Display 2

.display-3  (2 occurrences)

─────────────────────────────

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

Display 3


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

Designed for engineers

.display-4  (6 occurrences)

─────────────────────────────

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

Title of a longer featured blog post


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

Display 4


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

Centered screenshot


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

Vertically centered hero sign-up form


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

Border hero with cropped image and shadows


site/src/assets/examples/pricing/index.astro:32

Pricing

.display-5  (23 occurrences)

─────────────────────────────

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

Sample blog post


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

Another blog post


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

New feature


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

Display 5


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

Centered hero


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

Responsive left-aligned hero with image


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

Dark color hero


site/src/assets/examples/jumbotron/index.astro:16

Custom jumbotron


site/src/assets/examples/navbars-drawer/index.astro:132

Navbar with drawer examples


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

Another headline


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

Another headline


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

Another headline


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

Another headline


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

Another headline


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

Another headline


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

Another headline


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

Another headline


site/src/components/home/CSSVariables.astro:11

Build and extend in real-time with CSS variables


site/src/components/home/ComponentUtilities.astro:15

Components, meet the Utility API


site/src/components/home/Customize.astro:10

Customize everything with Sass


site/src/components/home/GetStarted.astro:11

Get started any way you want


site/src/components/home/Icons.astro:12

Personalize it with Bootstrap Icons


site/src/components/home/Plugins.astro:14

Powerful JavaScript plugins without jQuery

.display-6  (5 occurrences)

─────────────────────────────

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

Display 6
`} />

site/src/assets/examples/features/index.astro:153

Short title, long jacket


site/src/assets/examples/features/index.astro:174

Much longer title that wraps to multiple lines


site/src/assets/examples/features/index.astro:195

Another longer title belongs here


site/src/assets/examples/pricing/index.astro:92

Compare plans

.dropdown  (8 occurrences)

────────────────────────────

js/src/tooltip.js:626

// matching the behavior of the dropdown menu.

site/src/components/header/Navigation.astro:37

{/* Mobile breadcrumb dropdown - visible below lg /}

site/src/components/shortcodes/ResizableExample.astro:55

/data-bs-toggle="(menu|dropdown)"(?![^>]\bdata-bs-strategy=)/g,

site/src/content/docs/components/nav-overflow.mdx:247

Use the collapseBelow option to force all items into the overflow dropdown when the nav element’s width is below a threshold. Pass a breakpoint name to resolv

site/src/content/docs/components/nav-overflow.mdx:308

| collapseBelow | number|string | 0 | Width threshold below which all items collapse into the overflow dropdown. Pass a breakpoint name (e.g., 'md') to r

site/src/content/docs/components/nav-overflow.mdx:310

| menuPlacement | string | 'bottom-end' | Placement of the overflow dropdown menu, passed as data-bs-placement to the menu toggle. |

site/src/content/docs/components/popover.mdx:169

A shown popover can also be dismissed by pressing the Escape key. As with dropdown menus, a popover shown inside a dialog is dismissed on its own: th

site/src/content/docs/components/tooltip.mdx:194

A shown tooltip can be dismissed by pressing the Escape key, helping satisfy the [WCAG 1.4.13 “Content on Hover or Focus”](https://www.w3.org/WAI/WCA
.dropup  (3 occurrences)

──────────────────────────

js/tests/visual/menu-submenu.html:277

Submenus work with dropup direction.


js/tests/visual/menu-submenu.html:280



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


.figure-img  (1 occurrence)

──────────────────────────────

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


.fs-1  (6 occurrences)

────────────────────────

site/src/components/home/CSSVariables.astro:9



site/src/components/home/ComponentUtilities.astro:9



site/src/components/home/ComponentUtilities.astro:13



site/src/components/home/Customize.astro:8



site/src/components/home/GetStarted.astro:9



site/src/components/home/Plugins.astro:12


.fs-2  (3 occurrences)

────────────────────────

site/src/components/home/ComponentUtilities.astro:11



site/src/components/home/GetStarted.astro:25



site/src/components/home/GetStarted.astro:41


.fs-5  (7 occurrences)

────────────────────────

site/src/components/footer/Footer.astro:17

Bootstrap

site/src/components/header/Navigation.astro:40

class="nav-link fs-5 fw-medium d-inline-flex align-items-center gap-1 px-0"

site/src/components/home/Plugins.astro:76

{plugin.name}


site/src/layouts/DocsLayout.astro:160

{section.title}

site/src/layouts/DocsLayout.astro:186

{prevPage.title}


site/src/layouts/DocsLayout.astro:199

{nextPage.title}


site/src/layouts/partials/ExamplesMain.astro:19


.fs-6  (2 occurrences)

────────────────────────

site/src/components/header/Navigation.astro:144

Browse

site/src/layouts/DocsLayout.astro:161

{section.description}
.lead  (53 occurrences)

────────────────────────

CODE_OF_CONDUCT.md:92

like social media. Violating these terms may lead to a temporary or permanent

CODE_OF_CONDUCT.md:104

Violating these terms may lead to a permanent ban.

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

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks

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

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

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

Continue reading...


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

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


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

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world conte

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

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

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



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

This is a lead paragraph. It stands out from regular paragraphs.

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

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

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

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo

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



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

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


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

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featurin

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

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featurin

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

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sas

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

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sas

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



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



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

Integrate Masonry with the Bootstrap grid system and cards component.


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

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


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

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 v

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

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

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



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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


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

And an even wittier subheading.


site/src/assets/examples/sticky-footer/index.astro:14

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


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

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="sm

site/src/components/home/CSSVariables.astro:12



site/src/components/home/CSSVariables.astro:17



site/src/components/home/ComponentUtilities.astro:16



site/src/components/home/Customize.astro:11



site/src/components/home/Customize.astro:15



site/src/components/home/GetStarted.astro:12



site/src/components/home/GetStarted.astro:15



site/src/components/home/Icons.astro:13



site/src/components/home/Icons.astro:18



site/src/components/home/MastHead.astro:36



site/src/components/home/Plugins.astro:15



site/src/components/home/Plugins.astro:20



site/src/content/docs/components/popover.mdx:206

Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links),

site/src/content/docs/components/toasts.mdx:323

Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wra

site/src/content/docs/customize/optimize.mdx:87

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users [mixed active c

site/src/content/docs/getting-started/accessibility.mdx:25

Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variati

site/src/content/docs/getting-started/javascript.mdx:207

While it may seem correct to use the dispose method immediately after hide(), it will lead to incorrect results. Here’s an example of the problem use:

site/src/content/docs/utilities/link.mdx:13

Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with [*insufficien
.link-body-emphasis  (74 occurrences)

──────────────────────────────────────

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

World

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

U.S.

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

Technology

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

Design

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

Culture

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

Business

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

Politics

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

Opinion

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

Science

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

Health

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

Style

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

Travel

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

Sample blog post


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

Another blog post


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

New feature


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



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



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



site/src/assets/examples/breadcrumbs/index.astro:28



site/src/assets/examples/breadcrumbs/index.astro:34

Library

site/src/assets/examples/breadcrumbs/index.astro:49



site/src/assets/examples/breadcrumbs/index.astro:55

Library

site/src/assets/examples/breadcrumbs/index.astro:70



site/src/assets/examples/breadcrumbs/index.astro:76

Library

site/src/assets/examples/footers/index.astro:22

<a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none" aria-label="Bootst

site/src/assets/examples/footers/index.astro:74



site/src/assets/examples/footers/index.astro:174



site/src/assets/examples/footers/index.astro:175

<

site/src/assets/examples/headers/index.astro:35



site/src/assets/examples/headers/index.astro:69



site/src/assets/examples/headers/index.astro:123



site/src/assets/examples/headers/index.astro:129

Inventory


site/src/assets/examples/headers/index.astro:130

Customers


site/src/assets/examples/headers/index.astro:131

Products


site/src/assets/examples/headers/index.astro:139



site/src/assets/examples/headers/index.astro:159

<a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="f

site/src/assets/examples/headers/index.astro:179



site/src/assets/examples/headers/index.astro:210

Home


site/src/assets/examples/headers/index.astro:211

Features


site/src/assets/examples/headers/index.astro:212

Pricing


site/src/assets/examples/headers/index.astro:213

FAQs


site/src/assets/examples/headers/index.astro:214

About


site/src/assets/examples/headers/index.astro:217

Login


site/src/assets/examples/headers/index.astro:218

Sign up


site/src/assets/examples/headers/index.astro:224



site/src/assets/examples/pricing/index.astro:18



site/src/assets/examples/pricing/index.astro:24

Features

site/src/assets/examples/pricing/index.astro:25

Enterprise

site/src/assets/examples/pricing/index.astro:26

Support

site/src/assets/examples/pricing/index.astro:27

Pricing

site/src/assets/examples/sidebars/index.astro:91



site/src/assets/examples/sidebars/index.astro:104



site/src/assets/examples/sidebars/index.astro:110



site/src/assets/examples/sidebars/index.astro:116



site/src/assets/examples/sidebars/index.astro:122



site/src/assets/examples/sidebars/index.astro:147



site/src/assets/examples/sidebars/index.astro:179

<a class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expand

site/src/assets/examples/sidebars/index.astro:195



site/src/assets/examples/sidebars/index.astro:206

Overview


site/src/assets/examples/sidebars/index.astro:207

Updates


site/src/assets/examples/sidebars/index.astro:208

Reports


site/src/assets/examples/sidebars/index.astro:218

Overview


site/src/assets/examples/sidebars/index.astro:219

Weekly


site/src/assets/examples/sidebars/index.astro:220

Monthly


site/src/assets/examples/sidebars/index.astro:221

Annually


site/src/assets/examples/sidebars/index.astro:231

New


site/src/assets/examples/sidebars/index.astro:232

Processed


site/src/assets/examples/sidebars/index.astro:233

Shipped


site/src/assets/examples/sidebars/index.astro:234

Returned


site/src/assets/examples/sidebars/index.astro:245

New...


site/src/assets/examples/sidebars/index.astro:246

Profile


site/src/assets/examples/sidebars/index.astro:247

Settings


site/src/assets/examples/sidebars/index.astro:248

Sign out


site/src/assets/examples/sidebars/index.astro:258


.link-offset-1  (3 occurrences)

─────────────────────────────────

site/src/layouts/partials/ExamplesMain.astro:25

class="d-block link-offset-1"

site/src/layouts/partials/ExamplesMain.astro:37

class="icon-link small theme-secondary link-offset-1"

site/src/layouts/partials/ExamplesMain.astro:59

class="d-block link-offset-1"
.link-underline  (2 occurrences)

──────────────────────────────────

site/src/content/docs/utilities/api.mdx:380

"link-underline": (

site/src/content/docs/utilities/api.mdx:382

class: link-underline,
.link-underline-primary  (1 occurrence)

──────────────────────────────────────────

site/src/content/docs/utilities/api.mdx:394

.link-underline-primary {
.mb-lg-0  (1 occurrence)

───────────────────────────

js/tests/visual/menu-submenu.html:232


.modal  (56 occurrences)

─────────────────────────

js/src/dialog-base.js:26

* - Escape key handling (modal and non-modal)

js/src/dialog-base.js:72

const { modal, preventBodyScroll } = this._getShowOptions()

js/src/dialog-base.js:73

this._showElement({ modal, preventBodyScroll })

js/src/dialog-base.js:123

return { modal: true, preventBodyScroll: true }

js/src/dialog-base.js:152

_showElement({ modal = true, preventBodyScroll = true } = {}) {

js/src/dialog-base.js:153

this._openedAsModal = modal

js/src/dialog-base.js:155

if (modal) {

js/src/dialog-base.js:176

// native modal  centered case: close() removes the dialog

js/src/dialog-base.js:190

// Only restore body scroll if no other modal dialogs are open

js/src/dialog-base.js:191

if (!document.querySelector('dialog[open]:modal')) {

js/src/dialog-base.js:198

// closes synchronously; Dialog overrides this for animated modal cases.

js/src/dialog-base.js:247

// Handle native cancel event (Escape key) — only fires for modal dialogs

js/src/dialog-base.js:276

// Handle backdrop clicks — only applies to modal dialogs

js/src/dialog.js:38

modal: true

js/src/dialog.js:44

modal: 'boolean'

js/src/dialog.js:74

modal: this._config.modal,

js/src/dialog.js:75

preventBodyScroll: this._config.modal

js/src/dialog.js:80

if (!this._config.modal) {

js/src/dialog.js:90

// preserves the browser's modal centering and the native ::backdrop, both

js/src/drawer.js:84

modal: useModal,

js/src/tooltip.js:41

const CLASS_NAME_MODAL = 'modal'

js/src/tooltip.js:48

const EVENT_MODAL_HIDE = 'hide.bs.modal'

js/tests/unit/dialog.spec.js:451

it('should open a non-modal dialog with show() when modal = false', () => {

js/tests/unit/dialog.spec.js:457

modal: false

js/tests/unit/dialog.spec.js:478

modal: false

js/tests/unit/dialog.spec.js:501

modal: false

js/tests/unit/dialog.spec.js:527

modal: false,

js/tests/unit/dialog.spec.js:551

modal: false,

js/tests/unit/dialog.spec.js:584

expect(dialog._config.modal).toBeFalse()

js/tests/unit/dialog.spec.js:1039

it('should keep dialog-open on body when closing one of two open modal dialogs', () => {

js/tests/unit/dialog.spec.js:1174

modal: false,

js/tests/unit/dialog.spec.js:1198

modal: false,

js/tests/unit/drawer.spec.js:93

it('should hide if cancel event fires (modal mode)', () => {

site/public/pagefind/pagefind-component-ui.js:39

,Ca=R(ba),ya=R(Ta),rs=(n,s)=>{for(let e of n)if(e instanceof Element){e.setAttribute("data-pf-result-index",String(s));break}},zt=n=>{if(!(n instanceof HT site/src/assets/examples/dialogs/index.astro:36 <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p> site/src/assets/search.js:529 // destination page with the modal already gone) and have the visit recorded site/src/content/docs/components/dialog.mdx:9 # - "/docs/[[config:docs_version]]/components/modal/" site/src/content/docs/components/dialog.mdx:18 - **Modal or inline** via showModal()/show()—modal: true(default) promotes the dialog to the browser’s top layer with a backdrop and focus trapping;  site/src/content/docs/components/dialog.mdx:19 - **Built-in backdrop** using the::backdroppseudo-element (modal only); setbackdrop: "static"to lock clicks outside, orbackdrop: falseto hide it. site/src/content/docs/components/dialog.mdx:21 - **Accessibility** — focus is trapped inside modal dialogs and returned to the trigger on close, with nativeARIA semantics. site/src/content/docs/components/dialog.mdx:28 Toggle a dialog by clicking the button below. The dialog uses the nativeshowModal()API for true modal behavior. site/src/content/docs/components/dialog.mdx:40 <p>This is a native dialog element. It uses the browser’s built-in modal behavior for accessibility and focus management.</p> site/src/content/docs/components/dialog.mdx:62 <p>This is a native dialog element, only it’s set to dark mode. It uses the browser’s built-in modal behavior for accessibility and focus management.</p> site/src/content/docs/components/dialog.mdx:95 Tooltips, popovers, toasts, and menus all work inside modal dialogs. Modal dialogs useshowModal(), which promotes the dialog to the browser’s top layer -- a  site/src/content/docs/components/dialog.mdx:107 <p>These components work inside modal dialogs.</p> site/src/content/docs/components/dialog.mdx:284 By default, dialogs open as modals using the browser-native showModal()method. You can also open dialogs as non-modal usingshow()by settingmodaltof

site/src/content/docs/components/dialog.mdx:309

Use the modal option to create a non-modal dialog if building with JavaScript:

site/src/content/docs/components/dialog.mdx:312

const dialog = new bootstrap.Dialog('#myDialog', { modal: false })

site/src/content/docs/components/dialog.mdx:495

| backdrop | boolean or 'static' | true | For modal dialogs, clicking the backdrop dismisses the dialog. Specify static for a backdrop which doesn’t clo

site/src/content/docs/components/dialog.mdx:497

| modal | boolean | true | When true, opens the dialog as a modal using showModal() with backdrop, focus trapping, and top layer rendering. When false

site/src/content/docs/components/drawer.mdx:17

- Built-in backdrop via ::backdrop (modal only) closes the drawer on click; set backdrop: "static" to lock clicks outside, or backdrop: false to hide

site/src/content/docs/components/drawer.mdx:284

Since the drawer panel is built on the native <dialog> element, it inherently has the correct dialog role and modal semantics. Be sure to add aria-labelled site/src/content/docs/components/drawer.mdx:329 While both ways to dismiss a drawer are supported, keep in mind that dismissing from outside a drawer does not match the [ARIA Authoring Practices Guide dialog  site/src/content/docs/getting-started/accessibility.mdx:19 Bootstrap’s interactive components—such as modal dialogs, menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use  site/src/content/docs/getting-started/accessibility.mdx:46 Bootstrap includes support for the [prefers-reduced-motionmedia feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environme site/src/content/docs/getting-started/approach.mdx:221 Each overlay component increases itsz-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view a
.modal-backdrop  (2 occurrences)

──────────────────────────────────

js/src/util/backdrop.js:24

className: 'modal-backdrop',

js/tests/unit/util/backdrop.spec.js:5

const CLASS_BACKDROP = '.modal-backdrop'
.modal-header  (1 occurrence)

────────────────────────────────

site/public/pagefind/pagefind-component-ui.js:39

`,Ca=R(ba),ya=R(Ta),rs=(n,s)=>{for(let e of n)if(e instanceof Element){e.setAttribute("data-pf-result-index",String(s));break}},zt=n=>{if(!(n instanceof HT
.navbar-collapse  (24 occurrences)

───────────────────────────────────

js/tests/visual/menu-submenu.html:231



js/tests/visual/menu.html:19



js/tests/visual/scrollspy.html:18



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



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



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



site/src/assets/examples/drawer-navbar/index.astro:19



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



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



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



site/src/assets/examples/navbars/index.astro:16



site/src/assets/examples/navbars/index.astro:50



site/src/assets/examples/navbars/index.astro:73



site/src/assets/examples/navbars/index.astro:107



site/src/assets/examples/navbars/index.astro:141



site/src/assets/examples/navbars/index.astro:175



site/src/assets/examples/navbars/index.astro:209



site/src/assets/examples/navbars/index.astro:243



site/src/assets/examples/navbars/index.astro:277



site/src/assets/examples/navbars/index.astro:314



site/src/assets/examples/navbars/index.astro:346



site/src/assets/examples/navbars/index.astro:379



site/src/assets/examples/navbars/index.astro:409



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


.navbar-dark  (11 occurrences)

───────────────────────────────

js/tests/visual/scrollspy.html:13



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



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



site/src/assets/examples/drawer-navbar/index.astro:12



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



site/src/assets/examples/navbars/index.astro:236



site/src/assets/examples/navbars/index.astro:270



site/src/assets/examples/navbars/index.astro:308



site/src/assets/examples/navbars-drawer/index.astro:9



site/src/assets/examples/navbars-drawer/index.astro:89



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


.pointer-event  (4 occurrences)

─────────────────────────────────

js/src/util/swipe.js:25

const CLASS_NAME_POINTER_EVENT = 'pointer-event'

js/tests/unit/util/swipe.spec.js:42

'  #fixture .pointer-event {',

js/tests/unit/util/swipe.spec.js:187

const style = '#fixture .pointer-event { touch-action: none !important; }'

js/tests/unit/util/swipe.spec.js:212

const style = '#fixture .pointer-event { touch-action: none !important; }'
.ratio  (15 occurrences)

─────────────────────────

js/src/carousel.js:367

// the target snap offset, so the intended left-most slide reports a ratio a

js/src/carousel.js:375

bestIndex = ratios.findIndex(ratio => ratio >= maxRatio - ACTIVE_RATIO_TOLERANCE)

site/src/content/docs/components/progress.mdx:74

Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio w

site/src/content/docs/customize/sass.mdx:377

To help with this, we included the color-contrast function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-

site/src/content/docs/getting-started/accessibility.mdx:25

Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variati

site/src/content/docs/utilities/api.mdx:203

class: ratio,

site/src/content/docs/utilities/aspect-ratio.mdx:2

title: Aspect ratio

site/src/content/docs/utilities/aspect-ratio.mdx:10

Use the ratio utility to manage the aspect ratios of content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any st

site/src/content/docs/utilities/aspect-ratio.mdx:18

Add your ratio utility to the element you want to modify, like an <iframe>, <video>, or less semantic elements like <div>. Ratio utilities also pair well

site/src/content/docs/utilities/aspect-ratio.mdx:24

Swap the .ratio-* class for a different aspect ratio.

site/src/content/docs/utilities/aspect-ratio.mdx:50

For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

site/src/content/docs/utilities/aspect-ratio.mdx:52

<Example class="bd-example-ratios" code={<div class="ratio" style="--bs-aspect-ratio: 50%;"> site/src/content/docs/utilities/aspect-ratio.mdx:56 This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoi site/src/content/docs/utilities/aspect-ratio.mdx:66 <Example class="bd-example-ratios bd-example-ratios-breakpoint" code={


site/src/content/docs/utilities/object-fit.mdx:11

Change the value of the object-fit property with our responsive object-fit utility classes. T
.table-dark  (7 occurrences)

──────────────────────────────

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



site/src/content/docs/content/tables.mdx:92



site/src/content/docs/content/tables.mdx:156



site/src/content/docs/content/tables.mdx:187



site/src/content/docs/content/tables.mdx:218

- For each table variant, we generate a --bs-table-accent-bg color with the highest contrast depending on that color. For example, the accent color for `.tabl

site/src/content/docs/content/tables.mdx:244



site/src/content/docs/content/tables.mdx:252

.table-primary  (1 occurrence)

─────────────────────────────────

site/src/content/docs/content/tables.mdx:218

- For each table variant, we generate a --bs-table-accent-bg color with the highest contrast depending on that color. For example, the accent color for `.tabl
.text-bg-dark  (9 occurrences)

────────────────────────────────

js/tests/visual/dialog.html:172



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

export const body_class = 'd-flex h-100 text-center text-bg-dark'

site/src/assets/examples/features/index.astro:151



site/src/assets/examples/features/index.astro:172



site/src/assets/examples/features/index.astro:193



site/src/assets/examples/jumbotron/index.astro:24



site/src/assets/examples/navbars-drawer/index.astro:15



site/src/assets/examples/navbars-drawer/index.astro:95



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


.text-body-emphasis  (19 occurrences)

──────────────────────────────────────

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

Large

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



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

Continue reading...


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

Centered hero


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

Centered screenshot


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

Responsive left-aligned hero with image


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

Vertically centered hero sign-up form


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

Border hero with cropped image and shadows


site/src/assets/examples/jumbotron/index.astro:8



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

Jumbotron with icon


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

Placeholder jumbotron


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

Full-width jumbotron


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

Basic jumbotron


site/src/assets/examples/pricing/index.astro:32

Pricing


site/src/assets/examples/starter-template/index.astro:19



site/src/assets/examples/starter-template/index.astro:26

Get started with Bootstrap


site/src/assets/examples/starter-template/index.astro:37

Starter projects


site/src/assets/examples/starter-template/index.astro:68

Guides


site/src/components/footer/Footer.astro:12

class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
.text-secondary-emphasis  (3 occurrences)

───────────────────────────────────────────

site/src/content/docs/components/carousel.mdx:130

Compose slides from your own markup—text, buttons, cards, or media.


site/src/content/docs/components/carousel.mdx:137

Use utilities or custom CSS to size and theme each slide however you need.


site/src/content/docs/components/carousel.mdx:144

Combine custom content with controls, indicators, and the overlay layout.

──────────────────────────────────────────────────────────────────────

End of report

julien-deramond · 2026-06-26T03:55:50Z

coliff · 2026-06-26T04:03:00Z

@julien-deramond - that's helpful - thanks! I have a PR open which addresses some of them in examples. #42455

julien-deramond added the v6 label Jun 8, 2026

julien-deramond added this to v6.0.0 Jun 8, 2026

github-project-automation Bot moved this to Inbox in v6.0.0 Jun 8, 2026

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from ef240c6 to fedf4e4 Compare June 8, 2026 17:58

This was referenced Jun 16, 2026

Drop deprecated .alert-dismissible remaining usage #42520

Merged

Drop deprecated .card-link remaining usage #42529

Merged

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from fedf4e4 to 03d0422 Compare June 20, 2026 06:12

This was referenced Jun 20, 2026

Drop deprecated .navbar-dark remaining usage #42530

Merged

Drop deprecated .dropup remaining usage #42532

Merged

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from 03d0422 to 743713f Compare June 20, 2026 07:25

julien-deramond added the on-hold label Jun 21, 2026

julien-deramond mentioned this pull request Jun 26, 2026

Docs: remove unused CalloutDeprecatedDarkVariants and DeprecatedIn shortcodes #42563

Merged

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from 743713f to 21bf73e Compare June 26, 2026 03:53

julien-deramond mentioned this pull request Jun 26, 2026

Docs: modify remaining .bg-{color}-subtle usage to .bg-subtle-{color} #42564

Merged

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from 21bf73e to 4bd5778 Compare June 26, 2026 04:13

julien-deramond mentioned this pull request Jun 26, 2026

v6: examples - Use new utility classes in examples #42455

Merged

10 tasks

julien-deramond added 2 commits June 26, 2026 06:41

Add temporary script to detect usage of Bootstrap v5 deprecated classes

59218ea

Add --only-used option

54b9131

julien-deramond force-pushed the v6-dev-add-temp-script-to-detect-v5-deprecated-classes-usage-in-v6-dev-branch branch from 4bd5778 to 54b9131 Compare June 26, 2026 04:41

Uh oh!

Uh oh!

Conversation

julien-deramond commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

julien-deramond commented Jun 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

404

Designed for engineers

Title of a longer featured blog post

Centered screenshot

Vertically centered hero sign-up form

Border hero with cropped image and shadows

Pricing

Sample blog post

Another blog post

New feature

Centered hero

Responsive left-aligned hero with image

Dark color hero

Custom jumbotron

Navbar with drawer examples

Another headline

Another headline

Another headline

Another headline

Another headline

Another headline

Another headline

Another headline

Build and extend in real-time with CSS variables

Components, meet the Utility API

Customize everything with Sass

Get started any way you want

Personalize it with Bootstrap Icons

Powerful JavaScript plugins without jQuery

Short title, long jacket

Much longer title that wraps to multiple lines

Another longer title belongs here

Compare plans

{plugin.name}

Sample blog post

Another blog post

New feature

Centered hero

Centered screenshot

Responsive left-aligned hero with image

Vertically centered hero sign-up form

Border hero with cropped image and shadows

Jumbotron with icon

Placeholder jumbotron

Full-width jumbotron

Basic jumbotron

Pricing

Get started with Bootstrap

Starter projects

Guides

Uh oh!

julien-deramond commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coliff commented Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

julien-deramond commented Jun 8, 2026 •

edited

Loading

julien-deramond commented Jun 20, 2026 •

edited

Loading

julien-deramond commented Jun 26, 2026 •

edited

Loading