From b3e6540052a55eccb26ea24d0d4f0604ac1473ba Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 20 Sep 2019 13:59:53 +0200
Subject: [PATCH] refactor: delete 'c-' class prefix, update coreui styles to
 alpha-v13

---
 package.json                                  |   2 +-
 src/containers/DefaultHeaderDropdownAccnt.vue |   8 +-
 src/containers/TheFooter.vue                  |   6 +-
 src/containers/TheHeader.vue                  |  28 +-
 src/containers/TheSidebar.vue                 |   2 +-
 src/router/index.js                           |   2 +-
 src/views/Charts.vue                          |   4 +-
 src/views/Dashboard.vue                       | 282 ++++++------
 src/views/base/Breadcrumbs.vue                |  12 +-
 src/views/base/Cards.vue                      |  64 +--
 src/views/base/Carousels.vue                  |   4 +-
 src/views/base/Collapses.vue                  |  10 +-
 src/views/base/Forms.vue                      |  84 ++--
 src/views/base/Jumbotrons.vue                 |  12 +-
 src/views/base/ListGroups.vue                 |  44 +-
 src/views/base/Navbars.vue                    |  22 +-
 src/views/base/Navs.vue                       |   8 +-
 src/views/base/Paginations.vue                |   4 +-
 src/views/base/Popovers.vue                   |  14 +-
 src/views/base/ProgressBars.vue               |  62 +--
 src/views/base/Switches.vue                   | 432 +++++++++---------
 src/views/base/Tables.vue                     |  21 +-
 src/views/base/Tabs.vue                       |   4 +-
 src/views/base/Tooltips.vue                   |  14 +-
 src/views/buttons/BrandButtons.vue            |   8 +-
 src/views/buttons/ButtonGroups.vue            |  46 +-
 src/views/buttons/Dropdowns.vue               |  50 +-
 src/views/buttons/StandardButtons.vue         | 398 ++++++++--------
 src/views/icons/Brands.vue                    |   4 +-
 src/views/icons/CoreUIIcons.vue               | 212 ++++-----
 src/views/icons/Flags.vue                     |   6 +-
 src/views/notifications/Alerts.vue            |  34 +-
 src/views/notifications/Badges.vue            |   4 +-
 src/views/notifications/Modals.vue            |  26 +-
 src/views/pages/Login.vue                     |  18 +-
 src/views/pages/Page404.vue                   |  16 +-
 src/views/pages/Page500.vue                   |  14 +-
 src/views/pages/Register.vue                  |  14 +-
 src/views/theme/ColorTheme.vue                |   6 +-
 src/views/theme/ColorView.vue                 |  10 +-
 src/views/theme/Colors.vue                    |  54 +--
 src/views/theme/Typography.vue                | 118 ++---
 src/views/users/Users.vue                     |   2 +-
 src/views/widgets/Widgets.vue                 |  28 +-
 src/views/widgets/WidgetsBrand.vue            |  24 +-
 src/views/widgets/WidgetsDropdown.vue         |  20 +-
 46 files changed, 1125 insertions(+), 1132 deletions(-)

diff --git a/package.json b/package.json
index 41bee4f4..7f2f561c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "next",
+    "@coreui/coreui": "3.0.0-alpha.13",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs",
     "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index 8de189c5..aa4aa547 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -3,16 +3,16 @@
     nav
     no-caret
     no-popper
-    add-menu-classes="c-dropdown-menu-right"
+    add-menu-classes="dropdown-menu-right"
   >
     <template #toggler-content>
       <img
         src="img/avatars/6.jpg"
-        class="c-img-avatar"
+        class="img-avatar"
         alt="admin@bootstrapmaster.com"
       />
     </template>
-    <CDropdownHeader tag="div" class="c-text-center">
+    <CDropdownHeader tag="div" class="text-center">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
@@ -33,7 +33,7 @@
     </CDropdownItem>
     <CDropdownHeader
      tag="div"
-      class="c-text-center"
+      class="text-center"
     >
       <strong>Settings</strong>
     </CDropdownHeader>
diff --git a/src/containers/TheFooter.vue b/src/containers/TheFooter.vue
index 3e269e35..d4740374 100644
--- a/src/containers/TheFooter.vue
+++ b/src/containers/TheFooter.vue
@@ -2,10 +2,10 @@
   <CFooter>
     <div>
       <a href="https://coreui.io">CoreUI</a>
-      <span class="c-ml-1">&copy; 2018 creativeLabs.</span>
+      <span class="ml-1">&copy; 2018 creativeLabs.</span>
     </div>
-    <div class="c-ml-auto">
-      <span class="c-mr-1">Powered by</span>
+    <div class="ml-auto">
+      <span class="mr-1">Powered by</span>
       <a href="https://coreui.io">CoreUI for Vue</a>
     </div>
   </CFooter>
diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
index 6146f30e..a68b05bf 100644
--- a/src/containers/TheHeader.vue
+++ b/src/containers/TheHeader.vue
@@ -1,13 +1,13 @@
 <template>
   <CHeader fixed>
     <CSidebarToggler 
-      class="c-header-toggler c-d-lg-none c-mr-auto"
+      class="c-header-toggler d-lg-none mr-auto"
       v-c-emit-root-event:c-sidebar-toggle
     />
     <CLink :class="logoClasses" to="/">
       <img
         v-show="sidebarIsMinimized"
-        class="c-navbar-brand-minimized c-d-md-down-none" 
+        class="navbar-brand-minimized d-md-down-none" 
         src="img/brand/sygnet.svg" 
         width="30" 
         height="30" 
@@ -15,14 +15,14 @@
       >
       <img
         v-show="!sidebarIsMinimized"
-        class="c-navbar-brand-full c-d-md-down-none" 
+        class="navbar-brand-full d-md-down-none" 
         src="img/brand/logo.svg" 
         width="89" 
         height="25" 
         alt="CoreUI Logo"
       >
       <img
-        class="c-navbar-brand-full c-d-lg-none" 
+        class="navbar-brand-full d-lg-none" 
         src="img/brand/logo.svg" 
         width="89" 
         height="25" 
@@ -30,20 +30,20 @@
       >
     </CLink>
     <CSidebarToggler 
-      class="c-header-toggler c-d-md-down-none" 
+      class="c-header-toggler d-md-down-none" 
       v-c-emit-root-event:c-sidebar-toggle
     />
-    <ul class="c-header-nav c-d-md-down-none">
-      <CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem>
-      <CNavItem class="c-px-3" to="/users" exact>Users</CNavItem>
-      <CNavItem class="c-px-3">Settings</CNavItem>
+    <ul class="c-header-nav d-md-down-none">
+      <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
+      <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
+      <CNavItem class="px-3">Settings</CNavItem>
     </ul>
-    <CNav class="c-header-nav c-ml-auto">
-      <CNavItem class="c-d-md-down-none">
+    <CNav class="c-header-nav ml-auto">
+      <CNavItem class="d-md-down-none">
         <i class="cui-bell"></i>
         <CBadge pill variant="danger">5</CBadge>
       </CNavItem>
-      <CNavItem class="c-d-md-down-none">
+      <CNavItem class="d-md-down-none">
         <i class="cui-list"></i>
       </CNavItem>
       <CNavItem class="d-md-down-none">
@@ -51,10 +51,6 @@
       </CNavItem>
       <DefaultHeaderDropdownAccnt/>
     </CNav>
-    <!-- <CSidebarToggler
-      class="c-header-toggler c-d-md-down-none"
-      aside
-    /> -->
   </CHeader>
 </template>
 
diff --git a/src/containers/TheSidebar.vue b/src/containers/TheSidebar.vue
index 390e3bd3..efe526ea 100644
--- a/src/containers/TheSidebar.vue
+++ b/src/containers/TheSidebar.vue
@@ -8,7 +8,7 @@
     <CRenderFunction :contentToRender="nav"/>
     <!-- <CSidebarFooter/> -->
     <CSidebarMinimizer 
-      class="c-d-md-down-none" 
+      class="d-md-down-none" 
       @click.native="minimize = !minimize"
     />
   </CSidebar>
diff --git a/src/router/index.js b/src/router/index.js
index 48e2090c..bdf5b505 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -61,7 +61,7 @@ Vue.use(Router)
 
 export default new Router({
   mode: 'hash', // https://router.vuejs.org/api/#mode
-  linkActiveClass: 'c-active',
+  linkActiveClass: 'active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index 10471d6c..8a5ae845 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <CCardGroup columns class="c-card-columns c-cols-2">
+    <CCardGroup columns class="card-columns cols-2">
       <CCard>
         <CCardHeader>
           Line Chart
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Charts" 
               class="card-header-action" 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 194a49cd..528aa3f7 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -5,19 +5,19 @@
       <CCardBody>
         <CRow>
           <CCol sm="5">
-            <h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
-            <div class="c-small c-text-muted">November 2017</div>
+            <h4 id="traffic" class="card-title mb-0">Traffic</h4>
+            <div class="small text-muted">November 2017</div>
           </CCol>
-          <CCol sm="7" class="c-d-none c-d-md-block">
-            <CButton variant="primary" class="c-float-right">
+          <CCol sm="7" class="d-none d-md-block">
+            <CButton variant="primary" class="float-right">
               <i class="cui-cloud-download"></i>
             </CButton>
-            <CButtonGroup class="c-float-right c-mr-3">
+            <CButtonGroup class="float-right mr-3">
               <CButton
                 variant="outline-secondary"
                 v-for="(value, key) in ['Day', 'Month', 'Year']"
                 :key="key"
-                class="c-mx-0"
+                class="mx-0"
                 :pressed="value === selected ? true : false"
                 @click="selected = value"
               >
@@ -29,52 +29,52 @@
         <MainChartExample style="height:300px;margin-top:40px;"/>
       </CCardBody>
       <CCardFooter>
-        <CRow class="c-text-center">
-          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="c-text-muted">Visits</div>
+        <CRow class="text-center">
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">Visits</div>
             <strong>29.703 Users (40%)</strong>
             <CProgress
-              class="c-progress-xs c-mt-2"
+              class="progress-xs mt-2"
               :precision="1"
               variant="success"
               :value="40"
             />
           </CCol>
-          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
-            <div class="c-text-muted">Unique</div>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
+            <div class="text-muted">Unique</div>
             <strong>24.093 Users (20%)</strong>
             <CProgress
-              class="c-progress-xs c-mt-2"
+              class="progress-xs mt-2"
               :precision="1"
               variant="info"
               :value="20"
             />
           </CCol>
-          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="c-text-muted">Pageviews</div>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">Pageviews</div>
             <strong>78.706 Views (60%)</strong>
             <CProgress
-              class="c-progress-xs c-mt-2"
+              class="progress-xs mt-2"
               :precision="1"
               variant="warning"
               :value="60"
             />
           </CCol>
-          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="c-text-muted">New Users</div>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">New Users</div>
             <strong>22.123 Users (80%)</strong>
             <CProgress
-              class="c-progress-xs c-mt-2"
+              class="progress-xs mt-2"
               :precision="1"
               variant="danger"
               :value="80"
             />
           </CCol>
-          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
-            <div class="c-text-muted">Bounce Rate</div>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
+            <div class="text-muted">Bounce Rate</div>
             <strong>Average Rate (40.15%)</strong>
             <CProgress
-              class="c-progress-xs c-mt-2"
+              class="progress-xs mt-2"
               :precision="1"
               :value="40"
             />
@@ -91,152 +91,152 @@
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="info">
-                    <small class="c-text-muted">New Clients</small><br>
-                    <strong class="c-h4">9,123</strong>
+                    <small class="text-muted">New Clients</small><br>
+                    <strong class="h4">9,123</strong>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="danger">
-                    <small class="c-text-muted">Recurring Clients</small><br>
-                    <strong class="c-h4">22,643</strong>
+                    <small class="text-muted">Recurring Clients</small><br>
+                    <strong class="h4">22,643</strong>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="c-mt-0">
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <hr class="mt-0">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Monday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     variant="info"
                     :value="34"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     variant="danger"
                     :value="78"
                   />
                 </div>
               </div>
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Tuesday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="56"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="94"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Wednesday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="12"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="67"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Thursday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="43"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="91"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-progress-group mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Friday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="22"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="73"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Saturday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="53"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="82"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-progress-group c-mb-4">
-                <div class="c-progress-group-prepend">
-                  <span class="c-progress-group-text">
+              <div class="progress-group mb-4">
+                <div class="progress-group-prepend">
+                  <span class="progress-group-text">
                     Sunday
                   </span>
                 </div>
-                <div class="c-progress-group-bars">
+                <div class="progress-group-bars">
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="9"
                     variant="info"
                   />
                   <CProgress
-                    class="c-progress-xs"
+                    class="progress-xs"
                     :value="69"
                     variant="danger"
                   />
                 </div>
               </div>
-              <div class="c-legend c-text-center">
+              <div class="legend text-center">
                 <small>
                   <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
                   New clients
@@ -250,125 +250,125 @@
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="warning">
-                    <small class="c-text-muted">Pageviews</small><br>
-                    <strong class="c-h4">78,623</strong>
+                    <small class="text-muted">Pageviews</small><br>
+                    <strong class="h4">78,623</strong>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="success">
-                    <small class="c-text-muted">Organic</small><br>
-                    <strong class="c-h4">49,123</strong>
+                    <small class="text-muted">Organic</small><br>
+                    <strong class="h4">49,123</strong>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="c-mt-0">
-              <ul class="c-horizontal-bars c-type-2">
-                <div class="c-progress-group">
-                  <div class="c-progress-group-header">
-                    <i class="cui-user c-progress-group-icon"></i>
-                    <span class="c-title">Male</span>
-                    <span class="c-ml-auto c-font-weight-bold">43%</span>
+              <hr class="mt-0">
+              <ul class="horizontal-bars type-2">
+                <div class="progress-group">
+                  <div class="progress-group-header">
+                    <i class="cui-user progress-group-icon"></i>
+                    <span class="title">Male</span>
+                    <span class="ml-auto font-weight-bold">43%</span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="43"
                       variant="warning"
                     />
                   </div>
                 </div>
-                <div class="c-progress-group c-mb-5">
-                  <div class="c-progress-group-header">
-                    <i class="cui-user-female c-progress-group-icon"></i>
-                    <span class="c-title">Female</span>
-                    <span class="c-ml-auto c-font-weight-bold">37%</span>
+                <div class="progress-group mb-5">
+                  <div class="progress-group-header">
+                    <i class="cui-user-female progress-group-icon"></i>
+                    <span class="title">Female</span>
+                    <span class="ml-auto font-weight-bold">37%</span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="37"
                       variant="warning"
                     />
                   </div>
                 </div>
-                <div class="c-progress-group">
-                  <div class="c-progress-group-header">
-                    <i class="cui-globe c-progress-group-icon"></i>
-                    <span class="c-title">Organic Search</span>
-                    <span class="c-ml-auto c-font-weight-bold">
+                <div class="progress-group">
+                  <div class="progress-group-header">
+                    <i class="cui-globe progress-group-icon"></i>
+                    <span class="title">Organic Search</span>
+                    <span class="ml-auto font-weight-bold">
                       191,235<span class="text-muted small">(56%)</span>
                     </span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="56"
                       variant="success"
                     />
                   </div>
                 </div>
-                <div class="c-progress-group">
-                  <div class="c-progress-group-header">
+                <div class="progress-group">
+                  <div class="progress-group-header">
                     <CIcon
                       name="socialFacebook"
                       height="17"
-                      class="c-progress-group-icon"
+                      class="progress-group-icon"
                     />
-                    <span class="c-title">Facebook</span>
-                    <span class="c-ml-auto c-font-weight-bold">
-                      51,223 <span class="c-text-muted small">(15%)</span>
+                    <span class="title">Facebook</span>
+                    <span class="ml-auto font-weight-bold">
+                      51,223 <span class="text-muted small">(15%)</span>
                     </span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="15"
                       variant="success"
                     />
                   </div>
                 </div>
-                <div class="c-progress-group">
-                  <div class="c-progress-group-header">
+                <div class="progress-group">
+                  <div class="progress-group-header">
                     <CIcon
                       name="socialTwitter"
                       height="17"
-                      class="c-progress-group-icon"
+                      class="progress-group-icon"
                     />
-                    <span class="c-title">Twitter</span>
-                    <span class="c-ml-auto c-font-weight-bold">
-                      37,564 <span class="c-text-muted c-small">(11%)</span>
+                    <span class="title">Twitter</span>
+                    <span class="ml-auto font-weight-bold">
+                      37,564 <span class="text-muted small">(11%)</span>
                     </span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="11"
                       variant="success"
                     />
                   </div>
                 </div>
-                <div class="c-progress-group">
-                  <div class="c-progress-group-header">
+                <div class="progress-group">
+                  <div class="progress-group-header">
                     <CIcon
                       name="socialLinkedin"
                       height="17"
-                      class="c-progress-group-icon"
+                      class="progress-group-icon"
                     />
-                    <span class="c-title">LinkedIn</span>
-                    <span class="c-ml-auto c-font-weight-bold">
-                      27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
+                    <span class="title">LinkedIn</span>
+                    <span class="ml-auto font-weight-bold">
+                      27,319 <span class="text-muted small">&nbsp;(8%)</span>
                     </span>
                   </div>
-                  <div class="c-progress-group-bars">
+                  <div class="progress-group-bars">
                     <CProgress
-                      class="c-progress-xs"
+                      class="progress-xs"
                       :value="8"
                       variant="success"
                     />
                   </div>
                 </div>
-                <div class="c-divider c-text-center">
-                  <CButton variant="link" size="sm" class="c-text-muted">
+                <div class="divider text-center">
+                  <CButton variant="link" size="sm" class="text-muted">
                     <i class="cui-options"></i>
                   </CButton>
                 </div>
@@ -377,25 +377,25 @@
           </CRow>
           <br/>
           <CTable
-            class="c-mb-0 c-table-outline"
+            class="mb-0 table-outline"
             hover
             :items="tableItems"
             :fields="tableFields"
             head-variant="light"
             no-sorting
           >
-            <td slot="avatar" class="c-text-center" slot-scope="{item}">
-              <div class="c-avatar">
-                <img :src="item.avatar.url" class="c-img-avatar" alt="">
+            <td slot="avatar" class="text-center" slot-scope="{item}">
+              <div class="avatar">
+                <img :src="item.avatar.url" class="img-avatar" alt="">
                 <span
-                  class="c-avatar-status"
-                  :class="`c-bg-${item.avatar.status || 'secondary'}`"
+                  class="avatar-status"
+                  :class="`bg-${item.avatar.status || 'secondary'}`"
                 ></span>
               </div>
             </td>
             <td slot="user" slot-scope="{item}">
               <div>{{item.user.name}}</div>
-              <div class="c-small c-text-muted">
+              <div class="small text-muted">
                 <span>
                   <template v-if="item.user.new">New</template>
                   <template v-else>Recurring</template>
@@ -405,7 +405,7 @@
             <td
               slot="country"
               slot-scope="{item}"
-              class="c-text-center"
+              class="text-center"
             >
               <CIcon
                 :name="item.country.flag"
@@ -413,16 +413,16 @@
               />
             </td>
             <td slot="usage" slot-scope="{item}">
-              <div class="c-clearfix">
-                <div class="c-float-left">
+              <div class="clearfix">
+                <div class="float-left">
                   <strong>{{item.usage.value}}%</strong>
                 </div>
-                <div class="c-float-right">
-                  <small class="c-text-muted">{{item.usage.period}}</small>
+                <div class="float-right">
+                  <small class="text-muted">{{item.usage.period}}</small>
                 </div>
               </div>
               <CProgress
-                class="c-progress-xs"
+                class="progress-xs"
                 v-model="item.usage.value"
                 :variant="variant(item.usage.value)"
               />
@@ -430,7 +430,7 @@
             <td
               slot="payment"
               slot-scope="{item}"
-              class="c-text-center"
+              class="text-center"
             >
               <CIcon
                 :name="item.payment.icon"
@@ -438,7 +438,7 @@
               />
             </td>
             <td slot="activity" slot-scope="{item}">
-              <div class="c-small c-text-muted">Last login</div>
+              <div class="small text-muted">Last login</div>
               <strong>{{item.activity}}</strong>
             </td>
           </CTable>
@@ -514,11 +514,11 @@ export default {
         }
       ],
       tableFields: [
-        { key: 'avatar', label: '', _classes: 'c-text-center' },
+        { key: 'avatar', label: '', _classes: 'text-center' },
         { key: 'user' },
-        { key: 'country', _classes: 'c-text-center' },
+        { key: 'country', _classes: 'text-center' },
         { key: 'usage' },
-        { key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
+        { key: 'payment', label: 'Payment method', _classes: 'text-center' },
         { key: 'activity' },
       ]
     }
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 4e2be6d0..542f4e05 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col>
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
                   class="card-header-action" 
@@ -72,17 +72,17 @@ export default {
         {
           textHtml: 'Added',
           to: '#2',
-          addClasses: 'c-font-xl'
+          addClasses: 'font-xl'
         }, 
         {
           textHtml: 'Custom',
           to: '#3',
-          addClasses: 'c-font-xl'
+          addClasses: 'font-xl'
         },
         {
           textHtml: 'Classes',
           to: '#4',
-          addClasses: 'c-font-xl c-text-danger'
+          addClasses: 'font-xl text-danger'
         }
       ]
     }
@@ -91,7 +91,7 @@ export default {
 </script>
 
 <style>
-  .c-breadcrumb-item + .c-font-xl.c-breadcrumb-item::before {
+  .breadcrumb-item + .font-xl.breadcrumb-item::before {
     color: rgb(140, 195, 38);
     content: '>>';
     padding: 0px 10px;
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 1c4c5744..ade55bdd 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -5,7 +5,7 @@
         <CCard>
           <CCardHeader>
             Card title
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/CardComponents" 
                 class="card-header-action" 
@@ -35,7 +35,7 @@
           <CCardHeader>
             Card with switch
             <CSwitch
-              class="c-float-right"
+              class="float-right"
               size="sm"
               shape="pill"
               variant="info"
@@ -53,7 +53,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge variant="success" class="c-float-right">Success</CBadge>
+            <CBadge variant="success" class="float-right">Success</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}
@@ -64,7 +64,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill variant="danger" class="c-float-right">42</CBadge>
+            <CBadge pill variant="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody :body-html="loremIpsum"/>
         </CCard>
@@ -113,40 +113,40 @@
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
+        <CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
+        <CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
+        <CCard class="card-accent-success" header="Card with success accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
+        <CCard class="card-accent-info" header="Card with info accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
+        <CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
+        <CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-primary c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-primary text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -155,8 +155,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-success c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-success text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -165,8 +165,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-info c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-info text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -175,8 +175,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-warning c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-warning text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -185,8 +185,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-danger c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-danger text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -195,8 +195,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-secondary c-text-center" body-wrapper>
-          <blockquote class="c-card-blockquote">
+        <CCard class="bg-secondary text-center" body-wrapper>
+          <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -207,43 +207,43 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="c-bg-primary" body-wrapper>
+        <CCard header-html="Card title" class="bg-primary" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="c-bg-success" body-wrapper>
+        <CCard header-html="Card title" class="bg-success" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="c-bg-info" body-wrapper>
+        <CCard header-html="Card title" class="bg-info" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="c-bg-warning" body-wrapper>
+        <CCard header-html="Card title" class="bg-warning" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="c-bg-danger" body-wrapper>
+        <CCard header-html="Card title" class="bg-danger" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="c-bg-secondary" v-if="show" >
+          <CCard class="bg-secondary" v-if="show" >
             <CCardHeader>
               Card with header actions
-              <div class="c-card-header-actions">
-                <CLink href="#" class="c-card-header-action btn-setting" >
+              <div class="card-header-actions">
+                <CLink href="#" class="card-header-action btn-setting" >
                   <i class="cui-settings"></i>
                 </CLink>
-                <CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
+                <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
                   <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
-                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
+                <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
                   <i class="cui-circle-x"></i>
                 </CLink>
               </div>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 3db313be..4abde58c 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
       <CRow>
       <CCol md="12" lg="7">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Carousel</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Carousel" 
                   class="card-header-action" 
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 39127631..54069fd5 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12" md="6">
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Collapse </strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Collapse" 
                   class="card-header-action" 
@@ -22,13 +22,13 @@
               <CButton id="collapse1" variant="primary">
                 Toggle Collapse
               </CButton>
-              <CCollapse toggler="collapse1" class="c-mt-2">
+              <CCollapse toggler="collapse1" class="mt-2">
                 <CCard body-wrapper>
-                  <p class="c-card-text">Collapse contents Here</p>
+                  <p class="card-text">Collapse contents Here</p>
                   <CButton id="collapse2" size="sm" variant="secondary">
                     Toggle Inner Collapse
                   </CButton>
-                  <CCollapse toggler="collapse2" class="c-mt-2">
+                  <CCollapse toggler="collapse2" class="mt-2">
                     <CCard body-wrapper>Hello!</CCard>
                   </CCollapse>
                 </CCard>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 577687b0..136dbd0f 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -5,7 +5,7 @@
         <CCard>
           <CCardHeader>
             <strong>Credit Card </strong> <small>Form</small>
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/FormComponents" 
                 class="card-header-action" 
@@ -185,11 +185,11 @@
                 disabled
               />
               <template v-for="(name, key) in checkboxNames">
-                <div class="c-form-group c-form-row" :key="name">
-                  <CCol tag="label" sm="3" class="c-col-form-label">
+                <div class="form-group form-row" :key="name">
+                  <CCol tag="label" sm="3" class="col-form-label">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
+                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CFormCheckbox
                       v-for="option in options"
                       :key="option"
@@ -204,11 +204,11 @@
                 </div>
               </template>
               <template v-for="(name, key) in radioNames">
-                <div class="c-form-row c-form-group" :key="name">
+                <div class="form-row form-group" :key="name">
                   <CCol sm="3">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
+                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CFormRadio
                       v-for="option in options"
                       :key="option"
@@ -259,7 +259,7 @@
             <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
             <CForm inline>
               <CFormInput
-                class="c-mr-2"
+                class="mr-2"
                 placeholder="Jane Doe"
               >
                 <template #label>
@@ -348,54 +348,54 @@
             Input <strong>Grid</strong>
           </CCardHeader>
           <CCardBody>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="3">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-3"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="4">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-4"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="5">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-5"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="6">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-6"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="7">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-7"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="8">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-8"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="9">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-9"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="10">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-10"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="11">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-11"/>
               </CCol>
             </CRow>
-            <CRow class="c-form-group">
+            <CRow class="form-group">
               <CCol sm="12">
-                <CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
+                <CFormInput class="mb-0" placeholder=".col-sm-12"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -634,15 +634,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="c-form-group"
+              class="form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
               <CCol :col="12 - number">
-                <CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
+                <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
               </CCol>
               <CCol :col="number">
-                <CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
+                <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -662,15 +662,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="c-form-group"
+              class="form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
               <CCol :col="number">
-                <CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
+                <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
               </CCol>
               <CCol :col="12 - number">
-                <CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
+                <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -708,7 +708,7 @@
                 autocomplete="current-password"
                 append-html="<i class='cui-shield'></i>"
               />
-              <div class="c-form-group c-form-actions">
+              <div class="form-group form-actions">
                 <CButton type="submit" size="sm" variant="primary">
                   Submit
                 </CButton>
@@ -740,8 +740,8 @@
                 autocomplete="current-password"
                 append-html="<i class='cui-shield'></i>"
               />
-              <div class="c-form-group c-form-actions">
-                <CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
+              <div class="form-group form-actions">
+                <CButton type="submit" class="btn btn-sm btn-secondary">
                   Submit
                 </CButton>
               </div>
@@ -772,7 +772,7 @@
                 autocomplete="current-password"
                 prependHtml="<i class='cui-shield'></i>"
               />
-              <div class="c-form-group c-form-actions">
+              <div class="form-group form-actions">
                 <CButton type="submit" size="sm" variant="success">
                   Submit
                 </CButton>
@@ -788,17 +788,17 @@
           <CCard v-if="show">
             <CCardHeader>
               <i class="cui-pencil"></i> Form Elements
-              <div class="c-card-header-actions">
-                <CLink href="#" class="c-card-header-action c-btn-setting">
+              <div class="card-header-actions">
+                <CLink href="#" class="card-header-action btn-setting">
                   <i class="cui-settings"></i>
                 </CLink>
                 <CLink
-                  class="c-card-header-action c-btn-minimize"
+                  class="card-header-action btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
                   <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
-                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
+                <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
                   <i class="cui-circle-x"></i>
                 </CLink>
               </div>
@@ -837,7 +837,7 @@
                     <CButton variant="danger">Options</CButton>
                   </template>
                 </CFormInput>
-                <div class="c-form-actions">
+                <div class="form-actions">
                   <CButton type="submit" variant="primary">Save changes</CButton>
                   <CButton variant="secondary">Cancel</CButton>
                 </div>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index b5964bc5..74f54c85 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol>
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Jumbotron </strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Jumbotron" 
                   class="card-header-action" 
@@ -34,11 +34,11 @@
             </CCardHeader>
             <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="">
-                <p slot="lead" class="c-lead">
+                <p slot="lead" class="lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="c-my-4">
+                <hr class="my-4">
                 <p>
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
@@ -64,11 +64,11 @@
                 border-variant="dark"
                 header="Bootstrap 4"
               >
-                <p slot="lead" class="c-lead">
+                <p slot="lead" class="lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="c-my-4">
+                <hr class="my-4">
                 <p>
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index ce96a0aa..34401831 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol md="6">
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap list group </strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/ListGroup" 
                   class="card-header-action" 
@@ -111,19 +111,19 @@
             <CCardBody>
               <CListGroup>
                 <CListGroupItem
-                  class="c-d-flex c-justify-content-between c-align-items-center"
+                  class="d-flex justify-content-between align-items-center"
                 >
                   Cras justo odio
                   <CBadge variant="primary" pill>14</CBadge>
                 </CListGroupItem>
                 <CListGroupItem
-                  class="c-d-flex c-justify-content-between c-align-items-center"
+                  class="d-flex justify-content-between align-items-center"
                 >
                   Dapibus ac facilisis in
                   <CBadge variant="primary" pill>2</CBadge>
                 </CListGroupItem>
                 <CListGroupItem
-                  class="c-d-flex c-justify-content-between c-align-items-center"
+                  class="d-flex justify-content-between align-items-center"
                 >
                   Morbi leo risus
                   <CBadge variant="primary" pill>1</CBadge>
@@ -195,7 +195,7 @@
                     <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                     <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
                   </CListGroup>
-                  <p class="c-card-text c-mt-2">
+                  <p class="card-text mt-2">
                     Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
                     nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
                     consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -231,39 +231,39 @@
                 <CListGroupItem
                   href="#"
                   active
-                  class="c-flex-column c-align-items-start"
+                  class="flex-column align-items-start"
                 >
-                  <div class="c-d-flex c-w-100 c-justify-content-between">
-                    <h5 class="c-mb-1">List group item heading</h5>
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">List group item heading</h5>
                     <small>3 days ago</small>
                   </div>
-                  <p class="c-mb-1">
+                  <p class="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
                   <small>Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem href="#" class="c-flex-column c-align-items-start">
-                  <div class="c-d-flex c-w-100 c-justify-content-between">
-                    <h5 class="c-mb-1">List group item heading</h5>
-                    <small class="c-text-muted">3 days ago</small>
+                <CListGroupItem href="#" class="flex-column align-items-start">
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">List group item heading</h5>
+                    <small class="text-muted">3 days ago</small>
                   </div>
-                  <p class="c-mb-1">
+                  <p class="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="c-text-muted">Donec id elit non mi porta.</small>
+                  <small class="text-muted">Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
-                  <div class="c-d-flex c-w-100 c-justify-content-between">
-                    <h5 class="c-mb-1">Disabled List group item</h5>
-                    <small class="c-text-muted">3 days ago</small>
+                <CListGroupItem href="#" disabled class="flex-column align-items-start">
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">Disabled List group item</h5>
+                    <small class="text-muted">3 days ago</small>
                   </div>
-                  <p class="c-mb-1">
+                  <p class="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="c-text-muted">Donec id elit non mi porta.</small>
+                  <small class="text-muted">Donec id elit non mi porta.</small>
                 </CListGroupItem>
               </CListGroup>
             </CCardBody>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index aae55d30..9df65eb2 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <!-- <CCard>
         <CNavbar toggleable="md" light variant="light">
@@ -19,7 +19,7 @@
               <DefaultHeaderDropdownAccnt/>
             </CNavbarNav>
             <CNavbarNav class="ml-auto">
-              <CDropdown right class="c-nav-item " toggle-classes="c-nav-link">
+              <CDropdown right class="nav-item " toggle-classes="nav-link">
                 <CDropdownItem><i class="cui-file" /> Projects
                   <CBadge variant="primary">32</CBadge>
                 </CDropdownItem>
@@ -34,7 +34,7 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navbar </strong>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Navbar" 
               class="card-header-action" 
@@ -59,14 +59,14 @@
               </CNavbarNav>
 
               <!-- Right aligned nav items -->
-              <CNavbarNav class="c-ml-auto">
+              <CNavbarNav class="ml-auto">
                 <CForm inline>
                   <CFormInput
-                    class="c-mr-sm-2"
+                    class="mr-sm-2"
                     placeholder="Search"
                     size="sm"
                   />
-                  <CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
+                  <CButton variant="light" size="sm" class="my-2 my-sm-0">
                     Search
                   </CButton>
                 </CForm>
@@ -104,7 +104,7 @@
           <!-- Image and text -->
           <CNavbar variant="faded" light>
             <CNavbarBrand href="#">
-              <img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="CoreuiVue">
+              <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
               CoreuiVue
             </CNavbarBrand>
           </CNavbar>
@@ -121,7 +121,7 @@
             <CNavbarBrand>CoreuiVue</CNavbarBrand>
             <CCollapse :show="navbarText" navbar>
               <CNavbarNav>
-                <span class="c-navbar-text">Navbar text</span>
+                <span class="navbar-text">Navbar text</span>
               </CNavbarNav>
             </CCollapse>
           </CNavbar>
@@ -172,11 +172,11 @@
           <CNavbar light variant="light">
             <CForm inline>
               <CFormInput
-                class="c-mr-sm-2"
+                class="mr-sm-2"
                 placeholder="Search"
                 size="sm"
               />
-              <CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
+              <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
             </CForm>
           </CNavbar>
         </CCardBody>
@@ -190,7 +190,7 @@
           <CNavbar light variant="light">
             <CForm inline>
               <CFormInput
-                class="c-mr-sm-2"
+                class="mr-sm-2"
                 placeholder="Username"
               />
             </CForm>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 8459c229..d5a8db02 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Nav" 
               class="card-header-action" 
@@ -127,7 +127,7 @@
               placement="bottom-end"
               button-content="Dropdown"
             >
-              <!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
+              <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
               <CDropdownItem>one</CDropdownItem>
               <CDropdownItem>two</CDropdownItem>
               <CDropdownDivider/>
@@ -144,7 +144,7 @@
         </CCardHeader>
         <CCardBody>
           <CRow>
-            <CCol col="3" class="c-m-0">
+            <CCol col="3" class="m-0">
               <CNav vertical pills >
                 <CNavItem active>Active</CNavItem>
                 <CNavItem>Link</CNavItem>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index cb775e43..dfb354e3 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Responsive bootstrap Pagination</strong>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Pagination" 
               class="card-header-action" 
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 87fed8b2..fa093ba5 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Popovers</strong>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Popover" 
               class="card-header-action" 
@@ -19,7 +19,7 @@
         <CCardBody>
           <CRow>
             <CCol col="4">
-              <div class="c-my-3 c-text-center">
+              <div class="my-3 text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -32,7 +32,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="c-my-3 c-text-center">
+              <div class="my-3 text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -45,7 +45,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="c-my-3 c-text-center">
+              <div class="my-3 text-center">
                 <CButton
                   variant="primary"
                   v-c-popover.click="{
@@ -67,11 +67,11 @@
           <strong> Popovers </strong>
           <small>placement</small>
         </CCardHeader>
-        <CCardBody class="c-my-3">
+        <CCardBody class="my-3">
           <CRow>
             <CCol
               md="4"
-              class="c-py-4 c-text-center"
+              class="py-4 text-center"
               v-for="placement in placements"
               :key="placement"
             >
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index 7353fd40..c6fc3053 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Progress</strong>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Progress" 
               class="card-header-action" 
@@ -18,7 +18,7 @@
         </CCardHeader>
         <CCardBody>
           <CProgress :value="counter" :max="max" show-progress animated></CProgress>
-          <CProgress class="c-mt-1" :max="max" show-value>
+          <CProgress class="mt-1" :max="max" show-value>
             <CProgressBar :value="counter*(6/10)" variant="success"/>
             <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
             <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
@@ -26,7 +26,7 @@
           <CButton 
             @click="clicked"
             variant="secondary"
-            class="c-mt-4" 
+            class="mt-4" 
           >
             Click me to animate progress bars
           </CButton>
@@ -38,15 +38,15 @@
         </CCardHeader>
         <CCardBody>
           <h6>No label</h6>
-          <CProgress :value="value" :max="max2" class="c-mb-3"/>
+          <CProgress :value="value" :max="max2" class="mb-3"/>
           <h6>Value label</h6>
-          <CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
+          <CProgress :value="value" :max="max2" show-value class="mb-3"/>
           <h6>Progress label</h6>
-          <CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
+          <CProgress :value="value" :max="max2" show-progress class="mb-3"/>
           <h6>Value label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
+          <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
           <h6>Progress label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
+          <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
         </CCardBody>
       </CCard>
       <CCard>
@@ -57,11 +57,11 @@
         </CCardHeader>
         <CCardBody>
           <h6>Default width</h6>
-          <CProgress :value="value3" class="c-mb-3"/>
+          <CProgress :value="value3" class="mb-3"/>
           <h6>Custom widths</h6>
-          <CProgress :value="value3" class="c-w-75 c-mb-2"/>
-          <CProgress :value="value3" class="c-w-50 c-mb-2"/>
-          <CProgress :value="value3" class="c-w-25"/>
+          <CProgress :value="value3" class="w-75 mb-2"/>
+          <CProgress :value="value3" class="w-50 mb-2"/>
+          <CProgress :value="value3" class="w-25"/>
         </CCardBody>
       </CCard>
       <CCard>
@@ -72,10 +72,10 @@
         </CCardHeader>
         <CCardBody>
           <h6>Default height</h6>
-          <CProgress :value="value3" show-progress class="c-mb-3"/>
+          <CProgress :value="value3" show-progress class="mb-3"/>
           <h6>Custom heights</h6>
-          <CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
-          <CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
+          <CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
+          <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
           <CProgress height="2px" :value="value3"/>
         </CCardBody>
       </CCard>
@@ -86,9 +86,9 @@
           <small>variants</small>
         </CCardHeader>
         <CCardBody>
-          <div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
-            <div class="c-col-sm-2">{{ bar.variant }}:</div>
-            <div class="c-col-sm-10 c-pt-1">
+          <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
+            <div class="col-sm-2">{{ bar.variant }}:</div>
+            <div class="col-sm-10 pt-1">
               <CProgress
                 :value="bar.value"
                 :variant="bar.variant"
@@ -109,25 +109,25 @@
             :value="25"
             variant="success"
             :striped="striped"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="50"
             variant="info"
             :striped="striped"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="75"
             variant="warning"
             :striped="striped"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="100"
             variant="danger"
             :striped="striped"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CButton variant="secondary" @click="striped = !striped">
             {{ striped ? 'Remove' : 'Add'}} Striped
@@ -146,27 +146,27 @@
             variant="success"
             striped
             :animated="animate"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="50"
             variant="info"
             striped
             :animated="animate"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="75"
             variant="warning"
             striped
             :animated="animate"
-            class="c-mb-2"
+            class="mb-2"
           />
           <CProgress
             :value="100"
             variant="danger"
             :animated="animate"
-            class="c-mb-3"
+            class="mb-3"
           />
           <CButton variant="secondary" @click="animate = !animate">
             {{ animate ? 'Stop' : 'Start'}} Animation
@@ -180,22 +180,22 @@
           <small>multiple bars</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :max="max3" class="c-mb-3">
+          <CProgress :max="max3" class="mb-3">
             <CProgressBar variant="primary" :value="values[0]"/>
             <CProgressBar variant="success" :value="values[1]"/>
             <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress show-progress :max="max3" class="c-mb-3">
+          <CProgress show-progress :max="max3" class="mb-3">
             <CProgressBar variant="primary" :value="values[0]"/>
             <CProgressBar variant="success" :value="values[1]"/>
             <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress show-value striped :max="max3" class="c-mb-3">
+          <CProgress show-value striped :max="max3" class="mb-3">
             <CProgressBar variant="primary" :value="values[0]"/>
             <CProgressBar variant="success" :value="values[1]"/>
             <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress :max="max3" class="c-mb-3">
+          <CProgress :max="max3" class="mb-3">
             <CProgressBar variant="primary" :value="values[0]" show-progress/>
             <CProgressBar variant="success" :value="values[1]" animated show-progress/>
             <CProgressBar variant="info" :value="values[2]" striped show-progress/>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 5352ca98..8dbab265 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -5,8 +5,8 @@
         <CCard v-if="true">
           <CCardHeader>
             Radio switches
-            <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
-            <div class="c-card-header-actions">
+            <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/Switch" 
                 class="card-header-action" 
@@ -26,9 +26,9 @@
               name="lg"
               required
             /> -->
-            <!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
+            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
             <CSwitch
-              class="c-mx-1"
+              class="mx-1"
               :key="key"
               :variant="variant"
               shape="3d"
@@ -53,7 +53,7 @@
           </CCardHeader>
           <CCardBody>
             <CSwitch
-              class="c-mx-1"
+              class="mx-1"
               variant="primary"
               name="switch1"
               :checked.sync="checker"
@@ -61,13 +61,13 @@
               false-value="no"
             />
             <CSwitch
-              class="c-mx-1"
+              class="mx-1"
               :variant="variant"
               checked
               :key="key"
               v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
             />
-            <CSwitch class="c-mx-1" variant="primary" disabled />
+            <CSwitch class="mx-1" variant="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -77,15 +77,15 @@
             Switch pills
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
+            <CSwitch class="mx-1" variant="primary" checked shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
+            <CSwitch class="mx-1" variant="primary" disabled shape="pill" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -95,15 +95,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" />
-            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" variant="primary" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="success" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="warning" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="info" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="danger" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="light" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="dark" checked  shape="3d" />
+            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -113,15 +113,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
-            <CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
+            <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -131,15 +131,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -149,15 +149,15 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -167,15 +167,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -185,15 +185,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -203,15 +203,15 @@
             Switch <small><code>outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline />
-            <CSwitch class="c-mx-1" variant="success" checked outline />
-            <CSwitch class="c-mx-1" variant="warning" checked outline />
-            <CSwitch class="c-mx-1" variant="info" checked outline />
-            <CSwitch class="c-mx-1" variant="danger" checked outline />
-            <CSwitch class="c-mx-1" variant="light" checked outline />
-            <CSwitch class="c-mx-1" variant="dark" checked outline />
-            <CSwitch class="c-mx-1" variant="primary" outline disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="mx-1" variant="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -221,15 +221,15 @@
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -239,15 +239,15 @@
             Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -257,15 +257,15 @@
             Switch <small><code>outline="alt"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -275,15 +275,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked />
-            <CSwitch class="c-mx-1" variant="secondary" checked />
-            <CSwitch class="c-mx-1" variant="success" checked />
-            <CSwitch class="c-mx-1" variant="warning" checked />
-            <CSwitch class="c-mx-1" variant="info" checked />
-            <CSwitch class="c-mx-1" variant="danger" checked />
-            <CSwitch class="c-mx-1" variant="light" checked />
-            <CSwitch class="c-mx-1" variant="dark" checked />
-            <CSwitch class="c-mx-1" variant="primary" disabled />
+            <CSwitch class="mx-1" variant="primary" checked />
+            <CSwitch class="mx-1" variant="secondary" checked />
+            <CSwitch class="mx-1" variant="success" checked />
+            <CSwitch class="mx-1" variant="warning" checked />
+            <CSwitch class="mx-1" variant="info" checked />
+            <CSwitch class="mx-1" variant="danger" checked />
+            <CSwitch class="mx-1" variant="light" checked />
+            <CSwitch class="mx-1" variant="dark" checked />
+            <CSwitch class="mx-1" variant="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -293,15 +293,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
+            <CSwitch class="mx-1" variant="primary" checked shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
+            <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -311,15 +311,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline />
-            <CSwitch class="c-mx-1" variant="success" checked outline />
-            <CSwitch class="c-mx-1" variant="warning" checked outline />
-            <CSwitch class="c-mx-1" variant="info" checked outline />
-            <CSwitch class="c-mx-1" variant="danger" checked outline />
-            <CSwitch class="c-mx-1" variant="light" checked outline />
-            <CSwitch class="c-mx-1" variant="dark" checked outline />
-            <CSwitch class="c-mx-1" variant="primary" outline disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="mx-1" variant="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -329,15 +329,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -347,15 +347,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -365,15 +365,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -384,15 +384,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>shape
       </CCol>
@@ -402,15 +402,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -420,15 +420,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -438,15 +438,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -456,15 +456,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -474,15 +474,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -492,11 +492,11 @@
           <CCardHeader>
             Sizes
           </CCardHeader>
-          <CCardBody class="c-p-0">
+          <CCardBody class="p-0">
             <CTable
               hover
               striped
-              class="c-table-align-middle c-mb-0"
+              class="table-align-middle mb-0"
               :items="items"
               :fields="fields"
               no-sorting
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 52baa63b..7ef9b8ba 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -5,7 +5,7 @@
         <CCard>
           <CCardHeader>
             CTable component functionality presentation
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/Table" 
                 class="card-header-action" 
@@ -20,14 +20,11 @@
             <CTable
               :items="getItems()"
               :fields="fields"
-              :per-page="6"
               index-column
               filter-row
               options-row
               hover
-              :default-column-filter="{ role:'staff' }"
-              :default-filter="2012"
-              dark-header
+              sorting
               footer
               pagination
             >
@@ -35,10 +32,10 @@
                 <td
                   @click="toggleDetails(index)"
                   style="cursor:pointer"
-                  class="c-text-center"
+                  class="text-center"
                 >
                   <i
-                    class="c-icons c-font-lg c-d-block cui-chevron-right"
+                    class="icons font-lg d-block cui-chevron-right"
                     style="transition: transform 0.4s"
                     :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
                   ></i>
@@ -52,7 +49,7 @@
                 </td>
               </template>
               <template #show_details="{item, index}">
-                <td class="c-py-2">
+                <td class="py-2">
                   <CButton
                     variant="outline-primary"
                     square
@@ -157,17 +154,17 @@ const fields = [
   { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
-  {number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
   {number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-table-success'},
+  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
   {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
+  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
   {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
   {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -179,7 +176,7 @@ const items = [
   {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-table-danger'},
+  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
   {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
   {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 44de1232..d1598263 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -5,7 +5,7 @@
         <CCard>
           <CCardHeader>
             Tabs
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/Tabs" 
                 class="card-header-action" 
@@ -122,7 +122,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs add-tab-classes="c-mt-1">
+            <CTabs add-tab-classes="mt-1">
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i> {{tabs[0]}}
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index c87fe700..40e6e9e0 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Tooltips </strong>
           <small><code>v-c-tooltip</code> directive</small>
-          <div class="c-card-header-actions">
+          <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Tooltip" 
               class="card-header-action" 
@@ -20,7 +20,7 @@
         <CCardBody>
           <CRow>
             <CCol col="4">
-              <div class="c-text-center c-my-3">
+              <div class="text-center my-3">
                 <CButton 
                   variant="secondary"
                   v-c-tooltip.hover.click="'I am a tooltip!'"
@@ -30,7 +30,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="c-text-center c-my-3">
+              <div class="text-center my-3">
                 <CButton 
                   v-c-tooltip="{content: 'I start open!', active:true }"
                   variant="secondary"
@@ -40,7 +40,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="c-text-center c-my-3">
+              <div class="text-center my-3">
                 <CButton
                   variant="secondary"
                   v-c-tooltip.click="
@@ -61,11 +61,11 @@
           <small>placement</small>
         </CCardHeader>
         <CCardBody>
-          <div class="c-my-3">
+          <div class="my-3">
             <CRow>
               <CCol
                 md="4"
-                class="c-py-4 c-text-center"
+                class="py-4 text-center"
                 v-for="placement in placements"
                 :key="placement"
               >
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index c5d2fae8..6c827235 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -5,7 +5,7 @@
         <CCard>
           <CCardHeader>
             <strong>Brand Button</strong>
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
                   class="card-header-action" 
@@ -219,12 +219,12 @@ export default {
 }
 </script>
 
-<style scoped lang="css">
-.c-btn {
+<style scoped>
+.btn {
   margin-bottom: 4px;
   margin-right: 6px;
 }
-.c-btn svg + span {
+.btn svg + span {
   margin-left: 8px;
 }
 </style>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 1ed27faf..d28d99a9 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12" >
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap button group</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
                   class="card-header-action" 
@@ -25,14 +25,14 @@
                   <CButton variant="secondary">Two</CButton>
                   <CButton variant="secondary">Three</CButton>
                   <CButton variant="secondary">Four</CButton>
-                  <CButton variant="secondary" class="c-d-sm-down-none">Five</CButton>
+                  <CButton variant="secondary" class="d-sm-down-none">Five</CButton>
                 </CButtonGroup>
                 <br><br>
                 <CButtonGroup>
-                  <CButton class="c-d-sm-down-none" variant="success">Success</CButton>
+                  <CButton class="d-sm-down-none" variant="success">Success</CButton>
                   <CButton variant="info">Info</CButton>
                   <CButton variant="warning">Warn</CButton>
-                  <CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
+                  <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
                   <CButton variant="danger">Danger</CButton>
                   <CButton variant="link">Link</CButton>
                 </CButtonGroup>
@@ -77,15 +77,15 @@
             <CCardBody>
               <div>
                 <CButtonGroup>
-                  <CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton>
-                  <CButton variant="secondary" class="c-d-sm-down-none">Button 2</CButton>
+                  <CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
+                  <CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
                   <CDropdown right text="Menu" variant="success">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownDivider></CDropdownDivider>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButton variant="secondary" class="c-d-sm-down-none">Button 3</CButton>
+                  <CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
                   <CDropdown right split text="Split Menu" variant="info">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
@@ -129,47 +129,47 @@
             <CCardBody>
               <div>
                 <CButtonToolbar aria-label="Toolbar with button groups">
-                  <CButtonGroup class="c-mx-1">
-                    <CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton>
+                  <CButtonGroup class="mx-1">
+                    <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
                     <CButton variant="secondary">&lsaquo;</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="c-mx-1">
-                    <CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton>
+                  <CButtonGroup class="mx-1">
+                    <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
                     <CButton variant="secondary">Undo</CButton>
                     <CButton variant="secondary">Redo</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="c-mx-1">
+                  <CButtonGroup class="mx-1">
                     <CButton variant="secondary">&rsaquo;</CButton>
-                    <CButton variant="secondary" class="c-d-sm-down-none">&raquo;</CButton>
+                    <CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
                   </CButtonGroup>
                 </CButtonToolbar>
               </div>
-              <hr class="c-d-sm-down-none"/>
+              <hr class="d-sm-down-none"/>
               <div>
                 <CButtonToolbar
                   aria-label="Toolbar with button groups and input groups"
-                  class="c-d-sm-down-none"
+                  class="d-sm-down-none"
                 >
-                  <CButtonGroup size="sm" class="c-mx-1">
+                  <CButtonGroup size="sm" class="mx-1">
                     <CButton variant="secondary">New</CButton>
                     <CButton variant="secondary">Edit</CButton>
                   </CButtonGroup>
                   <CFormInput
-                    class="c-mb-0 c-w-25 c-mx-1"
+                    class="mb-0 w-25 mx-1"
                     size="sm"
                     prepend-html="$"
                     append-html=".00"
                     value="100"
                   />
                   <CFormSelect
-                    class="c-mb-0 c-w-25 c-mx-1"
+                    class="mb-0 w-25 mx-1"
                     size="sm"
                     prepend-html="Size"
                     value="Medium"
                     :options="['Large','Medium','Small']"
                     custom
                   />
-                  <CButtonGroup size="sm" class="c-mx-1">
+                  <CButtonGroup size="sm" class="mx-1">
                     <CButton variant="secondary">Save</CButton>
                     <CButton variant="secondary">Cancel</CButton>
                   </CButtonGroup>
@@ -178,14 +178,14 @@
               <hr/>
               <div>
                 <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
-                  <CButtonGroup class="c-mx-1 c-d-sm-down-none">
+                  <CButtonGroup class="mx-1 d-sm-down-none">
                     <CButton variant="secondary">New</CButton>
                     <CButton variant="secondary">Edit</CButton>
                     <CButton variant="secondary">Undo</CButton>
                   </CButtonGroup>
                   <CDropdown
                     variant="secondary"
-                    class="c-mx-1"
+                    class="mx-1"
                     placement="bottom-end"
                     button-content="Menu"
                   >
@@ -193,7 +193,7 @@
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButtonGroup class="c-mx-1">
+                  <CButtonGroup class="mx-1">
                     <CButton variant="secondary">Save</CButton>
                     <CButton variant="secondary">Cancel</CButton>
                   </CButtonGroup>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index ffb90a3c..94332ce1 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12" md="6">
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Dropdown</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Dropdown" 
                   class="card-header-action" 
@@ -22,7 +22,7 @@
               <div>
                 <CDropdown 
                   toggler-text="Dropdown Button" 
-                  class="c-m-2"
+                  class="m-2"
                   variant="secondary"
                 >
                   <CDropdownItem>First Action</CDropdownItem>
@@ -34,7 +34,7 @@
                 </CDropdown>
               </div>
               <!-- <div>
-                <CDropdown toggler-text="Dropdown using buttons as menu items" class="c-m-2">
+                <CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
                   <CDropdownItem>I'm a button</CDropdownItem>
                   <CDropdownItem>I'm also a button</CDropdownItem>
                   <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -44,7 +44,7 @@
               <div>
                 <CDropdown 
                   toggler-text="Dropdown with divider" 
-                  class="c-m-2"
+                  class="m-2"
                   variant="secondary"
                 >
                   <CDropdownItem>First item</CDropdownItem>
@@ -56,7 +56,7 @@
               <div>
                 <CDropdown 
                   toggler-text="Dropdown with header" 
-                  class="c-m-2"
+                  class="m-2"
                   variant="secondary"
                 >
                   <CDropdownHeader>Dropdown header</CDropdownHeader>
@@ -79,7 +79,7 @@
                 <CDropdown
                   toggler-text="Left align"
                   variant="primary"
-                  class="c-m-2 c-d-inline-block"
+                  class="m-2 d-inline-block"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -89,7 +89,7 @@
                   placement="bottom-end"
                   toggler-text="Right align"
                   variant="primary"
-                  class="c-m-2 c-d-inline-block"
+                  class="m-2 d-inline-block"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -100,7 +100,7 @@
                 <CDropdown
                   toggler-text="Drop-Up"
                   variant="info"
-                  class="c-m-2"
+                  class="m-2"
                   placement="top-start"
 
                 >
@@ -114,7 +114,7 @@
                   variant="secondary"
                   :offset="25"
                   toggler-text="Offset Dropdown"
-                  class="c-m-2"
+                  class="m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -126,7 +126,7 @@
                   variant="secondary"
                   split
                   toggler-text="Split Dropdown"
-                  class="c-m-2"
+                  class="m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -176,7 +176,7 @@
                   variant="secondary"
                   size="lg"
                   toggler-text="Large"
-                  class="c-m-2 c-d-inline-block"
+                  class="m-2 d-inline-block"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -187,7 +187,7 @@
                   size="lg"
                   split
                   toggler-text="Large Split"
-                  class="c-m-2"
+                  class="m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -198,7 +198,7 @@
                   variant="secondary"
                   size="sm"
                   toggler-text="Small"
-                  class="c-m-2 c-d-inline-block"
+                  class="m-2 d-inline-block"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -208,7 +208,7 @@
                   variant="secondary"
                   size="sm"
                   split toggler-text="Small Split"
-                  class="c-m-2"
+                  class="m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -231,7 +231,7 @@
               <div>
                 <CDropdown
                   toggler-text="Dropdown ARIA" variant="primary"
-                  class="c-m-2"
+                  class="m-2"
                 >
                   <div role="group">
                     <CDropdownHeader>Groups</CDropdownHeader>
@@ -264,7 +264,7 @@
                 size="sm"
                 toggler-text="Primary"
                 variant="primary"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -274,7 +274,7 @@
                 size="sm"
                 toggler-text="Secondary"
                 variant="secondary"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -284,7 +284,7 @@
                 size="sm"
                 toggler-text="Success"
                 variant="success"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -294,7 +294,7 @@
                 size="sm"
                 toggler-text="Warning"
                 variant="warning"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -304,7 +304,7 @@
                 size="sm"
                 toggler-text="Danger"
                 variant="danger"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -314,7 +314,7 @@
                 size="sm"
                 toggler-text="Info"
                 variant="info"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -324,7 +324,7 @@
                 size="sm"
                 toggler-text="Light"
                 variant="light"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -334,7 +334,7 @@
                 size="sm"
                 toggler-text="Dark"
                 variant="dark"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -344,7 +344,7 @@
                 size="sm"
                 toggler-text="Link"
                 variant="link"
-                class="c-m-0 c-d-inline-block"
+                class="m-0 d-inline-block"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index eb0344fe..8d564084 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -3,7 +3,7 @@
     <CCard >
       <CCardHeader>
         <strong>Standard buttons</strong>
-        <div class="c-card-header-actions">
+        <div class="card-header-actions">
           <a 
             href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
             class="card-header-action" 
@@ -15,99 +15,99 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <CRow class="c-align-items-center">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link" disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -121,95 +121,95 @@
         <p>
           Use <code>outline</code> prop
         </p>
-        <CRow class="c-align-items-center">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block outline variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -222,95 +222,95 @@
           Use
           <code>ghost</code> prop for ghost buttons.
         </p>
-        <CRow class="c-align-items-center">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0" >
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
             <CButton block ghost variant="primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -323,99 +323,99 @@
           Use
           <code>square</code> prop for square buttons.
         </p>
-        <CRow class="c-align-items-center">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary" square>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary" square>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success" square>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning" square>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger" square>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info" square>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light" square>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark" square>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link" square>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary" square disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary" square disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success" square disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning" square disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger" square disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info" square disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light" square disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark" square disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link" square disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -430,99 +430,99 @@
           Use
           <code>pill</code> prop for pill buttons.
         </p>
-        <CRow class="c-align-items-center">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary" pill>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary" pill>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success" pill>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning" pill>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger" pill>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info" pill>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light" pill>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark" pill>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link" pill>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="12" xl class="mb-3 mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="primary" pill disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="secondary" pill disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="success" pill disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="warning" pill disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="danger" pill disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="info" pill disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="light" pill disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="dark" pill disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block variant="link" pill disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -534,63 +534,63 @@
       </CCardHeader>
       <CCardBody>
         <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
-        <CRow class="c-align-items-center">
-          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol col="2" xl class="mb-3 mb-xl-0">
             Small
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="primary" size="sm">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton outline variant="secondary" size="sm">Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton size="sm" ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="warning" size="sm" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="danger" size="sm" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="2" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="primary">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton outline variant="secondary" >Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="warning" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="danger" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="c-align-items-center c-mt-3">
-          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
+        <CRow class="align-items-center mt-3">
+          <CCol col="2" xl class="mb-3 mb-xl-0">
             Large
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="primary" size="lg">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton outline variant="secondary" size="lg">Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton ghost variant="success" size="lg">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="warning" size="lg" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
+          <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton variant="danger" size="lg" pill>Pill Button</CButton>
           </CCol>
         </CRow>
@@ -601,28 +601,28 @@
         <strong>With Icons</strong>
       </CCardHeader>
       <CCardBody>
-        <CRow class="c-align-items-center">
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+        <CRow class="align-items-center">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="primary">
               <i class="cui-lightbulb"></i>&nbsp;Standard Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="secondary" outline>
               <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="success">
               <i class="cui-lightbulb"></i>&nbsp;Ghost Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="warning" square>
               <i class="cui-lightbulb"></i>&nbsp;Square Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="danger" pill>
               <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
@@ -636,22 +636,22 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="c-text-center c-mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
             <CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index 3e4dc422..57c2ac1f 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -5,10 +5,10 @@
         <i class="cui-globe"></i>Font Awesome brand icons
       </CCardHeader>
       <CCardBody>
-        <CRow class="c-text-center">
+        <CRow class="text-center">
           <template v-for="(brand, brandName) in $options.brands">
             <CCol
-              class="c-mb-5"
+              class="mb-5"
               col="3"
               sm="2"
               :key="brandName"
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 03f8c96c..cbd853ba 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -4,426 +4,426 @@
       <CCardHeader>
         <i class="cui-pencil"></i>CoreUI Icons
         <CBadge variant="info">New</CBadge>
-        <div class="c-card-header-actions">
+        <div class="card-header-actions">
           <a
             href="https://github.com/coreui/coreui-icons"
             rel="noreferrer noopener"
             target="_blank"
-            class="c-card-header-action"
+            class="card-header-action"
           >
-            <small class="c-text-muted">Github</small>
+            <small class="text-muted">Github</small>
           </a>
         </div>
       </CCardHeader>
       <CCardBody>
-        <!-- <CRow class="c-text-center c-mb-5">
+        <!-- <CRow class="text-center mb-5">
           <template v-for="(name, key) in $options.iconNames">
             <CCol :key="key" col="6" sm="4" md="3" xl="2" >
-              <CIcon :name="name" width="24" class="c-mt-4"/>
+              <CIcon :name="name" width="24" class="mt-4"/>
               <div>{{name}}</div>
             </CCol>
           </template>
         </CRow>
          -->
-        <CRow class="c-text-center ">
+        <CRow class="text-center ">
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
             <div>account-logout</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
             <div>action-redo</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
             <div>action-undo</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
             <div>align-center</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
             <div>align-left</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
             <div>align-right</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
             <div>arrow-bottom</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
             <div>arrow-left</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
             <div>arrow-right</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
             <div>arrow-top</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-ban icons font-2xl d-block mt-4"></i>
             <div>ban</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
             <div>basket-loaded</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-bell icons font-2xl d-block mt-4"></i>
             <div>bell</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-bold icons font-2xl d-block mt-4"></i>
             <div>bold</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
             <div>bookmark</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
             <div>briefcase</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
             <div>british-pound</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-brush icons font-2xl d-block mt-4"></i>
             <div>brush</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
             <div>calculator</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
             <div>calendar</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cart icons font-2xl d-block mt-4"></i>
             <div>cart</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-chart icons font-2xl d-block mt-4"></i>
             <div>chart</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-check icons font-2xl d-block mt-4"></i>
             <div>check</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
             <div>chevron-bottom</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
             <div>chevron-left</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
             <div>chevron-right</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
             <div>chevron-top</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
             <div>circle-check</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
             <div>circle-x</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
             <div>cloud</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
             <div>cloud-download</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
             <div>cloud-upload</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-code icons font-2xl d-block mt-4"></i>
             <div>code</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cog icons font-2xl d-block mt-4"></i>
             <div>cog</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
             <div>comment-square</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
             <div>credit-card</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
             <div>cursor</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
             <div>dashboard</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-delete icons font-2xl d-block mt-4"></i>
             <div>delete</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
             <div>dollar</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-drop icons font-2xl d-block mt-4"></i>
             <div>drop</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
             <div>envelope-closed</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
             <div>envelope-letter</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
             <div>envelope-open</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-euro icons font-2xl d-block mt-4"></i>
             <div>euro</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-file icons font-2xl d-block mt-4"></i>
             <div>file</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-globe icons font-2xl d-block mt-4"></i>
             <div>globe</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-graph icons font-2xl d-block mt-4"></i>
             <div>graph</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-home icons font-2xl d-block mt-4"></i>
             <div>home</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
             <div>inbox</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-info icons font-2xl d-block mt-4"></i>
             <div>info</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-italic icons font-2xl d-block mt-4"></i>
             <div>italic</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
             <div>justify-center</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
             <div>justify-left</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
             <div>justify-right</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
             <div>laptop</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-layers icons font-2xl d-block mt-4"></i>
             <div>layers</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
             <div>lightbulb</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-list icons font-2xl d-block mt-4"></i>
             <div>list</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
             <div>location-pin</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
             <div>lock-locked</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
             <div>lock-unlocked</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
             <div>magnifying-glass</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-map icons font-2xl d-block mt-4"></i>
             <div>map</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
             <div>monitor</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-moon icons font-2xl d-block mt-4"></i>
             <div>moon</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-note icons font-2xl d-block mt-4"></i>
             <div>note</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-options icons font-2xl d-block mt-4"></i>
             <div>options</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
             <div>paperclip</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
             <div>pencil</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-people icons font-2xl d-block mt-4"></i>
             <div>people</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-phone icons font-2xl d-block mt-4"></i>
             <div>phone</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
             <div>pie-chart</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-print icons font-2xl d-block mt-4"></i>
             <div>print</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
             <div>puzzle</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-rss icons font-2xl d-block mt-4"></i>
             <div>rss</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
             <div>screen-desktop</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
             <div>screen-smartphone</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-settings icons font-2xl d-block mt-4"></i>
             <div>settings</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-share icons font-2xl d-block mt-4"></i>
             <div>share</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-shield icons font-2xl d-block mt-4"></i>
             <div>shield</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
             <div>sort-ascending</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
             <div>sort-descending</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-speech icons font-2xl d-block mt-4"></i>
             <div>speech</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
             <div>speedometer</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-star icons font-2xl d-block mt-4"></i>
             <div>star</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-sun icons font-2xl d-block mt-4"></i>
             <div>sun</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
             <div>tablet</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-tags icons font-2xl d-block mt-4"></i>
             <div>tags</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-task icons font-2xl d-block mt-4"></i>
             <div>task</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
             <div>thumb-down</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
             <div>thumb-up</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-trash icons font-2xl d-block mt-4"></i>
             <div>trash</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-underline icons font-2xl d-block mt-4"></i>
             <div>underline</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-user icons font-2xl d-block mt-4"></i>
             <div>user</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
             <div>user-female</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
             <div>user-follow</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
             <div>user-unfollow</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
             <div>wrench</div>
           </CCol>
           <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"></i>
+            <i class="cui-yen icons font-2xl d-block mt-4"></i>
             <div>yen</div>
           </CCol>
         </CRow>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index 6a40e746..eae9d162 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -5,8 +5,8 @@
         <i class="cui-globe"></i> Flags
       </CCardHeader>
       <CCardBody>
-        <CRow class="c-text-center">
-          <CCol class="c-mb-5" col="12">
+        <CRow class="text-center">
+          <CCol class="mb-5" col="12">
             <!-- For using the flags inline with text add the classes
             <code>.flag-icon</code> and <code>.flag-icon-xx</code>
             (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
@@ -15,7 +15,7 @@
           </CCol>
           <template v-for="(flag, key) in displayedFlags">
             <CCol
-              class="c-mb-5"
+              class="mb-5"
               col="3"
               sm="2"
               :key="key"
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 4412c1fd..b626c0b6 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12" md="6">
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Alert</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Alert" 
                   class="card-header-action" 
@@ -37,34 +37,34 @@
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Alert
-              <small> use <code>.c-alert-link</code> to provide links</small>
+              <small> use <code>.alert-link</code> to provide links</small>
             </CCardHeader>
             <CCardBody>
               <div>
                 <CAlert show variant="primary">
-                  Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Primary Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="secondary">
-                  Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Secondary Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="success">
-                  Success Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Success Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="danger">
-                  Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Danger Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="warning">
-                  Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Warning Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="info">
-                  Info Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Info Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="light">
-                  Light Alert with <a href="#" class="c-alert-link">an example link</a>.
+                  Light Alert with <a href="#" class="alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="dark">
                   Dark Alert with
-                  <CLink href="#" class="c-alert-link">an example link</CLink>
+                  <CLink href="#" class="alert-link">an example link</CLink>
                   .
                 </CAlert>
               </div>
@@ -78,14 +78,14 @@
             </CCardHeader>
             <CCardBody>
               <CAlert show variant="success">
-                <h4 class="c-alert-heading">Well done!</h4>
+                <h4 class="alert-heading">Well done!</h4>
                 <p>
                   Aww yeah, you successfully read this important alert message.
                   This example text is going to run a bit longer so that you can see
                   how spacing within an alert works with this kind of content.
                 </p>
                 <hr>
-                <p class="c-mb-0">
+                <p class="mb-0">
                   Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                 </p>
               </CAlert>
@@ -120,11 +120,11 @@
                 variant="secondary"
                 :show.sync="dismissibleAlerts[2]"
                 v-slot="{dismiss}"
-                class="c-alert-dismissible"
+                class="alert-dismissible"
               >
                 Dismissible Alert with custom button!
                 <CButton
-                  class="c-position-absolute"
+                  class="position-absolute"
                   variant="secondary"
                   style="right:10px;top: 50%;transform: translateY(-50%);"
                   textHtml="<i>Close</i>"
@@ -134,7 +134,7 @@
               <CButton
                 @click="showDismissibleAlerts"
                 variant="info"
-                class="c-m-1"
+                class="m-1"
               >
                 Show dismissible alerts
               </CButton>
@@ -170,7 +170,7 @@
                     height="4px"
                   />
                 </CAlert>
-                <CButton @click="showAlert" variant="info" class="c-m-1">
+                <CButton @click="showAlert" variant="info" class="m-1">
                   Show alert with timer
                 </CButton>
               </div>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 705f683f..271aeaa1 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,5 +1,5 @@
 <template functional>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12" md="6">
@@ -7,7 +7,7 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Badge</strong>
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Badge" 
                   class="card-header-action" 
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 51a02e92..1133c8ac 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="c-wrapper">
+  <div class="wrapper">
     <div>
       <CRow>
         <CCol col="12">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Bootstrap Modals
-              <div class="c-card-header-actions">
+              <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Modal" 
                   class="card-header-action" 
@@ -18,32 +18,32 @@
               </div>
             </CCardHeader>
             <CCardBody>
-              <CButton variant="secondary" @click="myModal = true" class="c-mr-1">
+              <CButton variant="secondary" @click="myModal = true" class="mr-1">
                 Launch demo modal
               </CButton>
-              <CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
+              <CButton variant="secondary" @click="largeModal = true" class="mr-1">
                 Launch large modal
               </CButton>
-              <CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
+              <CButton variant="secondary" @click="smallModal = true" class="mr-1">
                 Launch small modal
               </CButton>
               <hr>
-              <CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
+              <CButton variant="primary" @click="primaryModal = true" class="mr-1">
                 Launch primary modal
               </CButton>
-              <CButton variant="success" @click="successModal = true" class="c-mr-1">
+              <CButton variant="success" @click="successModal = true" class="mr-1">
                 Launch success modal
               </CButton>
-              <CButton variant="warning" @click="warningModal = true" class="c-mr-1">
+              <CButton variant="warning" @click="warningModal = true" class="mr-1">
                 Launch warning modal
               </CButton>
-              <CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
+              <CButton variant="danger" @click="dangerModal = true" class="mr-1">
                 Launch danger modal
               </CButton>
-              <CButton variant="info" @click="infoModal = true" class="c-mr-1">
+              <CButton variant="info" @click="infoModal = true" class="mr-1">
                 Launch info modal
               </CButton>
-              <CButton variant="dark" @click="darkModal = true" class="c-mr-1">
+              <CButton variant="dark" @click="darkModal = true" class="mr-1">
                 Launch dark modal
               </CButton>
             </CCardBody>
@@ -162,8 +162,8 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       <template #header="{hide}">
-        <h6 class="c-modal-title">Custom smaller modal title</h6>
-        <CButtonClose @click="hide()" class="c-text-white"/>
+        <h6 class="modal-title">Custom smaller modal title</h6>
+        <CButtonClose @click="hide()" class="text-white"/>
       </template>
       <template #footer="{hide}">
         <CButton @click="hide()" variant="danger">Discard</CButton>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 33ad4392..4ba085fb 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,13 +1,13 @@
 <template>
-  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <CRow class="c-justify-content-center">
+  <CContainer class="d-flex align-items-center min-vh-100">
+    <CRow class="justify-content-center">
       <CCol md="8">
         <CCardGroup>
-          <CCard class="c-p-4">
+          <CCard class="p-4">
             <CCardBody>
               <CForm>
                 <h1>Login</h1>
-                <p class="c-text-muted">Sign In to your account</p>
+                <p class="text-muted">Sign In to your account</p>
                 <CFormInput
                   prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
@@ -21,17 +21,17 @@
                 />
                 <CRow>
                   <CCol col="6">
-                    <CButton variant="primary" class="c-px-4">Login</CButton>
+                    <CButton variant="primary" class="px-4">Login</CButton>
                   </CCol>
-                  <CCol col="6" class="c-text-right">
-                    <CButton variant="link" class="c-px-0">Forgot password?</CButton>
+                  <CCol col="6" class="text-right">
+                    <CButton variant="link" class="px-0">Forgot password?</CButton>
                   </CCol>
                 </CRow>
               </CForm>
             </CCardBody>
           </CCard>
           <CCard
-            class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
+            class="text-white text-center bg-primary py-5 d-md-down-none"
             style="width:44%"
             body-wrapper
           >
@@ -39,7 +39,7 @@
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
             <CButton
               variant="primary"
-              class="c-active c-mt-3"
+              class="active mt-3"
             >
               Register Now!
             </CButton>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 5a6541cf..042792a9 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,15 +1,15 @@
 <template>
-  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <CRow class="c-w-100 c-justify-content-center">
+  <CContainer class="d-flex align-items-center min-vh-100">
+    <CRow class="w-100 justify-content-center">
       <CCol md="6">
-        <div class="c-w-100">
-        <div class="c-clearfix">
-          <h1 class="c-float-left c-display-3 c-mr-4">404</h1>
-          <h4 class="c-pt-3">Oops! You're lost.</h4>
-          <p class="c-text-muted">The page you are looking for was not found.</p>
+        <div class="w-100">
+        <div class="clearfix">
+          <h1 class="float-left display-3 mr-4">404</h1>
+          <h4 class="pt-3">Oops! You're lost.</h4>
+          <p class="text-muted">The page you are looking for was not found.</p>
         </div>
         <CFormInput
-          class="c-mb-0"
+          class="mb-0"
           prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index c67d01f2..bc0e2cda 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,14 +1,14 @@
 <template>
-  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <CRow class="c-w-100 c-justify-content-center">
+  <CContainer class="d-flex align-items-center min-vh-100">
+    <CRow class="w-100 justify-content-center">
       <CCol md="6">
-        <div class="c-clearfix">
-          <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
-          <h4 class="c-pt-3">Houston, we have a problem!</h4>
-          <p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
+        <div class="clearfix">
+          <h1 class="float-left display-3 mr-4">500</h1>
+          <h4 class="pt-3">Houston, we have a problem!</h4>
+          <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
         </div>
         <CFormInput
-          class="c-mb-0"
+          class="mb-0"
           prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index afa74380..d0e70170 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,12 +1,12 @@
 <template>
-  <CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
-    <CRow class="c-w-100 c-justify-content-center">
+  <CContainer class="min-vh-100 d-flex align-items-center">
+    <CRow class="w-100 justify-content-center">
       <CCol md="6" sm="8">
-        <CCard class="c-mx-4">
-          <CCardBody class="c-p-4">
+        <CCard class="mx-4">
+          <CCardBody class="p-4">
             <CForm>
               <h1>Register</h1>
-              <p class="c-text-muted">Create your account</p>
+              <p class="text-muted">Create your account</p>
               <CFormInput
                 placeholder="Username"
                 prependHtml="<i class='cui-user'></i>"
@@ -28,12 +28,12 @@
                 type="password"
                 prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
-                class="c-mb-4"
+                class="mb-4"
               />
               <CButton variant="success" block>Create Account</CButton>
             </CForm>
           </CCardBody>
-          <CCardFooter class="c-p-4">
+          <CCardFooter class="p-4">
             <CRow>
               <CCol col="6">
                 <CButton block variant="facebook" textHtml="Facebook"/>
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 8a243be9..89c1b187 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -1,7 +1,7 @@
 <template>
-  <CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
+  <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
     <div
-      :class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
+      :class="['theme-color w-75 rounded mb-3', color]"
       :style="{ paddingTop: '75%' }"
     ></div>
     <slot></slot>
@@ -17,7 +17,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'c-bg-secondary'
+      default: 'bg-secondary'
     }
   }
 }
diff --git a/src/views/theme/ColorView.vue b/src/views/theme/ColorView.vue
index 17105401..23d9089e 100644
--- a/src/views/theme/ColorView.vue
+++ b/src/views/theme/ColorView.vue
@@ -1,13 +1,13 @@
 <template>
-  <table class="c-w-100">
+  <table class="w-100">
     <tbody>
     <tr>
-      <td class="c-text-muted">HEX:</td>
-      <td class="c-font-weight-bold">{{this.hexColor}}</td>
+      <td class="text-muted">HEX:</td>
+      <td class="font-weight-bold">{{this.hexColor}}</td>
     </tr>
     <tr>
-      <td class="c-text-muted">RGB:</td>
-      <td class="c-font-weight-bold">{{this.bgColor}}</td>
+      <td class="text-muted">RGB:</td>
+      <td class="font-weight-bold">{{this.bgColor}}</td>
     </tr>
     </tbody>
   </table>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index bd25da4c..b4218d81 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -6,16 +6,16 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="c-bg-primary">
+          <ColorTheme color="bg-primary">
             <h6>Brand Primary Color</h6>
           </ColorTheme>
-          <ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
+          <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+          <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+          <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+          <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
+          <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
+          <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
+          <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>
@@ -25,15 +25,15 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>
@@ -43,16 +43,16 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
-          <ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
+          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
+          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
+          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
+          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
+          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
+          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
+          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
+          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
+          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
+          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index 9e5fc9cf..94505fa6 100644
--- a/src/views/theme/Typography.vue
+++ b/src/views/theme/Typography.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="c-card">
-      <div class="c-card-header">
+    <div class="card">
+      <div class="card-header">
         Headings
       </div>
-      <div class="c-card-body">
+      <div class="card-body">
         <p>Documentation and examples for Bootstrap typography,
           including global settings, headings, body text, lists, and more.</p>
-        <table class="c-table">
+        <table class="table">
           <thead>
             <tr>
               <th>Heading</th>
@@ -18,131 +18,131 @@
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h1&gt;&lt;/h1&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h1">h1. Bootstrap heading</span></td>
+              <td><span class="h1">h1. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h2&gt;&lt;/h2&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h2">h2. Bootstrap heading</span></td>
+              <td><span class="h2">h2. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h3&gt;&lt;/h3&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h3">h3. Bootstrap heading</span></td>
+              <td><span class="h3">h3. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h4&gt;&lt;/h4&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h4">h4. Bootstrap heading</span></td>
+              <td><span class="h4">h4. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h5&gt;&lt;/h5&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h5">h5. Bootstrap heading</span></td>
+              <td><span class="h5">h5. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
                 <p>
-                  <code class="c-highlighter-rouge">
+                  <code class="highlighter-rouge">
                     &lt;h6&gt;&lt;/h6&gt;
                   </code>
                 </p>
               </td>
-              <td><span class="c-h6">h6. Bootstrap heading</span></td>
+              <td><span class="h6">h6. Bootstrap heading</span></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-    <div class="c-card">
-      <div class="c-card-header">
+    <div class="card">
+      <div class="card-header">
         Headings
       </div>
-      <div class="c-card-body">
+      <div class="card-body">
         <p>
-          <code class="c-highlighter-rouge">.h1</code> through
-          <code class="c-highlighter-rouge">.h6</code>
+          <code class="highlighter-rouge">.h1</code> through
+          <code class="highlighter-rouge">.h6</code>
           classes are also available, for when you want to match the font
           styling of a heading but cannot use the associated HTML element.
         </p>
-        <div class="c-bd-example">
-          <p class="c-h1">h1. Bootstrap heading</p>
-          <p class="c-h2">h2. Bootstrap heading</p>
-          <p class="c-h3">h3. Bootstrap heading</p>
-          <p class="c-h4">h4. Bootstrap heading</p>
-          <p class="c-h5">h5. Bootstrap heading</p>
-          <p class="c-h6">h6. Bootstrap heading</p>
+        <div class="bd-example">
+          <p class="h1">h1. Bootstrap heading</p>
+          <p class="h2">h2. Bootstrap heading</p>
+          <p class="h3">h3. Bootstrap heading</p>
+          <p class="h4">h4. Bootstrap heading</p>
+          <p class="h5">h5. Bootstrap heading</p>
+          <p class="h6">h6. Bootstrap heading</p>
         </div>
       </div>
     </div>
-    <div class="c-card">
-      <div class="c-card-header">
+    <div class="card">
+      <div class="card-header">
         Display headings
       </div>
-      <div class="c-card-body">
+      <div class="card-body">
         <p>
           Traditional heading elements are designed to work best in the meat
           of your page content. When you need a heading to stand out,
           consider using a <strong>display heading</strong>—a larger,
            slightly more opinionated heading style.
         </p>
-        <div class="c-bd-example c-bd-example-type">
-          <table class="c-table">
+        <div class="bd-example bd-example-type">
+          <table class="table">
             <tbody>
               <tr>
-                <td><span class="c-display-1">Display 1</span></td>
+                <td><span class="display-1">Display 1</span></td>
               </tr>
               <tr>
-                <td><span class="c-display-2">Display 2</span></td>
+                <td><span class="display-2">Display 2</span></td>
               </tr>
               <tr>
-                <td><span class="c-display-3">Display 3</span></td>
+                <td><span class="display-3">Display 3</span></td>
               </tr>
               <tr>
-                <td><span class="c-display-4">Display 4</span></td>
+                <td><span class="display-4">Display 4</span></td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
     </div>
-    <div class="c-card">
-      <div class="c-card-header">
+    <div class="card">
+      <div class="card-header">
         Inline text elements
       </div>
-      <div class="c-card-body">
+      <div class="card-body">
         <p>
           Traditional heading elements are designed to work best in the meat
           of your page content. When you need a heading to stand out,
           consider using a <strong>display heading</strong>—a larger,
           slightly more opinionated heading style.
         </p>
-        <div class="c-bd-example">
+        <div class="bd-example">
           <p>You can use the mark tag to <mark>highlight</mark> text.</p>
           <p><del>
             This line of text is meant to be treated as deleted text.
@@ -162,46 +162,46 @@
         </div>
       </div>
     </div>
-    <div class="c-card">
-      <div class="c-card-header">
+    <div class="card">
+      <div class="card-header">
         Description list alignment
       </div>
-      <div class="c-card-body">
+      <div class="card-body">
         <p>
           Align terms and descriptions horizontally by using our grid system’s
           predefined classes (or semantic mixins). For longer terms, you can
           optionally add a <code class="highlighter-rouge">.text-truncate</code>
           class to truncate the text with an ellipsis.
         </p>
-        <div class="c-bd-example">
-          <dl class="c-row">
-            <dt class="c-col-sm-3">Description lists</dt>
-            <dd class="c-col-sm-9">
+        <div class="bd-example">
+          <dl class="row">
+            <dt class="col-sm-3">Description lists</dt>
+            <dd class="col-sm-9">
               A description list is perfect for defining terms.
             </dd>
 
-            <dt class="c-col-sm-3">Euismod</dt>
-            <dd class="c-col-sm-9">
+            <dt class="col-sm-3">Euismod</dt>
+            <dd class="col-sm-9">
               <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
               <p>Donec id elit non mi porta gravida at eget metus.</p>
             </dd>
 
-            <dt class="c-col-sm-3">Malesuada porta</dt>
-            <dd class="c-col-sm-9">
+            <dt class="col-sm-3">Malesuada porta</dt>
+            <dd class="col-sm-9">
               Etiam porta sem malesuada magna mollis euismod.
             </dd>
 
-            <dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
-            <dd class="c-col-sm-9">
+            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+            <dd class="col-sm-9">
               Fusce dapibus, tellus ac cursus commodo, tortor mauris
               condimentum nibh, ut fermentum massa justo sit amet risus.
             </dd>
 
-            <dt class="c-col-sm-3">Nesting</dt>
-            <dd class="c-col-sm-9">
-              <dl class="c-row">
-                <dt class="c-col-sm-4">Nested definition list</dt>
-                <dd class="c-col-sm-8">
+            <dt class="col-sm-3">Nesting</dt>
+            <dd class="col-sm-9">
+              <dl class="row">
+                <dt class="col-sm-4">Nested definition list</dt>
+                <dd class="col-sm-8">
                   Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
                 </dd>
               </dl>
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index 34f1fad7..b265975c 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style scoped>
-.c-card-body >>> table > tbody > tr > td {
+.card-body >>> table > tbody > tr > td {
   cursor: pointer;
 }
 </style>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 5b7e187a..44e18fa2 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -10,13 +10,13 @@
           <CProgress
             variant="success"
             :value="25"
-            class="c-progress-xs c-my-3 c-mb-0"
+            class="progress-xs my-3 mb-0"
           />
           <template #header>
-            <div class="c-card-header-actions">
+            <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
-                class="card-header-action c-position-absolute"
+                class="card-header-action position-absolute"
                 style="right:10px; top:10px"
                 rel="noreferrer noopener" 
                 target="_blank"
@@ -184,7 +184,7 @@
           variant="primary"
           no-icon-padding
         >
-          <CIcon name="settings" class="c-mx-5 " width="24"/>
+          <CIcon name="settings" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
           variant="info"
           no-icon-padding
         >
-          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+          <CIcon name="laptop" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -204,15 +204,15 @@
           variant="warning"
           no-icon-padding
         >
-          <CIcon name="moon" class="c-mx-5 " width="24"/>
+          <CIcon name="moon" class="mx-5 " width="24"/>
           <template #footer>
-            <CCardFooter class="c-card-footer c-px-3 c-py-2">
+            <CCardFooter class="card-footer px-3 py-2">
               <CLink
-                class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
+                class="font-weight-bold font-xs btn-block text-muted"
                 href="https://coreui.io/"
               >
                 View more
-                <CIcon name="arrowRight" class="c-float-right" width="16"/>
+                <CIcon name="arrowRight" class="float-right" width="16"/>
               </CLink>
             </CCardFooter>
           </template>
@@ -228,7 +228,7 @@
           no-icon-padding
           link="#"
         >
-          <CIcon name="settings" class="c-mx-5 " width="24"/>
+          <CIcon name="settings" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
           no-icon-padding
           link="#"
         >
-          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+          <CIcon name="laptop" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -250,13 +250,13 @@
           no-icon-padding
           link="#"
         >
-          <CIcon name="moon" class="c-mx-5" width="24"/>
+          <CIcon name="moon" class="mx-5" width="24"/>
         </CWidgetIcon>
       </CCol>
     </CRow> -->
     <WidgetsBrand noCharts/>
     <WidgetsBrand/>
-    <CCardGroup class="c-mb-4">
+    <CCardGroup class="mb-4">
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
@@ -292,7 +292,7 @@
         <CIcon name="speedometer" height="36"/>
       </CWidgetProgressIcon>
     </CCardGroup>
-    <CCardGroup class="c-mb-4">
+    <CCardGroup class="mb-4">
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
diff --git a/src/views/widgets/WidgetsBrand.vue b/src/views/widgets/WidgetsBrand.vue
index 75a21514..876d17f7 100644
--- a/src/views/widgets/WidgetsBrand.vue
+++ b/src/views/widgets/WidgetsBrand.vue
@@ -12,11 +12,11 @@
           <CIcon
             name="socialFacebook"
             height="52"
-            class="c-my-4"
+            class="my-4"
           />
           <CChartLineSimple
             style="height:100px"
-            class="c-position-absolute"
+            class="position-absolute"
             background-color="rgba(255,255,255,.1)"
             :data-points="[65, 59, 84, 84, 51, 55, 40]"
             label="Friends"
@@ -35,11 +35,11 @@
           <CIcon
             name="socialTwitter"
             height="52"
-            class="c-my-4"
+            class="my-4"
           />
           <CChartLineSimple
             style="height:100px"
-            class="c-position-absolute"
+            class="position-absolute"
             background-color="rgba(255,255,255,.1)"
             :data-points="[1, 13, 9, 17, 34, 41, 38]"
             label="Followers"
@@ -58,11 +58,11 @@
           <CIcon
             name="socialLinkedin"
             height="52"
-            class="c-my-4"
+            class="my-4"
           />
           <CChartLineSimple
             style="height:100px"
-            class="c-position-absolute"
+            class="position-absolute"
             background-color="rgba(255,255,255,.1)"
             :data-points="[78, 81, 80, 45, 34, 12, 40]"
             label="Contracts"
@@ -81,11 +81,11 @@
           <CIcon
             name="calendar"
             height="52"
-            class="c-my-4"
+            class="my-4"
           />
           <CChartLineSimple
             style="height:100px"
-            class="c-position-absolute"
+            class="position-absolute"
             background-color="rgba(255,255,255,.1)"
             :data-points="[35, 23, 56, 22, 97, 23, 64]"
             label="Followers"
@@ -106,7 +106,7 @@
           <CIcon
             name="socialFacebook"
             height="56"
-            class="c-my-4"
+            class="my-4"
           />
         </CWidgetBrand>
        </CCol>
@@ -121,7 +121,7 @@
           <CIcon
             name="socialTwitter"
             height="56"
-            class="c-my-4"
+            class="my-4"
           />
         </CWidgetBrand>
        </CCol>
@@ -136,7 +136,7 @@
           <CIcon
             name="socialLinkedin"
             height="56"
-            class="c-my-4"
+            class="my-4"
           />
         </CWidgetBrand>
        </CCol>
@@ -151,7 +151,7 @@
           <CIcon
             name="calendar"
             height="56"
-            class="c-my-4"
+            class="my-4"
           />
         </CWidgetBrand>
       </CCol>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 4796c0a9..84355b64 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -4,8 +4,8 @@
       <CWidgetDropdown variant="primary" header="9.823" text="Members online">
         <template #default>
           <CDropdown
-            class="c-float-right"
-            variant="transparent c-p-0"
+            class="float-right"
+            variant="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>
@@ -20,7 +20,7 @@
         <template #footer>
           <CChartLineSimple
             pointed
-            class="c-px-3"
+            class="px-3"
             style="height:70px"
             :data-points="[65, 59, 84, 84, 51, 55, 40]"
             background-color="primary"
@@ -34,8 +34,8 @@
       <CWidgetDropdown variant="info" header="9.823" text="Members online">
         <template #default>
           <CDropdown
-            class="c-float-right"
-            variant="transparent c-p-0"
+            class="float-right"
+            variant="transparent p-0"
             placement="bottom-end"
             no-caret
             buttonHtml="<i class='cui-location-pin'></i>"
@@ -52,7 +52,7 @@
         <template #footer>
           <CChartLineSimple
             pointed
-            class="c-px-3"
+            class="px-3"
             style="height:70px"
             :data-points="[1, 18, 9, 17, 34, 22, 11]"
             background-color="info"
@@ -71,8 +71,8 @@
       >
         <template #default>
           <CDropdown
-            class="c-float-right"
-            variant="transparent c-p-0"
+            class="float-right"
+            variant="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>
@@ -105,8 +105,8 @@
       >
         <template #default>
           <CDropdown
-            class="c-float-right"
-            variant="transparent c-p-0"
+            class="float-right"
+            variant="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>