diff --git a/views/website_sale_templates.xml b/views/website_sale_templates.xml
index 05d1090a77a..2f6756e28d5 100644
--- a/views/website_sale_templates.xml
+++ b/views/website_sale_templates.xml
@@ -25,39 +25,39 @@
     <xpath expr="//form[@name='coupon_code']" position="after">
         <t t-if="website_sale_order and website_sale_order.applied_coupon_ids">
             <t t-foreach="website_sale_order.applied_coupon_ids" t-as="coupon">
-                <div class="panel panel-success mt16">
-                    <div class="panel-heading clearfix">
+                <div class="card bg-success text-white mt16">
+                    <div class="card-header clearfix">
                     <span class="pull-left">You have successfully applied following promo code: <b t-esc="coupon.code"/></span>
                     </div>
                 </div>
             </t>
         </t>
         <t t-if="website_sale_order and website_sale_order.promo_code">
-            <div class="panel panel-success mt16">
-                <div class="panel-heading clearfix">
+            <div class="card bg-success text-white mt16">
+                <div class="card-header clearfix">
                 <span class="pull-left">You have successfully applied following promo code: <b t-esc="website_sale_order.promo_code"/></span>
                 </div>
             </div>
         </t>
         <t t-if="website_sale_order and website_sale_order.generated_coupon_ids">
             <t t-foreach="website_sale_order.generated_coupon_ids" t-as="coupon">
-                <div class="panel panel-success mt16">
-                    <div class="panel-heading clearfix">
+                <div class="card bg-success text-white mt16">
+                    <div class="card-header clearfix">
                         <span class="pull-left">Your reward <b t-esc="coupon.discount_line_product_id.name"/> is available on a next order with this promo code: <b t-esc="coupon.code"/></span>
                     </div>
                 </div>
             </t>
         </t>
         <t t-if="request.params.get('code_not_available')">
-            <div class="panel panel-danger mt16">
-                <div class="panel-heading clearfix">
+            <div class="card bg-danger text-white mt16">
+                <div class="card-header clearfix">
                     <span class="pull-left">Invalid or expired promo code</span>
                 </div>
             </div>
         </t>
         <t t-if="website_sale_order.get_promo_code_error(delete=False)">
-            <div class="panel panel-danger mt16">
-                <div class="panel-heading clearfix">
+            <div class="card bg-danger text-white mt16">
+                <div class="card-header clearfix">
                     <span class="pull-left"><t t-esc="website_sale_order.get_promo_code_error()" /></span>
                 </div>
             </div>