v5: examples: Replace deprecated classes

[coliff]

Description

Replace legacy 'navbar-dark' classes with the newer data-bs-theme='dark' attribute across example pages and adjust related dark-mode styling.

Other updates: remove redundant 'btn-close-white', change deprecated 'text-muted' to 'text-body-secondary', replace 'border-right' with 'border-end' for logical edge utilities, and apply data-bs-theme to offcanvas/dropdown elements where appropriate.

Motivation & Context

These changes standardize dark theme handling and update utilities in multiple site examples.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-42423--twbs-bootstrap.netlify.app/

Related issues

[Copilot]

Pull request overview

This PR updates multiple Bootstrap site examples to use the newer data-bs-theme="dark" approach instead of legacy *-dark variant classes, and modernizes a handful of deprecated/legacy utility classes to their current equivalents.

Changes:

• Replaced navbar-dark usages with data-bs-theme="dark" across example navbars/offcanvas.
• Updated deprecated utility classes (e.g., text-muted → text-body-secondary, border-right → border-end).
• Removed redundant btn-close-white where dark theme scoping is applied.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
site/src/assets/examples/sticky-footer-navbar/index.astro	Migrates fixed navbar to data-bs-theme="dark".
site/src/assets/examples/sidebars/index.astro	Updates dark dropdown menu theming approach.
site/src/assets/examples/product/index.astro	Replaces deprecated muted text utility.
site/src/assets/examples/offcanvas-navbar/index.astro	Migrates navbar-dark to data-bs-theme="dark".
site/src/assets/examples/navbars/index.astro	Migrates multiple navbar variants to data-bs-theme="dark".
site/src/assets/examples/navbars-offcanvas/index.astro	Applies data-bs-theme="dark" for navbars/offcanvas and simplifies close button classing.
site/src/assets/examples/navbar-static/index.astro	Migrates navbar-dark to data-bs-theme="dark".
site/src/assets/examples/navbar-fixed/index.astro	Migrates navbar-dark to data-bs-theme="dark".
site/src/assets/examples/navbar-bottom/index.astro	Migrates navbar-dark to data-bs-theme="dark".
site/src/assets/examples/jumbotrons/index.astro	Replaces deprecated muted text utility usages.
site/src/assets/examples/dashboard/index.astro	Updates legacy border utility to logical border-end.
site/src/assets/examples/dashboard-rtl/index.astro	Updates legacy border utility to logical border-end in RTL example.
site/src/assets/examples/cheatsheet/index.astro	Migrates example navbar to data-bs-theme="dark".
site/src/assets/examples/cheatsheet-rtl/index.astro	Migrates example navbar to data-bs-theme="dark" in RTL variant.
site/src/assets/examples/carousel/index.astro	Removes navbar-dark from the carousel example navbar.
site/src/assets/examples/carousel-rtl/index.astro	Removes navbar-dark from the carousel RTL example navbar.
site/src/assets/examples/album/index.astro	Removes navbar-dark from the album header navbar.
site/src/assets/examples/album-rtl/index.astro	Removes navbar-dark from the album RTL header navbar.

Comments suppressed due to low confidence (2)

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

• This .navbar lost the .navbar-dark class but wasn’t given data-bs-theme="dark". Bootstrap’s dark navbar variables are only applied for .navbar-dark or .navbar[data-bs-theme="dark"] (see scss/_navbar.scss), so this header bar will use light navbar text/toggler styling on bg-dark. Add data-bs-theme="dark" on this .navbar element (or restore .navbar-dark).

  </div>
  <div class="navbar bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>Album</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>

site/src/assets/examples/album-rtl/index.astro:35

• This .navbar lost the .navbar-dark class but wasn’t given data-bs-theme="dark". Since the dark navbar CSS variables are only applied for .navbar-dark or .navbar[data-bs-theme="dark"] (see scss/_navbar.scss), this bar will fall back to light navbar colors on bg-dark. Add data-bs-theme="dark" on this .navbar element (or restore .navbar-dark).

  </div>
  <div class="navbar bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>الألبوم</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل">
        <span class="navbar-toggler-icon"></span>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.