Merge pull request #261 from puikinsh/Bootstrap5-Update

Bootstrap5 update

CHANGELOG.md

@@ -6,4 +6,8 @@
 
 #### 1.1.0
 
-- Upgrade to webpack 5
+- Upgrade to webpack 5
+
+#### 2.0.0
+
+- Upgrade to Bootstrap 5

README.md

@@ -1,5 +1,5 @@
 # Adminator HTML5 Admin Template
-**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
+**Adminator** is a responsive Bootstrap 5 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
 
 # Preview
 

forms.php

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -325,7 +325,7 @@
                     <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -342,7 +342,7 @@
                       </li>
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -359,7 +359,7 @@
                       </li>
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -378,14 +378,14 @@
                   </li>
                   <li class="pX-20 pY-15 ta-c bdT">
                     <span>
-                      <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
+                      <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs ms-10"></i></a>
                     </span>
                   </li>
                 </ul>
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -398,7 +398,7 @@
                     <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -420,7 +420,7 @@
                       </li>
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -442,7 +442,7 @@
                       </li>
                       <li>
                         <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
-                          <div class="peer mR-15">
+                          <div class="peer me-15">
                             <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
                           </div>
                           <div class="peer peer-greed">
@@ -466,14 +466,14 @@
                   </li>
                   <li class="pX-20 pY-15 ta-c bdT">
                     <span>
-                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
                     </span>
                   </li>
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
-                  <div class="peer mR-10">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
+                  <div class="peer me-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
                   <div class="peer">
@@ -483,26 +483,26 @@
                 <ul class="dropdown-menu fsz-sm">
                   <li>
                     <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
-                      <i class="ti-settings mR-10"></i>
+                      <i class="ti-settings me-10"></i>
                       <span>Setting</span>
                     </a>
                   </li>
                   <li>
                     <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
-                      <i class="ti-user mR-10"></i>
+                      <i class="ti-user me-10"></i>
                       <span>Profile</span>
                     </a>
                   </li>
                   <li>
                     <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
-                      <i class="ti-email mR-10"></i>
+                      <i class="ti-email me-10"></i>
                       <span>Messages</span>
                     </a>
                   </li>
                   <li role="separator" class="divider"></li>
                   <li>
                     <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
-                      <i class="ti-power-off mR-10"></i>
+                      <i class="ti-power-off me-10"></i>
                       <span>Logout</span>
                     </a>
                   </li>
@@ -522,18 +522,18 @@
                   <h6 class="c-grey-900">Basic Form</h6>
                   <div class="mT-30">
                     <form action="" method="POST">
-                      <div class="form-group">
-                        <label for="exampleInputEmail1">Email address</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="exampleInputEmail1">Email address</label>
                         <input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+                        <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
                       </div>
-                      <div class="form-group">
-                        <label for="exampleInputPassword1">Password</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="exampleInputPassword1">Password</label>
                         <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                       </div>
                       <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
                         <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                        <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
                           <span class="peer peer-greed">Call John for Dinner</span>
                         </label>
                       </div>
@@ -564,47 +564,47 @@
                   <h6 class="c-grey-900">Complex Form Layout</h6>
                   <div class="mT-30">
                     <form action="" method="POST">
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label for="inputEmail4">Email</label>
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label for="inputEmail4" class="form-label">Email</label>
                           <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                         </div>
-                        <div class="form-group col-md-6">
-                          <label for="inputPassword4">Password</label>
+                        <div class="mb-3 col-md-6">
+                          <label for="inputPassword4" class="form-label">Password</label>
                           <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                         </div>
                       </div>
-                      <div class="form-group">
-                        <label for="inputAddress">Address</label>
+                      <div class="mb-3">
+                        <label for="inputAddress" class="form-label">Address</label>
                         <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                       </div>
-                      <div class="form-group">
-                        <label for="inputAddress2">Address 2</label>
+                      <div class="mb-3">
+                        <label for="inputAddress2" class="form-label">Address 2</label>
                         <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                       </div>
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label for="inputCity">City</label>
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label for="inputCity" class="form-label">City</label>
                           <input type="text" class="form-control" id="inputCity">
                         </div>
-                        <div class="form-group col-md-4">
-                          <label for="inputState">State</label>
+                        <div class="mb-3 col-md-4">
+                          <label for="inputState" class="form-label">State</label>
                           <select id="inputState" class="form-control">
                             <option selected>Choose...</option>
                             <option>...</option>
                           </select>
                         </div>
-                        <div class="form-group col-md-2">
-                          <label for="inputZip">Zip</label>
+                        <div class="mb-3 col-md-2">
+                          <label for="inputZip" class="form-label">Zip</label>
                           <input type="text" class="form-control" id="inputZip">
                         </div>
                       </div>
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label class="fw-500">Birthdate</label>
-                          <div class="timepicker-input input-icon form-group">
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label class="form-label" class="fw-500">Birthdate</label>
+                          <div class="timepicker-input input-icon mb-3">
                             <div class="input-group">
-                              <div class="input-group-addon bgc-white bd bdwR-0">
+                              <div class="input-group-text bgc-white bd bdwR-0">
                                 <i class="ti-calendar"></i>
                               </div>
                               <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@@ -612,10 +612,10 @@
                           </div>
                         </div>
                       </div>
-                      <div class="form-group">
+                      <div class="mb-3">
                         <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                           <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
-                          <label for="inputCall2" class=" peers peer-greed js-sb ai-c">
+                          <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
                             <span class="peer peer-greed">Call John for Dinner</span>
                           </label>
                         </div>
@@ -630,36 +630,36 @@
                   <h6 class="c-grey-900">Horizontal Form</h6>
                   <div class="mT-30">
                     <form>
-                      <div class="form-group row">
-                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
+                      <div class="mb-3 row">
+                        <label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
                         <div class="col-sm-10">
                           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                         </div>
                       </div>
-                      <div class="form-group row">
-                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
+                      <div class="mb-3 row">
+                        <label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
                         <div class="col-sm-10">
                           <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                         </div>
                       </div>
-                      <fieldset class="form-group">
+                      <fieldset class="mb-3">
                         <div class="row">
                           <legend class="col-form-legend col-sm-2">Radios</legend>
                           <div class="col-sm-10">
                             <div class="form-check">
-                              <label class="form-check-label">
+                              <label class="form-check-label form-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                 Option one is this and that&mdash;be sure to include why it's great
                               </label>
                             </div>
                             <div class="form-check">
-                              <label class="form-check-label">
+                              <label class="form-check-label form-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                 Option two can be something else and selecting it will deselect option one
                               </label>
                             </div>
                             <div class="form-check disabled">
-                              <label class="form-check-label">
+                              <label class="form-check-label form-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                 Option three is disabled
                               </label>
@@ -667,17 +667,17 @@
                           </div>
                         </div>
                       </fieldset>
-                      <div class="form-group row">
+                      <div class="mb-3 row">
                         <div class="col-sm-2">Checkbox</div>
                         <div class="col-sm-10">
                           <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label form-label">
                               <input class="form-check-input" type="checkbox"> Check me out
                             </label>
                           </div>
                         </div>
                       </div>
-                      <div class="form-group row">
+                      <div class="mb-3 row">
                         <div class="col-sm-10">
                           <button type="submit" class="btn btn-primary">Sign in</button>
                         </div>
@@ -692,18 +692,18 @@
                   <div class="mT-30">
                     <form>
                       <fieldset disabled>
-                        <div class="form-group">
-                          <label for="disabledTextInput">Disabled input</label>
+                        <div class="mb-3">
+                          <label for="disabledTextInput" class="form-label">Disabled input</label>
                           <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                         </div>
-                        <div class="form-group">
-                          <label for="disabledSelect">Disabled select menu</label>
+                        <div class="mb-3">
+                          <label for="disabledSelect" class="form-label">Disabled select menu</label>
                           <select id="disabledSelect" class="form-control">
                             <option>Disabled select</option>
                           </select>
                         </div>
                         <div class="form-check">
-                          <label class="form-check-label">
+                          <label class="form-check-label" class="form-label">
                             <input class="form-check-input" type="checkbox"> Can't check this
                           </label>
                         </div>
@@ -720,31 +720,31 @@
                     <form class="container" id="needs-validation" novalidate>
                       <div class="row">
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom01">First name</label>
+                          <label for="validationCustom01" class="form-label">First name</label>
                           <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
                         </div>
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom02">Last name</label>
+                          <label for="validationCustom02" class="form-label">Last name</label>
                           <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
                         </div>
                       </div>
                       <div class="row">
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom03">City</label>
+                          <label for="validationCustom03" class="form-label">City</label>
                           <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                           <div class="invalid-feedback">
                             Please provide a valid city.
                           </div>
                         </div>
                         <div class="col-md-3 mb-3">
-                          <label for="validationCustom04">State</label>
+                          <label for="validationCustom04" class="form-label">State</label>
                           <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                           <div class="invalid-feedback">
                             Please provide a valid state.
                           </div>
                         </div>
                         <div class="col-md-3 mb-3">
-                          <label for="validationCustom05">Zip</label>
+                          <label for="validationCustom05" class="form-label">Zip</label>
                           <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                           <div class="invalid-feedback">
                             Please provide a valid zip.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminator",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
@@ -20,6 +20,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.13.9",
     "@babel/runtime": "^7.13.9",
+    "@popperjs/core": "^2.9.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.2.2",
     "babel-preset-env": "^1.7.0",
@@ -30,16 +31,16 @@
     "css-loader": "^5.2.6",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.14.1",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
+    "postcss": "^8.3.4",
+    "postcss-loader": "^6.1.0",
     "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^11.1.1",
+    "sass-loader": "^12.1.0",
     "shx": "^0.3.3",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
@@ -50,21 +51,20 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.7.0",
-    "@fullcalendar/daygrid": "^5.7.0",
-    "@fullcalendar/interaction": "^5.7.0",
-    "@fullcalendar/list": "^5.7.0",
-    "@fullcalendar/timegrid": "^5.7.0",
-    "@popperjs/core": "^2.9.2",
+    "@fullcalendar/core": "^5.7.2",
+    "@fullcalendar/daygrid": "^5.7.2",
+    "@fullcalendar/interaction": "^5.7.2",
+    "@fullcalendar/list": "^5.7.2",
+    "@fullcalendar/timegrid": "^5.7.2",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.0.1",
     "bootstrap-datepicker": "^1.9.0",
     "brand-colors": "^2.1.1",
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^6.2.0",
-    "fullcalendar": "^5.7.0",
+    "fullcalendar": "^5.7.2",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",
@@ -72,8 +72,7 @@
     "lodash": "^4.17.21",
     "masonry-layout": "^4.2.2",
     "moment": "^2.29.1",
-    "perfect-scrollbar": "^1.5.0",
-    "popper.js": "^1.16.1",
+    "perfect-scrollbar": "^1.5.1",
     "skycons": "^1.0.0"
   }
 }

src/assets/scripts/fullcalendar/index.js

@@ -1,4 +1,3 @@
-import * as $ from 'jquery';
 import { Calendar } from '@fullcalendar/core';
 import interactionPlugin from '@fullcalendar/interaction';
 import dayGridPlugin from '@fullcalendar/daygrid';

src/assets/scripts/index.js

@@ -1,5 +1,8 @@
-import '../styles/index.scss';
+// import "@popperjs/core";
+import bootstrap from 'bootstrap';
 
+import '../styles/index.scss';
+import './fullcalendar';
 import './masonry';
 import './charts';
 import './popover';
@@ -12,6 +15,5 @@ import './chat';
 import './datatable';
 import './datepicker';
 import './email';
-import './fullcalendar';
 import './googleMaps';
 import './utils';

src/assets/scripts/popover/index.js

@@ -1,16 +1,22 @@
-import * as $ from 'jquery';
-import 'bootstrap';
+// import * as $ from 'jquery';
+import * as bootstrap from 'bootstrap'
 
 export default (function () {
   // ------------------------------------------------------
   // @Popover
   // ------------------------------------------------------
 
-  $('[data-toggle="popover"]').popover();
+  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+  return new bootstrap.Popover(popoverTriggerEl)
+})
 
   // ------------------------------------------------------
   // @Tooltips
   // ------------------------------------------------------
 
-  $('[data-toggle="tooltip"]').tooltip();
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+})
 }());

src/assets/styles/spec/components/topbar.scss

@@ -93,10 +93,10 @@
     }
 
     .dropdown-menu {
-      display: block;
+      // display: block;
       margin: 0;
       transform-origin: top right;
-      transform: scale(0, 0);
+      // transform: scale(0, 0);
       transition: transform 0.15s ease-out;
 
       .divider {

src/assets/styles/spec/generic/base.scss

@@ -4,6 +4,7 @@ html, html a, body {
 
 a {
   transition: all 0.3s ease-in-out;
+  text-decoration: none;
 }
 
 body {
@@ -77,3 +78,20 @@ a {
 hr {
   border-top: 1px solid $border-color;
 }
+
+
+a.btn {
+    color:#fff;
+  }
+
+a.btn:hover {
+  color:#fff;
+}
+
+.btn-color {
+  color:#fff;
+}
+
+.btn-color:hover {
+  color:#fff;
+}

src/basic-table.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -466,13 +466,13 @@
                   </li>
                   <li class="pX-20 pY-15 ta-c bdT">
                     <span>
-                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
                     </span>
                   </li>
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -521,7 +521,7 @@
                 <div class="col-md-12">
                   <div class="bgc-white bd bdrs-3 p-20 mB-20">
                     <h4 class="c-grey-900 mB-20">Simple Table</h4>
-                    <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
+                    <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
                     <table class="table">
                       <thead>
                         <tr>
@@ -559,9 +559,9 @@
                 <div class="col-md-12">
                   <div class="bgc-white bd bdrs-3 p-20 mB-20">
                     <h4 class="c-grey-900 mB-20">Table head options</h4>
-                    <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
+                    <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
                     <table class="table">
-                      <thead class="thead-dark">
+                      <thead class="table-dark">
                         <tr>
                           <th scope="col">#</th>
                           <th scope="col">First Name</th>
@@ -717,7 +717,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/blank.html

@@ -176,7 +176,7 @@
                 <span class="title">Forms</span>
               </a>
             </li>
-            <li class="nav-item dropdown">
+            <li class="nav-item">
               <a class="sidebar-link" href="ui.html">
                 <span class="icon-holder">
                     <i class="c-pink-500 ti-palette"></i>
@@ -312,11 +312,11 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="ti-bell"></i>
                 </a>
 
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                   <li class="pX-20 pY-15 bdB">
                     <i class="ti-bell pR-10"></i>
                     <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@@ -385,11 +385,11 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="ti-email"></i>
                 </a>
 
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                   <li class="pX-20 pY-15 bdB">
                     <i class="ti-email pR-10"></i>
                     <span class="fsz-sm fw-600 c-grey-900">Emails</span>
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -480,7 +480,7 @@
                     <span class="fsz-sm c-grey-900">John Doe</span>
                   </div>
                 </a>
-                <ul class="dropdown-menu fsz-sm">
+                <ul class="dropdown-menu fsz-sm" aria-labelledby="dropdownMenuLink">
                   <li>
                     <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                       <i class="ti-settings mR-10"></i>
@@ -524,7 +524,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/buttons.html

@@ -262,7 +262,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -335,7 +335,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -422,8 +422,8 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
-                  <div class="peer mR-10">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
+                  <div class="peer me-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
                   <div class="peer">
@@ -469,7 +469,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/calendar.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -529,7 +529,7 @@
                       </button>
                       <ul class="m-0 p-0 mT-20">
                         <li class="bdB peers ai-c jc-sb fxw-nw">
-                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                          <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                             <div class="peer mR-15">
                               <i class="fa fa-fw fa-clock-o c-red-500"></i>
                             </div>
@@ -555,7 +555,7 @@
                           </div>
                         </li>
                         <li class="bdB peers ai-c jc-sb fxw-nw">
-                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                          <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                             <div class="peer mR-15">
                               <i class="fa fa-fw fa-clock-o c-blue-500"></i>
                             </div>
@@ -581,7 +581,7 @@
                           </div>
                         </li>
                         <li class="bdB peers ai-c jc-sb fxw-nw">
-                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                             <div class="peer mR-15">
                               <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
                             </div>
@@ -607,7 +607,7 @@
                           </div>
                         </li>
                         <li class="bdB peers ai-c jc-sb fxw-nw">
-                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                          <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                             <div class="peer mR-15">
                               <i class="fa fa-fw fa-clock-o c-green-500"></i>
                             </div>
@@ -648,16 +648,16 @@
                     </div>
                     <div class="modal-body">
                       <form>
-                        <div class="form-group">
-                          <label class="fw-500">Event title</label>
+                        <div class="mb-3">
+                          <label class="form-label fw-500">Event title</label>
                           <input class="form-control bdc-grey-200">
                         </div>
                         <div class="row">
                           <div class="col-md-6">
-                            <label class="fw-500">Start</label>
-                            <div class="timepicker-input input-icon form-group">
+                            <label class="fw-500 form-label">Start</label>
+                            <div class="timepicker-input input-icon mb-3">
                               <div class="input-group">
-                                <div class="input-group-addon bgc-white bd bdwR-0">
+                                <div class="input-group-text bgc-white bd bdwR-0">
                                   <i class="ti-calendar"></i>
                                 </div>
                                 <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@@ -665,10 +665,10 @@
                             </div>
                           </div>
                           <div class="col-md-6">
-                            <label class="fw-500">End</label>
-                            <div class="timepicker-input input-icon form-group">
+                            <label class="fw-500 form-label">End</label>
+                            <div class="timepicker-input input-icon mb-3">
                               <div class="input-group">
-                                <div class="input-group-addon bgc-white bd bdwR-0">
+                                <div class="input-group-text bgc-white bd bdwR-0">
                                   <i class="ti-calendar"></i>
                                 </div>
                                 <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
@@ -676,12 +676,12 @@
                             </div>
                           </div>
                         </div>
-                        <div class="form-group">
-                          <label class="fw-500">Event title</label>
+                        <div class="mb-3">
+                          <label class="fw-500 form-label">Event title</label>
                           <textarea class="form-control bdc-grey-200" rows='5'></textarea>
                         </div>
-                        <div class="text-right">
-                          <button class="btn btn-primary cur-p" data-dismiss="modal">Done</button>
+                        <div class="text-end">
+                          <button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
                         </div>
                       </form>
                     </div>
@@ -694,7 +694,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/charts.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -643,7 +643,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/chat.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -717,7 +717,7 @@
                       <div class="p-20 bdT bgc-white">
                         <div class="pos-r">
                           <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
-                          <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                          <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
                             <i class="fa fa-paper-plane-o"></i>
                           </button>
                         </div>
@@ -732,7 +732,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/compose.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -520,7 +520,7 @@
               <div class="email-side-nav remain-height ov-h">
                 <div class="h-100 layers">
                   <div class="p-20 bgc-grey-100 layer w-100">
-                    <a href="/compose" class="btn btn-danger btn-block">New Message</a>
+                    <a href="/compose" class="btn btn-danger d-grid">New Message</a>
                   </div>
                   <div class="scrollable pos-r bdT layer w-100 fxg-1">
                     <ul class="p-20 nav flex-column">
@@ -532,7 +532,7 @@
                               <span>Inbox</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                              <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
                             </div>
                           </div>
                         </a>
@@ -545,7 +545,7 @@
                               <span>Sent</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-green-50 c-green-700">12</span>
+                              <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
                             </div>
                           </div>
                         </a>
@@ -558,7 +558,7 @@
                               <span>Important</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
+                              <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
                             </div>
                           </div>
                         </a>
@@ -571,7 +571,7 @@
                               <span>Drafts</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
+                              <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
                             </div>
                           </div>
                         </a>
@@ -584,7 +584,7 @@
                               <span>Spam</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-red-50 c-red-700">1</span>
+                              <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
                             </div>
                           </div>
                         </a>
@@ -597,7 +597,7 @@
                               <span>Trash</span>
                             </div>
                             <div class="peer">
-                              <span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
+                              <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
                             </div>
                           </div>
                         </a>
@@ -617,22 +617,22 @@
                     <form class="email-compose-body">
                       <h4 class="c-grey-900 mB-20">Send Message</h4>
                       <div class="send-header">
-                        <div class="form-group">
+                        <div class="mb-3">
                           <input type="text" class='form-control' placeholder="To">
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                           <input type="text" class='form-control' placeholder="CC">
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                           <input class="form-control" placeholder="Email Subject">
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                           <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
                         </div>
                       </div>
                       <div id="compose-area"></div>
-                      <div class="text-right mrg-top-30">
-                        <button class="btn btn-danger">Send</button>
+                      <div class="text-end mrg-top-30">
+                        <button class="btn btn-danger btn-color">Send</button>
                       </div>
                     </form>
                   </div>
@@ -645,7 +645,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/datatable.html

@@ -313,7 +313,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -386,7 +386,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -473,7 +473,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -1011,7 +1011,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/email.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -520,7 +520,7 @@
                 <div class="email-side-nav remain-height ov-h">
                   <div class="h-100 layers">
                     <div class="p-20 bgc-grey-100 layer w-100">
-                      <a href="/compose" class="btn btn-danger btn-block">New Message</a>
+                      <a href="/compose" class="btn btn-danger d-grid">New Message</a>
                     </div>
                     <div class="scrollable pos-r bdT layer w-100 fxg-1">
                       <ul class="p-20 nav flex-column">
@@ -532,7 +532,7 @@
                                 <span>Inbox</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                                <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
                               </div>
                             </div>
                           </a>
@@ -545,7 +545,7 @@
                                 <span>Sent</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-green-50 c-green-700">12</span>
+                                <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
                               </div>
                             </div>
                           </a>
@@ -558,7 +558,7 @@
                                 <span>Important</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
+                                <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
                               </div>
                             </div>
                           </a>
@@ -571,7 +571,7 @@
                                 <span>Drafts</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
+                                <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
                               </div>
                             </div>
                           </a>
@@ -584,7 +584,7 @@
                                 <span>Spam</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-red-50 c-red-700">1</span>
+                                <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
                               </div>
                             </div>
                           </a>
@@ -597,7 +597,7 @@
                                 <span>Trash</span>
                               </div>
                               <div class="peer">
-                                <span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
+                                <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
                               </div>
                             </div>
                           </a>
@@ -622,7 +622,7 @@
                             <i class="ti-tag"></i>
                           </button>
                           <div class="btn-group" role="group">
-                            <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               <i class="ti-more-alt"></i>
                             </button>
                             <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@@ -671,7 +671,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -691,7 +691,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -711,7 +711,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -731,7 +731,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -751,7 +751,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -771,7 +771,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -791,7 +791,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -811,7 +811,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -831,7 +831,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -851,7 +851,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -871,7 +871,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -891,7 +891,7 @@
                         <div class="peer mR-10">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
                           </div>
                         </div>
                         <div class="peer peer-greed ov-h">
@@ -925,7 +925,7 @@
                             <i class="ti-tag"></i>
                           </button>
                           <div class="btn-group" role="group">
-                            <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               <i class="ti-more-alt"></i>
                             </button>
                             <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@@ -1014,7 +1014,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/forms.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -522,22 +522,22 @@
                   <h6 class="c-grey-900">Basic Form</h6>
                   <div class="mT-30">
                     <form>
-                      <div class="form-group">
-                        <label for="exampleInputEmail1">Email address</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="exampleInputEmail1">Email address</label>
                         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+                        <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
                       </div>
-                      <div class="form-group">
-                        <label for="exampleInputPassword1">Password</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="exampleInputPassword1">Password</label>
                         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                       </div>
                       <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
                         <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                        <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
                           <span class="peer peer-greed">Call John for Dinner</span>
                         </label>
                       </div>
-                      <button type="submit" class="btn btn-primary">Submit</button>
+                      <button type="submit" class="btn btn-primary btn-color">Submit</button>
                     </form>
                   </div>
                 </div>
@@ -547,47 +547,47 @@
                   <h6 class="c-grey-900">Complex Form Layout</h6>
                   <div class="mT-30">
                     <form>
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label for="inputEmail4">Email</label>
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label class="form-label" for="inputEmail4">Email</label>
                           <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                         </div>
-                        <div class="form-group col-md-6">
-                          <label for="inputPassword4">Password</label>
+                        <div class="mb-3 col-md-6">
+                          <label class="form-label" for="inputPassword4">Password</label>
                           <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                         </div>
                       </div>
-                      <div class="form-group">
-                        <label for="inputAddress">Address</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="inputAddress">Address</label>
                         <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                       </div>
-                      <div class="form-group">
-                        <label for="inputAddress2">Address 2</label>
+                      <div class="mb-3">
+                        <label class="form-label" for="inputAddress2">Address 2</label>
                         <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                       </div>
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label for="inputCity">City</label>
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label class="form-label" for="inputCity">City</label>
                           <input type="text" class="form-control" id="inputCity">
                         </div>
-                        <div class="form-group col-md-4">
-                          <label for="inputState">State</label>
+                        <div class="mb-3 col-md-4">
+                          <label class="form-label" for="inputState">State</label>
                           <select id="inputState" class="form-control">
                             <option selected>Choose...</option>
                             <option>...</option>
                           </select>
                         </div>
-                        <div class="form-group col-md-2">
-                          <label for="inputZip">Zip</label>
+                        <div class="mb-3 col-md-2">
+                          <label class="form-label" for="inputZip">Zip</label>
                           <input type="text" class="form-control" id="inputZip">
                         </div>
                       </div>
-                      <div class="form-row">
-                        <div class="form-group col-md-6">
-                          <label class="fw-500">Birthdate</label>
-                          <div class="timepicker-input input-icon form-group">
+                      <div class="row">
+                        <div class="mb-3 col-md-6">
+                          <label class="form-label fw-500">Birthdate</label>
+                          <div class="timepicker-input input-icon mb-3">
                             <div class="input-group">
-                              <div class="input-group-addon bgc-white bd bdwR-0">
+                              <div class="input-group-text bgc-white bd bdwR-0">
                                 <i class="ti-calendar"></i>
                               </div>
                               <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@@ -595,15 +595,15 @@
                           </div>
                         </div>
                       </div>
-                      <div class="form-group">
+                      <div class="mb-3">
                         <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                           <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
-                          <label for="inputCall2" class=" peers peer-greed js-sb ai-c">
+                          <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
                             <span class="peer peer-greed">Call John for Dinner</span>
                           </label>
                         </div>
                       </div>
-                      <button type="submit" class="btn btn-primary">Sign in</button>
+                      <button type="submit" class="btn btn-primary btn-color">Sign in</button>
                     </form>
                   </div>
                 </div>
@@ -613,36 +613,36 @@
                   <h6 class="c-grey-900">Horizontal Form</h6>
                   <div class="mT-30">
                     <form>
-                      <div class="form-group row">
-                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
+                      <div class="mb-3 row">
+                        <label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
                         <div class="col-sm-10">
                           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                         </div>
                       </div>
-                      <div class="form-group row">
-                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
+                      <div class="mb-3 row">
+                        <label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
                         <div class="col-sm-10">
                           <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                         </div>
                       </div>
-                      <fieldset class="form-group">
+                      <fieldset class="mb-3">
                         <div class="row">
                           <legend class="col-form-legend col-sm-2">Radios</legend>
                           <div class="col-sm-10">
                             <div class="form-check">
-                              <label class="form-check-label">
+                              <label class="form-label form-check-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                 Option one is this and that&mdash;be sure to include why it's great
                               </label>
                             </div>
                             <div class="form-check">
-                              <label class="form-check-label">
+                              <label class="form-label form-check-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                 Option two can be something else and selecting it will deselect option one
                               </label>
                             </div>
                             <div class="form-check disabled">
-                              <label class="form-check-label">
+                              <label class="form-label form-check-label">
                                 <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                 Option three is disabled
                               </label>
@@ -650,19 +650,19 @@
                           </div>
                         </div>
                       </fieldset>
-                      <div class="form-group row">
+                      <div class="mb-3 row">
                         <div class="col-sm-2">Checkbox</div>
                         <div class="col-sm-10">
                           <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-label form-check-label">
                               <input class="form-check-input" type="checkbox"> Check me out
                             </label>
                           </div>
                         </div>
                       </div>
-                      <div class="form-group row">
+                      <div class="mb-3 row">
                         <div class="col-sm-10">
-                          <button type="submit" class="btn btn-primary">Sign in</button>
+                          <button type="submit" class="btn btn-primary btn-color">Sign in</button>
                         </div>
                       </div>
                     </form>
@@ -675,22 +675,22 @@
                   <div class="mT-30">
                     <form>
                       <fieldset disabled>
-                        <div class="form-group">
-                          <label for="disabledTextInput">Disabled input</label>
+                        <div class="mb-3">
+                          <label class="form-label" for="disabledTextInput">Disabled input</label>
                           <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                         </div>
-                        <div class="form-group">
-                          <label for="disabledSelect">Disabled select menu</label>
+                        <div class="mb-3">
+                          <label class="form-label" for="disabledSelect">Disabled select menu</label>
                           <select id="disabledSelect" class="form-control">
                             <option>Disabled select</option>
                           </select>
                         </div>
                         <div class="form-check">
-                          <label class="form-check-label">
+                          <label class="form-label" class="form-check-label">
                             <input class="form-check-input" type="checkbox"> Can't check this
                           </label>
                         </div>
-                        <button type="submit" class="btn btn-primary">Submit</button>
+                        <button type="submit" class="btn btn-primary btn-color">Submit</button>
                       </fieldset>
                     </form>
                   </div>
@@ -703,38 +703,38 @@
                     <form class="container" id="needs-validation" novalidate>
                       <div class="row">
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom01">First name</label>
+                          <label class="form-label" for="validationCustom01">First name</label>
                           <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
                         </div>
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom02">Last name</label>
+                          <label class="form-label" for="validationCustom02">Last name</label>
                           <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
                         </div>
                       </div>
                       <div class="row">
                         <div class="col-md-6 mb-3">
-                          <label for="validationCustom03">City</label>
+                          <label class="form-label" for="validationCustom03">City</label>
                           <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                           <div class="invalid-feedback">
                             Please provide a valid city.
                           </div>
                         </div>
                         <div class="col-md-3 mb-3">
-                          <label for="validationCustom04">State</label>
+                          <label class="form-label" for="validationCustom04">State</label>
                           <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                           <div class="invalid-feedback">
                             Please provide a valid state.
                           </div>
                         </div>
                         <div class="col-md-3 mb-3">
-                          <label for="validationCustom05">Zip</label>
+                          <label class="form-label" for="validationCustom05">Zip</label>
                           <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                           <div class="invalid-feedback">
                             Please provide a valid zip.
                           </div>
                         </div>
                       </div>
-                      <button class="btn btn-primary" type="submit">Submit form</button>
+                      <button class="btn btn-primary btn-color" type="submit">Submit form</button>
                     </form>
                     <script>
                       // Example starter JavaScript for disabling form submissions if there are invalid fields
@@ -762,7 +762,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/google-maps.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -532,7 +532,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/index.html

@@ -311,11 +311,11 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="ti-bell"></i>
                 </a>
 
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> 
                   <li class="pX-20 pY-15 bdB">
                     <i class="ti-bell pR-10"></i>
                     <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@@ -384,7 +384,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -471,7 +471,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -619,7 +619,7 @@
                               <small class="fw-600 c-grey-700">Visitors From USA</small>
                               <span class="pull-right c-grey-600 fsz-sm">50%</span>
                               <div class="progress mT-10">
-                                <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
+                                <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
                               </div>
                             </div>
                             <div class="layer w-100 mT-15">
@@ -627,7 +627,7 @@
                               <small class="fw-600 c-grey-700">Visitors From Europe</small>
                               <span class="pull-right c-grey-600 fsz-sm">80%</span>
                               <div class="progress mT-10">
-                                <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
+                                <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
                               </div>
                             </div>
                             <div class="layer w-100 mT-15">
@@ -635,7 +635,7 @@
                               <small class="fw-600 c-grey-700">Visitors From Australia</small>
                               <span class="pull-right c-grey-600 fsz-sm">40%</span>
                               <div class="progress mT-10">
-                                <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
+                                <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
                               </div>
                             </div>
                             <div class="layer w-100 mT-15">
@@ -643,7 +643,7 @@
                               <small class="fw-600 c-grey-700">Visitors From India</small>
                               <span class="pull-right c-grey-600 fsz-sm">90%</span>
                               <div class="progress mT-10">
-                                <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
+                                <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
                               </div>
                             </div>
                           </div>
@@ -720,7 +720,7 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Call John for Dinner</span>
                             </label>
                           </div>
@@ -728,10 +728,10 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall2" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Book Boss Flight</span>
                               <span class="peer">
-                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
+                                <span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
                               </span>
                             </label>
                           </div>
@@ -739,10 +739,10 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall3" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Hit the Gym</span>
                               <span class="peer">
-                                <span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
+                                <span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
                               </span>
                             </label>
                           </div>
@@ -750,10 +750,10 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall4" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Give Purchase Report</span>
                               <span class="peer">
-                                <span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
+                                <span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
                               </span>
                             </label>
                           </div>
@@ -761,10 +761,10 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall5" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Watch Game of Thrones Episode</span>
                               <span class="peer">
-                                <span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
+                                <span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
                               </span>
                             </label>
                           </div>
@@ -772,10 +772,10 @@
                         <li class="list-group-item bdw-0" data-role="task">
                           <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                             <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
-                            <label for="inputCall6" class=" peers peer-greed js-sb ai-c">
+                            <label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
                               <span class="peer peer-greed">Give Purchase report</span>
                               <span class="peer">
-                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
+                                <span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
                               </span>
                             </label>
                           </div>
@@ -800,7 +800,7 @@
                             <p class="mB-0">Sales Report</p>
                           </div>
                           <div class="peer">
-                            <h3 class="text-right">$6,000</h3>
+                            <h3 class="text-end">$6,000</h3>
                           </div>
                         </div>
                       </div>
@@ -817,43 +817,43 @@
                           <tbody>
                             <tr>
                               <td class="fw-600">Item #1 Name</td>
-                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
                               <td>Nov 18</td>
                               <td><span class="text-success">$12</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #2 Name</td>
-                              <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
                               <td>Nov 19</td>
                               <td><span class="text-info">$34</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #3 Name</td>
-                              <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
                               <td>Nov 20</td>
                               <td><span class="text-danger">-$45</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #4 Name</td>
-                              <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
+                              <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
                               <td>Nov 21</td>
                               <td><span class="text-success">$65</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #5 Name</td>
-                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
                               <td>Nov 22</td>
                               <td><span class="text-success">$78</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #6 Name</td>
-                              <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
+                              <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
                               <td>Nov 23</td>
                               <td><span class="text-danger">-$88</span></td>
                             </tr>
                             <tr>
                               <td class="fw-600">Item #7 Name</td>
-                              <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
+                              <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
                               <td>Nov 22</td>
                               <td><span class="text-success">$56</span></td>
                             </tr>
@@ -1092,7 +1092,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/signin.html

@@ -77,26 +77,26 @@
       <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
         <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
         <form>
-          <div class="form-group">
-            <label class="text-normal text-dark">Username</label>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Username</label>
             <input type="email" class="form-control" placeholder="John Doe">
           </div>
-          <div class="form-group">
-            <label class="text-normal text-dark">Password</label>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Password</label>
             <input type="password" class="form-control" placeholder="Password">
           </div>
-          <div class="form-group">
+          <div class="">
             <div class="peers ai-c jc-sb fxw-nw">
               <div class="peer">
                 <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                   <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                  <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
+                  <label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
                     <span class="peer peer-greed">Remember Me</span>
                   </label>
                 </div>
               </div>
               <div class="peer">
-                <button class="btn btn-primary">Login</button>
+                <button class="btn btn-primary btn-color">Login</button>
               </div>
             </div>
           </div>

src/signup.html

@@ -77,24 +77,24 @@
       <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
         <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
         <form>
-          <div class="form-group">
-            <label class="text-normal text-dark">Username</label>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Username</label>
             <input type="text" class="form-control" Placeholder='John Doe'>
           </div>
-          <div class="form-group">
-            <label class="text-normal text-dark">Email Address</label>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Email Address</label>
             <input type="email" class="form-control" Placeholder='name@email.com'>
           </div>
-          <div class="form-group">
-            <label class="text-normal text-dark">Password</label>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password</label>
             <input type="password" class="form-control" placeholder="Password">
           </div>
-          <div class="form-group">
-            <label class="text-normal text-dark">Confirm Password</label>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Confirm Password</label>
             <input type="password" class="form-control" placeholder="Password">
           </div>
-          <div class="form-group">
-            <button class="btn btn-primary">Register</button>
+          <div class="mb-3">
+            <button class="btn btn-primary btn-color">Register</button>
           </div>
         </form>
       </div>

src/test.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Test</title>
+  <style>
+    #loader {
+      transition: all 0.3s ease-in-out;
+      opacity: 1;
+      visibility: visible;
+      position: fixed;
+      height: 100vh;
+      width: 100%;
+      background: #fff;
+      z-index: 90000;
+    }
+
+    #loader.fadeOut {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+
+
+    .spinner {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: calc(50% - 20px);
+      left: calc(50% - 20px);
+      background-color: #333;
+      border-radius: 100%;
+      -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+      animation: sk-scaleout 1.0s infinite ease-in-out;
+    }
+
+    @-webkit-keyframes sk-scaleout {
+      0% { -webkit-transform: scale(0) }
+      100% {
+        -webkit-transform: scale(1.0);
+        opacity: 0;
+      }
+    }
+
+    @keyframes sk-scaleout {
+      0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+      } 100% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body class="app">
+  <div id='loader'>
+    <div class="spinner"></div>
+  </div>
+
+  <script>
+    window.addEventListener('load', function load() {
+      const loader = document.getElementById('loader');
+      setTimeout(function() {
+          loader.classList.add('fadeOut');
+      }, 300);
+    });
+  </script>
+  <div class="page-container">
+    <!-- <div class="header navbar">
+      <div class="header-container">
+        
+      </div>
+      
+    </div> -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+            Tooltip on top
+          </button>
+          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+            Tooltip on top
+          </button>
+
+        </div>
+      </div>
+    </main>
+    <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+      <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+    </footer>
+  </div>
+</body>
+</html>

src/ui.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -555,28 +555,28 @@
                   <div class="mT-30">
                     <div class="gap-10 peers">
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-primary">Primary</button>
+                        <button type="button" class="btn cur-p btn-primary btn-color">Primary</button>
                       </div>
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-secondary">Secondary</button>
+                        <button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
                       </div>
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-success">Success</button>
+                        <button type="button" class="btn cur-p btn-success btn-color">Success</button>
                       </div>
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-danger">Danger</button>
+                        <button type="button" class="btn cur-p btn-danger btn-color">Danger</button>
                       </div>
                       <div class="peer">
                         <button type="button" class="btn cur-p btn-warning">Warning</button>
                       </div>
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-info">Info</button>
+                        <button type="button" class="btn cur-p btn-info btn-color">Info</button>
                       </div>
                       <div class="peer">
                         <button type="button" class="btn cur-p btn-light">Light</button>
                       </div>
                       <div class="peer">
-                        <button type="button" class="btn cur-p btn-dark">Dark</button>
+                        <button type="button" class="btn cur-p btn-dark btn-color">Dark</button>
                       </div>
                     </div>
 
@@ -608,19 +608,19 @@
                     </div>
 
                     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
-                      <div class="btn-group mr-2" role="group" aria-label="First group">
-                        <button type="button" class="btn btn-success">1</button>
-                        <button type="button" class="btn btn-success">2</button>
-                        <button type="button" class="btn btn-success">3</button>
-                        <button type="button" class="btn btn-success">4</button>
+                      <div class="btn-group me-2" role="group" aria-label="First group">
+                        <button type="button" class="btn btn-success btn-color">1</button>
+                        <button type="button" class="btn btn-success btn-color">2</button>
+                        <button type="button" class="btn btn-success btn-color">3</button>
+                        <button type="button" class="btn btn-success btn-color">4</button>
                       </div>
-                      <div class="btn-group mr-2" role="group" aria-label="Second group">
-                        <button type="button" class="btn btn-success">5</button>
-                        <button type="button" class="btn btn-success">6</button>
-                        <button type="button" class="btn btn-success">7</button>
+                      <div class="btn-group me-2" role="group" aria-label="Second group">
+                        <button type="button" class="btn btn-success btn-color">5</button>
+                        <button type="button" class="btn btn-success btn-color">6</button>
+                        <button type="button" class="btn btn-success btn-color">7</button>
                       </div>
                       <div class="btn-group" role="group" aria-label="Third group">
-                        <button type="button" class="btn btn-success">8</button>
+                        <button type="button" class="btn btn-success btn-color">8</button>
                       </div>
                     </div>
                   </div>
@@ -631,7 +631,7 @@
                   <h6 class="c-grey-900">Dropdowns</h6>
                   <div class="mT-30">
                     <div class="dropdown">
-                      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Dropdown button
                       </button>
                       <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@@ -643,8 +643,8 @@
 
                     <!-- Example split danger button -->
                     <div class="btn-group mT-20">
-                      <button type="button" class="btn btn-danger">Action</button>
-                      <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <button type="button" class="btn btn-danger btn-color">Action</button>
+                      <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <span class="sr-only">Toggle Dropdown</span>
                       </button>
                       <div class="dropdown-menu">
@@ -663,13 +663,13 @@
                   <h6 class="c-grey-900">List Group</h6>
                   <div class="mT-30">
                     <div class="list-group">
-                      <a href="#" class="list-group-item list-group-item-action actived">
-                        Cras justo odio
+                      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
+                        The current link item
                       </a>
-                      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-                      <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
-                      <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
-                      <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
+                      <a href="#" class="list-group-item list-group-item-action">A second link item</a>
+                      <a href="#" class="list-group-item list-group-item-action">A third link item</a>
+                      <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+                      <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
                     </div>
                   </div>
                 </div>
@@ -678,39 +678,37 @@
                 <div class="bgc-white p-20 bd">
                   <h6 class="c-grey-900">Modal</h6>
                   <div class="mT-30">
-                    <!-- Button trigger modal -->
-                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-                      Launch demo modal
-                    </button>
+                  <!-- Button trigger modal -->
+                  <button type="button" class="btn btn-primary btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                    Launch demo modal
+                  </button>
 
-                    <!-- Modal -->
-                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-                      <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                          <div class="modal-header">
-                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                              <span aria-hidden="true">&times;</span>
-                            </button>
-                          </div>
-                          <div class="modal-body">
-                            ...
-                          </div>
-                          <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                            <button type="button" class="btn btn-primary">Save changes</button>
-                          </div>
+                  <!-- Modal -->
+                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                          ...
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                          <button type="button" class="btn btn-primary">Save changes</button>
                         </div>
                       </div>
                     </div>
                   </div>
+                  </div>
                 </div>
               </div>
               <div class="masonry-item col-md-6">
                 <div class="bgc-white p-20 bd">
                   <h6 class="c-grey-900">Popover</h6>
                   <div class="mT-30">
-                    <button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+                    <button type="button" class="btn btn-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
                   </div>
                 </div>
               </div>
@@ -760,16 +758,16 @@
                 <div class="bgc-white p-20 bd">
                   <h6 class="c-grey-900">Tootips</h6>
                   <div class="mT-30">
-                    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+                    <button type="button" class="btn btn-primary btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
                       Tooltip on top
                     </button>
-                    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+                    <button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
                       Tooltip on right
                     </button>
-                    <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+                    <button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
                       Tooltip on bottom
                     </button>
-                    <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+                    <button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
                       Tooltip on left
                     </button>
                   </div>
@@ -781,7 +779,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/vector-maps.html

@@ -312,7 +312,7 @@
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -472,7 +472,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -531,7 +531,7 @@
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

webpack/plugins/htmlPlugin.js

@@ -22,6 +22,7 @@ const titles = {
   '404': '404',
   '500': '500',
   'basic-table': 'Basic Table',
+  'test': 'Test',
 };
 
 module.exports = Object.keys(titles).map(title => {

webpack/plugins/internal.js

@@ -48,7 +48,7 @@ plugins.push(
     $: 'jquery',
     jQuery: 'jquery',
     'window.jQuery': 'jquery',
-    Popper: ['popper.js', 'default'],
+    // Popper: ['popper.js', 'default'],
   })
 );