diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 814687fda8e..40e5168ad1f 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -144,7 +144,7 @@ response = request.render("website.template_partner_comment", {
                           <li class="active" data-slide-to="0" data-target="#myCarousel0"/>
                         </ol>
                         <div class="carousel-inner">
-                          <div class="item image_text oe_img_bg active" style="background-image: url(http://0.0.0.0:8069/web/image/website.s_background_image_11);">
+                          <div class="carousel-item image_text oe_img_bg active" style="background-image: url(http://0.0.0.0:8069/web/image/website.s_background_image_11);">
                             <div class="container">
                               <div class="row content">
                                 <div class="carousel-content col-lg-6 col-md-12">
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index ec82b3cf8ee..0ac854554d7 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -13,7 +13,7 @@
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner container" style="padding: 0;">
                  <t t-foreach="srcs" t-as="src">
-                    <div t-attf-class="item #{src_index == index and 'active' or ''}">
+                    <div t-attf-class="carousel-item #{src_index == index and 'active' or ''}">
                         <img t-attf-class="img img-fluid #{userStyle}" t-att-src="src" alt="Slide image"/>
                     </div>
                  </t>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 3e43dff514c..616237db330 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -21,7 +21,7 @@
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
         </ol>
         <div class="carousel-inner">
-            <div class="item oe_img_bg active bg-alpha pt48 pb48">
+            <div class="carousel-item oe_img_bg active bg-alpha pt48 pb48">
                 <div class="container">
                     <div class="row content">
                         <div class="carousel-content col-lg-4 offset-lg-1 mt64">
@@ -628,7 +628,7 @@
                     </ol>
                     <div class="carousel-inner">
 
-                        <div class="item text_only active">
+                        <div class="carousel-item text_only active">
                             <div class="container">
                                 <div class="content">
 
@@ -646,7 +646,7 @@
                             </div>
                         </div>
 
-                        <div class="item text_only">
+                        <div class="carousel-item text_only">
                             <div class="container">
                                 <div class="content">
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 7b70f556cd5..329708c5e69 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -427,10 +427,10 @@
                             <div id="o-carousel-product" class="carousel slide" data-ride="carousel" data-interval="0">
                               <div class="carousel-outer">
                                 <div class="carousel-inner">
-                                    <div t-if="variant_img" class="item active" itemprop="image" t-field="product[:1].product_variant_id.image" t-options="{'widget': 'image', 'class': 'product_detail_img js_variant_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update'] + (product.product_variant_id['__last_update'] or '')}"/>
-                                    <div t-attf-class="item#{'' if variant_img else ' active'}" itemprop="image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update']}"/>
+                                    <div t-if="variant_img" class="carousel-item active" itemprop="image" t-field="product[:1].product_variant_id.image" t-options="{'widget': 'image', 'class': 'product_detail_img js_variant_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update'] + (product.product_variant_id['__last_update'] or '')}"/>
+                                    <div t-attf-class="carousel-item#{'' if variant_img else ' active'}" itemprop="image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update']}"/>
                                     <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
-                                        <div class="item" t-field="pimg.image" t-options='{"widget": "image", "class": "product_detail_img", "alt-field": "name", "zoom": "image" }'/>
+                                        <div class="carousel-item" t-field="pimg.image" t-options='{"widget": "image", "class": "product_detail_img", "alt-field": "name", "zoom": "image" }'/>
                                     </t>
                                 </div>