diff --git a/account_banking_sepa_direct_debit/static/src/css/report.css b/account_banking_sepa_direct_debit/static/src/css/report.css
index 4ac2ccb32..1b3cf3b03 100644
--- a/account_banking_sepa_direct_debit/static/src/css/report.css
+++ b/account_banking_sepa_direct_debit/static/src/css/report.css
@@ -8,13 +8,11 @@
 .sepa_direct_debit input{
     vertical-align: baseline;
 }
-.sepa_direct_debit .panel-default{
+.sepa_direct_debit .card{
     border:2px solid;
-}
-.sepa_direct_debit .panel.panel-default{
     margin-bottom: 4px;
 }
-.sepa_direct_debit .panel-body{
+.sepa_direct_debit .card-body{
     padding: 2px 14px;
 }
 .sepa_direct_debit p{
diff --git a/account_banking_sepa_direct_debit/views/report_sepa_direct_debit_mandate.xml b/account_banking_sepa_direct_debit/views/report_sepa_direct_debit_mandate.xml
index 9acb45f33..e293f2764 100644
--- a/account_banking_sepa_direct_debit/views/report_sepa_direct_debit_mandate.xml
+++ b/account_banking_sepa_direct_debit/views/report_sepa_direct_debit_mandate.xml
@@ -6,10 +6,10 @@
         <t t-set="is_not_english" t-value="doc.partner_id.lang and doc.partner_id.lang[:2] != 'en'" />
         <div class="page sepa_direct_debit">
             <div class="row mt0">
-                <div class="col-xs-3">
+                <div class="col-3">
                     <img t-if="doc.company_id.logo" t-att-src="'data:image/png;base64,%s' % doc.company_id.logo" style="max-height: 45px;"/>
                 </div>
-                <div class="col-xs-12 text-center">
+                <div class="col-12 text-center">
                     <h4 t-if="doc.scheme != 'B2B'">
                         <strong>Sepa Direct Debit Mandate</strong>
                         <t t-if="is_not_english">
@@ -25,67 +25,67 @@
                 </div>
             </div>
             <div class="row mt8">
-                <div class="col-xs-12">
-                    <div class="panel panel-default">
-                        <div class="col-xs-12 text-right" style="font-size:8px;">
+                <div class="col-12">
+                    <div class="card">
+                        <div class="col-12 text-right" style="font-size:8px;">
                             To be completed by the creditor
                             <t t-if="is_not_english">
                                 <span class="native_lang" t-esc="'(To be completed by the creditor)'"/>
                             </t>
                         </div>
-                        <div class="panel-body">
-                            <div class="col-xs-12">
+                        <div class="card-body">
+                            <div class="col-12">
                                 <em>Mandate Reference:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Mandate Reference)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.unique_mandate_reference"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.unique_mandate_reference"/></div>
+                            <div class="col-12">
                                 <em>Identifier:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Identifier)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.company_id.sepa_creditor_identifier"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.company_id.sepa_creditor_identifier"/></div>
+                            <div class="col-12">
                                 <em>Creditor's Name:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Creditor\'s Name)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.name"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.name"/></div>
+                            <div class="col-12">
                                 <em>Address:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Address)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.street"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.street"/></div>
+                            <div class="col-12">
                                 <em>Postal Code - City - Town:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Postal Code - City - Town)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line  mt8">
+                            <div class="col-10 offset-2 under-line  mt8">
                                 <span t-field="doc.company_id.partner_id.zip"/> -
                                 <span t-field="doc.company_id.partner_id.city"/> -
                                 <span t-field="doc.company_id.partner_id.state_id"/>
                             </div>
-                            <div class="col-xs-12">
+                            <div class="col-12">
                                 <em>Country:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Country)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.country_id"/></div>
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.company_id.partner_id.country_id"/></div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row mt0">
-                <div class="col-xs-12">
+                <div class="col-12">
                     <p>By signing this mandate form, you authorise (A) <strong t-if="doc.scheme == 'B2B'"> <span t-field="doc.company_id.name"/> </strong>
                        to send instructions to your bank to debit your account and (B) your bank to
                        debit your account in accordance with the instructions from <strong t-if="doc.scheme == 'B2B'"> <span t-field="doc.company_id.name"/> </strong>.
@@ -100,7 +100,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12">
+                <div class="col-12">
                     <p t-if="doc.scheme == 'B2B'">
                         This mandate is only intended for business-to-business transactions.
                         You are not entitled to a refund from your bank after your account has
@@ -122,68 +122,68 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12">
-                    <div class="panel panel-default">
-                        <div class="col-xs-12 text-right" style="font-size:8px;">
+                <div class="col-12">
+                    <div class="card">
+                        <div class="col-12 text-right" style="font-size:8px;">
                             To be completed by the debtor
                             <t t-if="is_not_english">
                                 <span class="native_lang" t-esc="'(To be completed by the debtor)'"/>
                             </t>
                         </div>
-                        <div class="panel-body">
-                            <div class="col-xs-12">
+                        <div class="card-body">
+                            <div class="col-12">
                                 <em>Debtor's Name:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Debtor\'s Name)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.partner_id"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.partner_id"/></div>
+                            <div class="col-12">
                                 <em>Address of the Debtor:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Address of the Debtor)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.partner_id.street"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.partner_id.street"/></div>
+                            <div class="col-12">
                                 <em>Postal Code - City - Town:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Postal Code - City - Town)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4">
+                            <div class="col-10 offset-2 under-line mt4">
                                 <span t-field="doc.partner_id.zip"/> -
                                 <span t-field="doc.partner_id.city"/> -
                                 <span t-field="doc.partner_id.state_id"/>
                             </div>
-                            <div class="col-xs-12">
+                            <div class="col-12">
                                 <em>Country of the debtor:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Country of the debtor)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.partner_id.country_id"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.partner_id.country_id"/></div>
+                            <div class="col-12">
                                 <em>Swift BIC (up to 8 or 11 characteres):</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Swift BIC, up to 8 or 11 characteres)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.partner_bank_id.bank_bic"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.partner_bank_id.bank_bic"/></div>
+                            <div class="col-12">
                                 <em>Account Number - IBAN:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Account Number - IBAN)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt4"><span t-field="doc.partner_bank_id.acc_number"/></div>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt4"><span t-field="doc.partner_bank_id.acc_number"/></div>
+                            <div class="col-12">
                                 <em>Type of payment:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Type of payment)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 mt4">
+                            <div class="col-10 offset-2 mt4">
                                 <input type="checkbox" t-att-checked="doc.type=='recurrent' or None">
                                     Recurrent
                                     <t t-if="is_not_english">
@@ -198,26 +198,26 @@
                                     </t>
                                 </input>
                             </div>
-                            <div class="col-xs-12">
+                            <div class="col-12">
                                 <em>Date - Location:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Date - Location)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt16"/>
-                            <div class="col-xs-12">
+                            <div class="col-10 offset-2 under-line mt16"/>
+                            <div class="col-12">
                                 <em>Signature of the debtor:</em>
                                 <t t-if="is_not_english">
                                     <span class="native_lang native_lang_small" t-esc="'(Signature of the debtor)'"/>
                                 </t>
                             </div>
-                            <div class="col-xs-10 col-xs-offset-2 under-line mt16"/>
+                            <div class="col-10 offset-2 under-line mt16"/>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12 text-center">
+                <div class="col-12 text-center">
                     <p t-if="doc.scheme != 'B2B'">
                         ALL GAPS ARE MANDATORY. ONCE THIS MANDATE HAS BEEN SIGNED MUST BE SENT TO CREDITOR FOR STORAGE.
                         <t t-if="is_not_english">