diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 6bcd8f796c7c3301b5fc440d3f73aa81a69b38b3..8dd819fba11002f5639a62d6dad90b0e2c43e076 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -59,11 +59,11 @@ Adding in the previous and next controls:
       <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
-  <a class="carousel-control carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
@@ -92,11 +92,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
       <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
-  <a class="carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 3f906960ffe4b805b63fd19745ec48177cd34819..edab899190bcf355817f9666a5608ec9d1258704 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -75,11 +75,11 @@
           </div>
         </div>
       </div>
-      <a class="carousel-control carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       </a>
-      <a class="carousel-control carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+      <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
diff --git a/docs/migration.md b/docs/migration.md
index 212de6dfe53273ac9813756e758edd656bb14cbc..c1b6435caa34d944db613f766732ec824b7e580e 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -187,7 +187,7 @@ Dropped entirely for the new card component.
 - All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`.
   - For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`.
   - `.item` is also now `.carousel-item`.
-  - For prev/next controls, `.right` and `.left` modifiers are now `.carousel-control-left` and `.carousel-control-left`.
+  - For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-left` and `.carousel-control-left`, meaning they no longer require a specific base class.
 - Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
 - Removed image overrides for images in carousel items, deferring to utilities.
 - Tweaked the Carousel example to include the new markup and styles.
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 6b330db68c76867c51a4eef9ae33441e9cbce98e..8a077f0833653efe6e1aeac394b024ea4bfdb18a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -56,7 +56,8 @@
 // Left/right controls for nav
 //
 
-.carousel-control {
+.carousel-control-prev,
+.carousel-control-next {
   position: absolute;
   top: 0;
   bottom: 0;