-
+
-
+
+
+
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index db30bed8b9e0..28f1e17d147a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -95,8 +95,11 @@
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
+ padding: 0;
color: $carousel-control-color;
text-align: center;
+ background: none;
+ border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
diff --git a/site/content/docs/4.6/components/carousel.md b/site/content/docs/4.6/components/carousel.md
index b8fac60d38b4..4026ad4482f5 100644
--- a/site/content/docs/4.6/components/carousel.md
+++ b/site/content/docs/4.6/components/carousel.md
@@ -24,7 +24,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
-**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
+**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
### Slides only
@@ -48,7 +48,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
### With controls
-Adding in the previous and next controls:
+Adding in the previous and next controls. We recommend using `
+
{{< /example >}}
@@ -96,14 +96,14 @@ You can also add the indicators to the carousel, alongside the controls, too.
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
-
+
-
+
+
+
{{< /example >}}
@@ -141,14 +141,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a
-
+
-
+
+
+
{{< /example >}}
@@ -169,14 +169,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
-
+
-
+
+
+
{{< /example >}}
@@ -197,14 +197,14 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
-
+
-
+
+
+
{{< /example >}}
@@ -225,14 +225,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
-
+
-
+
+
+
{{< /example >}}
diff --git a/site/content/docs/4.6/examples/carousel/index.html b/site/content/docs/4.6/examples/carousel/index.html
index 96f71f772964..7882855fdc75 100644
--- a/site/content/docs/4.6/examples/carousel/index.html
+++ b/site/content/docs/4.6/examples/carousel/index.html
@@ -71,14 +71,14 @@