diff --git a/lemonldap-ng-portal/site/templates/bootstrap/checklogins.tpl b/lemonldap-ng-portal/site/templates/bootstrap/checklogins.tpl
index 42d553a64..9c37391c9 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/checklogins.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/checklogins.tpl
@@ -1,19 +1,23 @@
 
     <TMPL_IF NAME="CHECK_LOGINS">
-    <div class="form-group input-group">
-      <span class="input-group-addon">
-        <input type="checkbox" name="checkLogins" aria-describedby="checkLoginsLabel" <TMPL_IF NAME="ASK_LOGINS">checked</TMPL_IF> />
-      </span>
+    <div class="input-group mb-3">
+      <div class="input-group-prepend">
+        <div class="input-group-text">
+          <input type="checkbox" name="checkLogins" aria-describedby="checkLoginsLabel" <TMPL_IF NAME="ASK_LOGINS">checked</TMPL_IF> />
+        </div>
+      </div>
       <p class="form-control">
         <label id="checkLoginsLabel" for="checkLogins" trspan="checkLastLogins">Check my last logins</label>
       </p>
     </div>
     </TMPL_IF>
     <TMPL_IF NAME="STAYCONNECTED">
-    <div class="form-group input-group">
-      <span class="input-group-addon">
-        <input type="checkbox" id="stayconnected" name="stayconnected" aria-describedby="stayConnectedLabel" />
-      </span>
+    <div class="input-group">
+      <div class="input-group-prepend">
+        <div class="input-group-text">
+          <input type="checkbox" id="stayconnected" name="stayconnected" aria-describedby="stayConnectedLabel" />
+        </div>
+      </div>
       <p class="form-control">
         <label id="stayConnectedLabel" for="stayconnected" trspan="stayConnected">Stay connected on this device</label>
       </p>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/confirm.tpl b/lemonldap-ng-portal/site/templates/bootstrap/confirm.tpl
index f1d984498..e109f6855 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/confirm.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/confirm.tpl
@@ -16,13 +16,13 @@
     </TMPL_IF>
     <input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
 
-    <div class="panel panel-info">
-      <div class="panel-heading">
-        <h3 class="panel-title">
+    <div class="card text-white bg-info">
+      <div class="card-header">
+        <h3 class="card-title">
           <span trspan="confirmation">Confirmation</span>
         </h3>
       </div>
-      <div class="panel-body form">
+      <div class="card-body form">
 
       <TMPL_VAR NAME="MSG">
 
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/customfooter.tpl b/lemonldap-ng-portal/site/templates/bootstrap/customfooter.tpl
index f4859faac..d82012d3f 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/customfooter.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/customfooter.tpl
@@ -1,7 +1,7 @@
   <!-- Custom HTML footer -->
     <p>
       <span trspan="serviceProvidedBy">Service provided by</span>
-      <a href="http://lemonldap-ng.org" target="_blank" class="btn btn-default btn-xs">
+      <a href="http://lemonldap-ng.org" target="_blank" class="btn btn-secondary btn-xs">
         <span class="glyphicon glyphicon-new-window"></span>
         LemonLDAP::NG
       </a>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/customheader.tpl b/lemonldap-ng-portal/site/templates/bootstrap/customheader.tpl
index 921ecc2b2..45359b4d8 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/customheader.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/customheader.tpl
@@ -1,2 +1,2 @@
     <!-- Custom HTML header -->
-    <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/logos/logo_llng_400px.png" class="img-responsive img-rounded center-block" />
+    <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/logos/logo_llng_400px.png" class="img-fluid rounded mx-auto d-block" />
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/ext2fcheck.tpl b/lemonldap-ng-portal/site/templates/bootstrap/ext2fcheck.tpl
index fdea64631..92a3c71e7 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/ext2fcheck.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/ext2fcheck.tpl
@@ -4,7 +4,7 @@
 
 <div class="message message-positive alert"><span trspan="<TMPL_IF "LEGEND"><TMPL_VAR "LEGEND"><TMPL_ELSE>enterExt2fCode</TMPL_IF>"></span></div>
 
-<div class="panel panel-default">
+<div class="card">
 
 <form action="<TMPL_IF "TARGET"><TMPL_VAR "TARGET"><TMPL_ELSE>/ext2fcheck</TMPL_IF>" method="post" class="password" role="form">
   <div class="form">
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/footer.tpl b/lemonldap-ng-portal/site/templates/bootstrap/footer.tpl
index a1e1738af..192fc4f9e 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/footer.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/footer.tpl
@@ -1,13 +1,15 @@
   </div>
 
   <div id="footer">
+    <div class="row">
     <div class="col-md-2"></div>
-    <div class="col-md-8 col-xs-10">
+    <div class="col-md-8 col-10">
       <TMPL_INCLUDE NAME="customfooter.tpl">
     </div>
-    <div class="col-md-2 col-xs-2 text-right">
+    <div class="col-md-2 col-2 text-right">
       <span id="languages"></span>
     </div>
+    </div>
   </div>
 
 <!-- Constants -->
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/idpchoice.tpl b/lemonldap-ng-portal/site/templates/bootstrap/idpchoice.tpl
index a7d218ebc..0ba4e0bf5 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/idpchoice.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/idpchoice.tpl
@@ -17,13 +17,13 @@
     </TMPL_IF>
     <input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
 
-    <div class="panel panel-info">
-      <div class="panel-heading">
-        <h3 class="panel-title">
+    <div class="card text-white bg-info">
+      <div class="card-header">
+        <h3 class="card-title">
           <span trspan="selectIdP">Select your Identity Provider</span>
         </h3>
       </div>
-      <div class="panel-body form">
+      <div class="card-body form">
 
       <input type="hidden" id="idp" name="idp"/>
 
@@ -43,10 +43,9 @@
       </div>
 
       <TMPL_IF NAME="REMEMBER">
-	  <p>&nbsp;</p>
-      <div class="checkbox">
-        <input type="checkbox" id="remember" name="cookie_type" value="1" aria-describedby="rememberlabel">
-        <label id="rememberlabel" for="remember">
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="remember" name="cookie_type" value="1" aria-describedby="rememberlabel">
+        <label class="form-check-label" id="rememberlabel" for="remember">
           <span trspan="rememberChoice">Remember my choice</span>
         </label>
       </div>
@@ -56,7 +55,7 @@
         <script type="text/javascript" src="<TMPL_VAR NAME="STATIC_PREFIX">common/js/idpchoice.min.js"></script>
       //else -->
         <script type="text/javascript" src="<TMPL_VAR NAME="STATIC_PREFIX">common/js/idpchoice.js"></script>
-      <!-- //endif -->
+      <!-- //endif --> 
 
       </div>
     </div>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/info.tpl b/lemonldap-ng-portal/site/templates/bootstrap/info.tpl
index 9e8957378..951b83ba5 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/info.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/info.tpl
@@ -8,11 +8,11 @@
       <input type="hidden" id="authKey" name="<TMPL_VAR NAME="CHOICE_PARAM">" value="<TMPL_VAR NAME="CHOICE_VALUE">" />
     </TMPL_IF>
     <input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
-    <div class="panel panel-info">
-      <div class="panel-heading">
-        <h3 class="panel-title" trspan="info">Information</h3>
+    <div class="card text-white bg-info">
+      <div class="card-header">
+        <h3 class="card-title" trspan="info">Information</h3>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         <TMPL_VAR NAME="MSG">
       </div>
     </div>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/login.tpl b/lemonldap-ng-portal/site/templates/bootstrap/login.tpl
index e9edc7595..4319717c6 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/login.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/login.tpl
@@ -9,38 +9,28 @@
 
   <TMPL_IF AUTH_LOOP>
 
-    <div id="authMenu">
+    <div id="authMenu" class="card">
 
     <!-- Authentication loop -->
-    <div class="nav navbar-default">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
 
-    <div class="navbar-header">
-
-    <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
-        <span class="sr-only">
-            Toggle navigation
-        </span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+    <a class="navbar-brand" href="#"></a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
     </button>
-    <a class="navbar-brand" href="#">
-      <span class="glyphicon glyphicon-user"></span>
-    </a>
-
-    </div>
 
     <!-- Choice tabs -->
-    <div class="navbar-collapse collapse">
-
-      <ul class="nav navbar-nav">
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
         <TMPL_LOOP NAME="AUTH_LOOP">
-          <li title="<TMPL_VAR NAME="key">"><a href="#<TMPL_VAR NAME="key">"><TMPL_VAR NAME="name"></a></li>
+          <li class="nav-item" title="<TMPL_VAR NAME="key">"><a class="nav-link" href="#<TMPL_VAR NAME="key">"><TMPL_VAR NAME="name"></a></li>
         </TMPL_LOOP>
       </ul>
-
     </div>
- 
+
+    </nav>
+
+    <div>
       <!-- Forms -->
       <TMPL_LOOP NAME="AUTH_LOOP">
 
@@ -105,7 +95,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_FORM">
-  <div class="panel panel-default">
+  <div class="card">
   <TMPL_IF NAME="module">
     <form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
   <TMPL_ELSE>
@@ -122,7 +112,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_OPENID_FORM">
-  <div class="panel panel-default">
+  <div class="card">
   <TMPL_IF NAME="module">
     <form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
   <TMPL_ELSE>
@@ -139,7 +129,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_SSL_FORM">
-  <div class="panel panel-default">
+  <div class="card">
   <TMPL_IF NAME="module">
     <form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
   <TMPL_ELSE>
@@ -156,7 +146,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_YUBIKEY_FORM">
-  <div class="panel panel-default">
+  <div class="card">
   <TMPL_IF NAME="module">
     <form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
   <TMPL_ELSE>
@@ -173,7 +163,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_LOGO_FORM">
-  <div class="panel panel-default">
+  <div class="card">
   <TMPL_IF NAME="module">
     <form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
   <TMPL_ELSE>
@@ -203,7 +193,7 @@
   </TMPL_IF>
 
   <TMPL_IF NAME="DISPLAY_PASSWORD">
-    <div id="password" class="panel panel-default">
+    <div id="password" class="card">
     <TMPL_INCLUDE NAME="password.tpl">
     </div>
   </TMPL_IF>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/mail.tpl b/lemonldap-ng-portal/site/templates/bootstrap/mail.tpl
index 0d7410947..654af9cc4 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/mail.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/mail.tpl
@@ -6,7 +6,7 @@
   <div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
   </TMPL_IF>
 
-  <div class="panel panel-default">
+  <div class="card">
 
   <TMPL_IF NAME="DISPLAY_FORM">
 
@@ -71,11 +71,9 @@
       </p>
 
 
-      <div class="checkbox">
-        <label>
-          <input id="resendconfirmation" type="checkbox" name="resendconfirmation" aria-describedby="resendconfirmationlabel">
-          <label for="resendconfirmation" id="resendconfirmationlabel" trspan="confirmPwd">Yes, resend the mail</label>
-        </label>
+      <div class="form-check">
+          <input class="form-check-input" id="resendconfirmation" type="checkbox" name="resendconfirmation" aria-describedby="resendconfirmationlabel">
+          <label class="form-check-label" for="resendconfirmation" id="resendconfirmationlabel" trspan="confirmPwd">Yes, resend the mail</label>
       </div>
 
       <div class="form-group">
@@ -115,11 +113,9 @@
           <input name="confirmpassword" type="password" class="form-control" trplaceholder="confirmPwd" />
         </div>
 
-        <div class="checkbox">
-          <label>
-            <input id="reset" type="checkbox" name="reset" aria-describedby="resetlabel"/>
-            <label for="reset" id="resetlabel" trspan="generatePwd">Generate the password automatically</label>
-          </label>
+        <div class="form-check">
+            <input class="form-check-input" id="reset" type="checkbox" name="reset" aria-describedby="resetlabel"/>
+            <label class="form-check-label" for="reset" id="resetlabel" trspan="generatePwd">Generate the password automatically</label>
         </div>
 
         <div class="form-group">
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/menu.tpl b/lemonldap-ng-portal/site/templates/bootstrap/menu.tpl
index be2005800..e4668da1e 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/menu.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/menu.tpl
@@ -8,57 +8,45 @@
 
   <div id="menu">
 
-  <div class="nav navbar-default">
-
-    <div class="navbar-header">
-
-    <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
-        <span class="sr-only">
-            Toggle navigation
-        </span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#"></a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
     </button>
-    <a class="navbar-brand" href="#">
-      <span class="glyphicon glyphicon-home"></span>
-    </a>
-
-    </div>
 
     <TMPL_IF DISPLAY_MODULES>
 
-    <div class="navbar-collapse collapse">
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <!-- Tabs list -->
-      <ul class="nav navbar-nav">
+      <ul class="navbar-nav mr-auto">
         <TMPL_LOOP NAME="DISPLAY_MODULES">
 
           <TMPL_IF NAME="Appslist">
-            <li><a href="#appslist"><span>
+            <li class="nav-item"><a class="nav-link" href="#appslist"><span>
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/application_cascade.png" width="16" height="16" alt="appslist" />
               <span trspan="yourApps">Your applications</span>
             </span></a></li>
           </TMPL_IF>
           <TMPL_IF NAME="ChangePassword">
-            <li><a href="#password"><span>
+            <li class="nav-item"><a class="nav-link" href="#password"><span>
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/vcard_edit.png" width="16" height="16" alt="password" />
               <span trspan="password">Password</span>
             </span></a></li>
           </TMPL_IF>
           <TMPL_IF NAME="LoginHistory">
-            <li><a href="#loginHistory"><span>
+            <li class="nav-item"><a class="nav-link" href="#loginHistory"><span>
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/calendar.png" width="16" height="16" alt="login history" />
               <span trspan="loginHistory">Login history</span>
             </span></a></li>
           </TMPL_IF>
           <TMPL_IF NAME="OidcConsents">
-            <li><a href="#oidcConsents"><span>
+            <li class="nav-item"><a class="nav-link" href="#oidcConsents"><span>
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/oidc.png" width="16" height="16" alt="login history" />
               <span trspan="oidcConsents">OIDC Consent</span>
             </span></a></li>
           </TMPL_IF>
           <TMPL_IF NAME="Logout">
-            <li><a href="#logout"><span>
+            <li class="nav-item"><a class="nav-link" href="#logout"><span>
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/door_out.png" width="16" height="16" alt="logout" />
               <span trspan="logout">Logout</span>
             </span></a></li>
@@ -67,19 +55,19 @@
       </ul>
 
       <ul class="user nav navbar-nav navbar-right">
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
             <span trspan="connectedAs">Connected as</span> <TMPL_VAR NAME="AUTH_USER">
             <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
-			<TMPL_IF NAME="sfaManager">
-			  <li><a href="/2fregisters">
-	              <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/sfa_manager.png" width="16" height="16" alt="refresh" />
-	              <span trspan="sfaManager">sfaManager</span>
-	          </a></li>
+            <TMPL_IF NAME="sfaManager">
+              <li class="dropdown-item"><a href="/2fregisters">
+                <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/sfa_manager.png" width="16" height="16" alt="refresh" />
+                <span trspan="sfaManager">sfaManager</span>
+              </a></li>
             </TMPL_IF>
-            <li><a href="/refresh">
+            <li class="dropdown-item"><a href="/refresh">
               <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/arrow_refresh.png" width="16" height="16" alt="refresh" />
               <span trspan="refreshrights">Refresh</span>
             </a></li>
@@ -90,7 +78,7 @@
     </div>
     </TMPL_IF>
 
-    </div>
+    </nav>
 
     <!-- Tabs content -->
     <TMPL_LOOP NAME="DISPLAY_MODULES">
@@ -104,14 +92,14 @@
             <TMPL_IF NAME="category">
             <!-- Category -->
 
-              <div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid"> panel panel-info" id="sort_<TMPL_VAR NAME="__counter__">">
+              <div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid"> card border-secondary" id="sort_<TMPL_VAR NAME="__counter__">">
 
-                <div class="panel-heading">
-                <h3 class="catname panel-title"><TMPL_VAR NAME="catname"></h3>
+                <div class="card-header text-white bg-secondary">
+                <h4 class="catname card-title"><TMPL_VAR NAME="catname"></h4>
                 </div>
 
                   <TMPL_IF applications>
-                  <div class="panel-body">
+                  <div class="card-body">
                     <!-- Applications -->
 
                     <div class="row">
@@ -119,36 +107,38 @@
 
                       <!-- Application -->
                       <div class="col-md-4">
-                      <div class="application <TMPL_VAR NAME="appid"> panel panel-default">
-                        <a class="btn btn-link" href="<TMPL_VAR NAME="appuri">" title="<TMPL_VAR NAME="appname">" role="button">
+                      <div class="application <TMPL_VAR NAME="appid"> card">
+                        <a href="<TMPL_VAR NAME="appuri">" title="<TMPL_VAR NAME="appname">" >
 
+                        <div class="card-body">
                         <div class="row">
                         <!-- Logo (optional) -->
                         <TMPL_IF NAME="applogo">
-                          <div class="col-xs-3">
+                          <div class="col-3">
                           <img src="<TMPL_VAR NAME="STATIC_PREFIX">common/apps/<TMPL_VAR NAME="applogo">"
-                            class="applogo <TMPL_VAR NAME="appid">"
+                            class="applogo <TMPL_VAR NAME="appid"> img-fluid"
                             alt="<TMPL_VAR NAME="appname">" />
                           </div>
-                          <div class="col-xs-9">
+                          <div class="col-9">
                         <TMPL_ELSE>
-                          <div class="col-xs-12">
+                          <div class="col-12">
                         </TMPL_IF>
                         
                         <!-- Name and link (mandatory) -->
-                        <h4 class="appname <TMPL_VAR NAME="appid"> text-center">
+                        <h5 class="appname <TMPL_VAR NAME="appid"> card-title">
                           <TMPL_VAR NAME="appname">
-                        </h4>
+                        </h5>
 
                         <!-- Description (optional) -->
                         <TMPL_IF NAME="appdesc">
-                          <p class="appdesc <TMPL_VAR NAME="appid"> hidden-xs">
+                          <p class="appdesc <TMPL_VAR NAME="appid"> card-subtitle mb-2 text-muted">
                             <TMPL_VAR NAME="appdesc">
                           </p>
                         </TMPL_IF>
 
                           </div>
                         </div>
+                        </div>
                         </a>
 
                       </div>
@@ -173,11 +163,11 @@
 
       <TMPL_IF NAME="ChangePassword">
         <div id="password">
-            <div class="panel panel-info">
-              <div class="panel-heading">
-              <h3 class="panel-title" trspan="changePwd">Change your password</h3>
+            <div class="card border-secondary">
+              <div class="card-header text-white bg-secondary">
+              <h3 class="card-title" trspan="changePwd">Change your password</h3>
               </div>
-              <div class="panel-body">
+              <div class="card-body">
               <TMPL_INCLUDE NAME="password.tpl">
               </div>
             </div>
@@ -187,21 +177,21 @@
       <TMPL_IF NAME="LoginHistory">
         <div id="loginHistory">
             <TMPL_IF NAME="SUCCESS_LOGIN">
-            <div class="panel panel-info">
-              <div class="panel-heading">
-              <h3 class="panel-title" trspan="lastLogins">Last logins</h3>
+            <div class="card border-secondary">
+              <div class="card-header text-white bg-secondary">
+              <h3 class="card-title" trspan="lastLogins">Last logins</h3>
               </div>
-              <div class="panel-body">
+              <div class="card-body">
               <TMPL_VAR NAME="SUCCESS_LOGIN">
               </div>
             </div>
             </TMPL_IF>
             <TMPL_IF NAME="FAILED_LOGIN">
-            <div class="panel panel-info">
-              <div class="panel-heading">
-              <h3 class="panel-title" trspan="lastFailedLogins">Last failed logins</h3>
+            <div class="card border-secondary">
+              <div class="card-header text-white bg-secondary">
+              <h3 class="card-title" trspan="lastFailedLogins">Last failed logins</h3>
               </div>
-              <div class="panel-body">
+              <div class="card-body">
               <TMPL_VAR NAME="FAILED_LOGIN">
               </div>
             </div>
@@ -211,11 +201,11 @@
 
       <TMPL_IF NAME="OidcConsents">
         <div id="oidcConsents">
-            <div class="panel panel-info">
-              <div class="panel-heading">
-              <h3 class="panel-title" trspan="oidcConsentsFull">OpenID-Connect Consents</h3>
+            <div class="card border-secondary">
+              <div class="card-header text-white bg-secondary">
+              <h3 class="card-title" trspan="oidcConsentsFull">OpenID-Connect Consents</h3>
               </div>
-              <div class="panel-body">
+              <div class="card-body">
               <TMPL_VAR NAME="OIDC_CONSENTS">
               </div>
             </div>
@@ -224,11 +214,11 @@
 
       <TMPL_IF NAME="Logout">
         <div id="logout">
-          <div class="panel panel-info">
-            <div class="panel-heading">
-              <h3 class="panel-title" trspan="areYouSure">Are you sure ?</h3>
+          <div class="card border-secondary">
+            <div class="card-header text-white bg-secondary">
+              <h3 class="card-title" trspan="areYouSure">Are you sure ?</h3>
             </div>
-            <div class="panel-body buttons">
+            <div class="card-body buttons">
             <a href="<TMPL_VAR NAME="LOGOUT_URL">" class="btn btn-success" role="button">
               <span class="glyphicon glyphicon-ok"></span>
               <span trspan="imSure">I'm sure</span>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/notification.tpl b/lemonldap-ng-portal/site/templates/bootstrap/notification.tpl
index 7a0edb1d6..a772f4c6c 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/notification.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/notification.tpl
@@ -10,12 +10,12 @@
     <TMPL_IF NAME="AUTH_URL">
       <input type="hidden" name="url" value="<TMPL_VAR NAME="AUTH_URL">" />
     </TMPL_IF>
-    <div class="panel panel-info">
-      <div class="panel-heading">
-        <h3 class="panel-title" trspan="gotNewMessages">You have some new messages</h3>
+    <div class="card text-white bg-info">
+      <div class="card-header">
+        <h3 class="card-title" trspan="gotNewMessages">You have some new messages</h3>
       </div>
-      <div class="panel-body">
-        <div class="form well">
+      <div class="card-body">
+        <div class="form card.card-body">
         <TMPL_VAR NAME="NOTIFICATION">
         </div>
       </div>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/register.tpl b/lemonldap-ng-portal/site/templates/bootstrap/register.tpl
index 2450ff70d..721be0f61 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/register.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/register.tpl
@@ -6,7 +6,7 @@
   <div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
   </TMPL_IF>
 
-  <div class="panel panel-default">
+  <div class="card">
 
   <TMPL_IF NAME="DISPLAY_FORM">
 
@@ -85,11 +85,9 @@
       </p>
 
 
-      <div class="checkbox">
-        <label for="resendconfirmation">
-          <input id="resendconfirmation" type="checkbox" name="resendconfirmation" ariadescribedby="resendconfirmationlabel">
-          <label id="resendconfirmationlabel" for="resendconfirmation" trspan="yesResendMail">Yes, resend the mail</label>
-        </label>
+      <div class="form-check">
+          <input class="form-check-input" id="resendconfirmation" type="checkbox" name="resendconfirmation" ariadescribedby="resendconfirmationlabel">
+          <label class="form-check-label" id="resendconfirmationlabel" for="resendconfirmation" trspan="yesResendMail">Yes, resend the mail</label>
       </div>
 
       <div class="form-group">
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/totp2fcheck.tpl b/lemonldap-ng-portal/site/templates/bootstrap/totp2fcheck.tpl
index 80f672f3f..b9edcb276 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/totp2fcheck.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/totp2fcheck.tpl
@@ -4,7 +4,7 @@
 
 <div class="message message-positive alert"><span trspan="enterTotpCode"></span></div>
 
-<div class="panel panel-default">
+<div class="card">
 
 <form action="/totp2fcheck" method="post" class="password" role="form">
   <div class="form">
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/totp2fregister.tpl b/lemonldap-ng-portal/site/templates/bootstrap/totp2fregister.tpl
index 2c5d74efc..dec49f23d 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/totp2fregister.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/totp2fregister.tpl
@@ -5,8 +5,8 @@
 </div>
 
   <main id="menucontent" class="container">
-   <div class="panel panel-info">
-    <div class="panel-body">
+   <div class="card">
+    <div class="card-body">
 
        <div id="divToHide">
         <canvas id="qr"></canvas>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/u2fregister.tpl b/lemonldap-ng-portal/site/templates/bootstrap/u2fregister.tpl
index d2925d7e7..4cfa11656 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/u2fregister.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/u2fregister.tpl
@@ -5,8 +5,8 @@
   </div>
 
   <main id="menucontent" class="container">
-    <div class="panel panel-info">
-     <div class="panel-body">
+    <div class="card">
+     <div class="card-body">
        <div id="u2fPermission" trspan="u2fPermission" class="alert alert-info">You may be prompted to allow the site permission to access your security keys. After granting permission, the device will start to blink.
        </div>
        <div class="buttons">
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/utotp2fcheck.tpl b/lemonldap-ng-portal/site/templates/bootstrap/utotp2fcheck.tpl
index 505fd9157..74cb9177b 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/utotp2fcheck.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/utotp2fcheck.tpl
@@ -6,7 +6,7 @@
   <div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
 </TMPL_IF>
 
-<div class="panel panel-default">
+<div class="card">
 
 <TMPL_IF NAME="FAILED">
   <p trspan="u2fFailed"></p>
diff --git a/lemonldap-ng-portal/site/templates/bootstrap/yubikey2fregister.tpl b/lemonldap-ng-portal/site/templates/bootstrap/yubikey2fregister.tpl
index d7c7da7d2..ffa3c703a 100644
--- a/lemonldap-ng-portal/site/templates/bootstrap/yubikey2fregister.tpl
+++ b/lemonldap-ng-portal/site/templates/bootstrap/yubikey2fregister.tpl
@@ -4,8 +4,8 @@
   <div id="color" class="message message-positive alert"><span id="msg" trspan="clickOnYubikey"></span></div>
 </div>
   <main id="menucontent" class="container">
-    <div class="panel panel-info">
-     <div class="panel-body">
+    <div class="card text-white bg-info">
+     <div class="card-body">
       <form action="/2fregisters/yubikey/register" method="post">
        <div class="form-group">
 		<b><span trspan="name">Name</span></b> : <input type="text" id="UBKName" name="UBKName" value="MyYubikey"/>