From: Julien Déramond <juderamond@gmail.com>
Date: Fri, 26 Jun 2026 04:10:45 +0000 (+0200)
Subject: Docs: modify remaining `.bg-{color}-subtle` to `.bg-subtle-{color}` usage (#42564)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=15b26000b34fa900106200b3bf6e8ae65e912c35;p=thirdparty%2Fbootstrap.git

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

diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
index 74682b602e..83216a72a9 100644
--- a/site/src/content/docs/components/carousel.mdx
+++ b/site/src/content/docs/components/carousel.mdx
@@ -125,21 +125,21 @@ You can put any markup you like inside each `.carousel-item`. Add content, then
 <Example code={`<div id="carouselExampleContent" class="carousel slide">
     <div class="carousel-inner rounded-5">
       <div class="carousel-item active">
-        <div class="d-flex flex-column justify-content-center bg-primary-subtle p-9 bg-1 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center bg-subtle-primary p-9 bg-1 rounded-5" style="min-height: 320px;">
           <h3>Build anything</h3>
           <p class="text-secondary-emphasis mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
           <div><a class="btn-solid theme-primary" href="#">Get started</a></div>
         </div>
       </div>
       <div class="carousel-item">
-        <div class="d-flex flex-column justify-content-center text-center bg-success-subtle p-9 bg-2 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center text-center bg-subtle-success p-9 bg-2 rounded-5" style="min-height: 320px;">
           <h3>Style it your way</h3>
           <p class="text-secondary-emphasis mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
           <div><a class="btn-solid theme-success" href="#">Learn more</a></div>
         </div>
       </div>
       <div class="carousel-item">
-        <div class="d-flex flex-column justify-content-center text-end bg-warning-subtle p-9 bg-3 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center text-end bg-subtle-warning p-9 bg-3 rounded-5" style="min-height: 320px;">
           <h3>Mix and match</h3>
           <p class="text-secondary-emphasis mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
           <div><a class="btn-solid theme-inverse" href="#">Browse examples</a></div>