diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 40e5168ad1f..6c1be81c3aa 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -159,10 +159,10 @@ response = request.render("website.template_partner_comment", {
                             </div>
                           </div>
                         </div>
-                        <div class="carousel-control left d-none" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous">
+                        <div class="carousel-control-prev d-none" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous">
                           <i class="fa fa-chevron-left"/>
                         </div>
-                        <div class="carousel-control right d-none" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next">
+                        <div class="carousel-control-next d-none" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next">
                           <i class="fa fa-chevron-right"/>
                         </div>
                       </div>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 14f1b6f0a4f..f9004b421e1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -188,7 +188,7 @@ options.registry.carousel = options.Class.extend({
         var cycle = this.$inner.find('.item').length;
         var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
         var index = $active.index();
-        this.$('.carousel-control, .carousel-indicators').removeClass('d-none');
+        this.$('.carousel-control-prev, .carousel-control-next, .carousel-indicators').removeClass('d-none');
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
         var $clone = this.$('.item:first').clone(true);
         $clone.removeClass('active').insertAfter($active);
@@ -223,7 +223,7 @@ options.registry.carousel = options.Class.extend({
                 self._rebindEvents();
                 self.remove_process = false;
                 if (cycle === 1) {
-                    self.$target.find('.carousel-control, .carousel-indicators').addClass('d-none');
+                    self.$target.find('.carousel-control-prev, .carousel-control-next, .carousel-indicators').addClass('d-none');
                 }
             });
             _.defer(function () {
@@ -258,7 +258,7 @@ options.registry.carousel = options.Class.extend({
      */
     _rebindEvents: function () {
         var self = this;
-        this.$target.find('.carousel-control').off('click').on('click', function () {
+        this.$target.find('.carousel-control-prev, .carousel-control-next').off('click').on('click', function () {
             self.$target.carousel($(this).data('slide'));
         });
         this.$target.find('.carousel-indicators [data-slide-to]').off('click').on('click', function () {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index fa35b6dbc58..a0fbee0ce41 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -190,7 +190,7 @@ table.table_desc tr td {
     .item {
         height: 100%;
     }
-    .carousel-control {
+    .carousel-control-prev, .carousel-control-next {
         cursor: pointer;
         span {
             top: 50%;
@@ -199,8 +199,8 @@ table.table_desc tr td {
         }
     }
 }
-.carousel .carousel-control {
-    &.left {
+.carousel {
+    .carousel-control-prev {
         left: -10px;
         * {
             position: absolute;
@@ -209,7 +209,7 @@ table.table_desc tr td {
             right: 50%;
         }
     }
-    &.right {
+    .carousel-control-next {
         right: -10px;
         * {
             position: absolute;
@@ -439,11 +439,9 @@ div.carousel .container {
                 }
             }
 
-            .carousel-control {
-                &.right, &.left {
-                    background-image: none;
-                    background-color: transparent;
-                }
+            .carousel-control-next, .carousel-control-prev {
+                background-image: none;
+                background-color: transparent;
             }
         }
     }
@@ -461,7 +459,7 @@ div.carousel {
         max-height: 95%;
         padding: 10px;
     }
-    .carousel-control {
+    .carousel-control-prev, .carousel-control-next {
         cursor: pointer;
     }
 }
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 0ac854554d7..026b75c2377 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -27,8 +27,8 @@
                 <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Next" title="Next"></li>
             </ul>
 
-            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
-            <a class="carousel-control right" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
+            <a class="carousel-control-prev" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
+            <a class="carousel-control-next" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
         </div>
     </t>
 
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 2fb2ac8dba3..7dd59e3499d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -36,8 +36,8 @@
                 </div>
             </div>
         </div>
-        <div class="carousel-control left d-none" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div>
-        <div class="carousel-control right d-none" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div>
+        <div class="carousel-control-prev d-none" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div>
+        <div class="carousel-control-next d-none" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div>
     </div>
 </template>
 
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index d5941bbd391..bd928b6f974 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -725,14 +725,14 @@ a.no-decoration {
 }
 
 #o-carousel-product {
-    .carousel-inner div.item, .carousel-control {
+    .carousel-inner div.item, .carousel-control-prev, .carousel-control-next {
         height: 400px;
     }
     .carousel-inner div.item img {
         max-height: 100%;
     }
 
-    .carousel-control {
+    .carousel-control-prev, carousel-control-next {
         background-image: none !important;
     }
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 9c42b6698d7..0823a4d8dd1 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -437,10 +437,10 @@
                                 </div>
 
                                 <t t-if="len(image_ids) or variant_img">
-                                    <a class="carousel-control left" href="#o-carousel-product" role="button" data-slide="prev" >
+                                    <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-slide="prev" >
                                         <span class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"/>
                                     </a>
-                                    <a class="carousel-control right" href="#o-carousel-product" role="button" data-slide="next">
+                                    <a class="carousel-control-next" href="#o-carousel-product" role="button" data-slide="next">
                                         <span class="fa fa-chevron-right" role="img" aria-label="Next" title="Next"/>
                                     </a>
                                 </t>