From ebba81fa1198f4a335b3267cfde3ad25e351e72d Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 20 May 2019 15:08:17 +0200
Subject: [PATCH] feat: change styles of base section to version 3

---
 src/views/base/Breadcrumbs.vue  |  12 +-
 src/views/base/Cards.vue        |  64 ++---
 src/views/base/Carousels.vue    |  10 +-
 src/views/base/Collapses.vue    |  10 +-
 src/views/base/Jumbotrons.vue   |  25 +-
 src/views/base/ListGroups.vue   |  60 +++--
 src/views/base/Navbars.vue      |  26 +-
 src/views/base/Navs.vue         |  14 +-
 src/views/base/Paginations.vue  |  12 +-
 src/views/base/Popovers.vue     |  20 +-
 src/views/base/ProgressBars.vue | 174 ++++++++-----
 src/views/base/Switches.vue     | 443 ++++++++++++++++----------------
 src/views/base/Tables.vue       |  14 +-
 src/views/base/Tabs.vue         |  10 +-
 src/views/base/Tooltips.vue     |  20 +-
 15 files changed, 493 insertions(+), 421 deletions(-)

diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 8bab7e12..673c4f32 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col>
           <CCard>
@@ -57,16 +57,16 @@ export default {
       items3: [{
         textHtml: 'Link',
         to: '#2',
-        activeClass: 'bg-info p-1'
+        activeClass: 'c-bg-info c-p-1'
       }, {
         textHtml: 'Active',
         to: '#3',
-        activeClass: 'bg-warning p-1',
-        addLinkClasses: 'bg-info p-1'
+        activeClass: 'c-bg-warning c-p-1',
+        addLinkClasses: 'c-bg-info c-p-1'
       },{
         textHtml: 'Classes',
         to: '#4',
-        activeClass: 'bg-danger p-1',
+        activeClass: 'c-bg-danger c-p-1',
       }]
     }
   }
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 28467f82..776ae11b 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="6" md="4">
         <CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
@@ -18,7 +18,7 @@
           <CCardHeader>
             Card with switch
             <CSwitch
-              class="float-right"
+              class="c-float-right"
               size="sm"
               shape="pill"
               variant="info"
@@ -36,7 +36,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge variant="success" class="float-right">Success</CBadge>
+            <CBadge variant="success" class="c-float-right">Success</CBadge>
           </CCardHeader>
           <CCardBody>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -47,7 +47,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill variant="danger" class="float-right">42</CBadge>
+            <CBadge pill variant="danger" class="c-float-right">42</CBadge>
           </CCardHeader>
           <CCardBody :bodyHtml="loremIpsum"/>
         </CCard>
@@ -96,40 +96,40 @@
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
+        <CCard class="c-card-accent-primary" header="Card with primary accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
+        <CCard class="c-card-accent-secondary" header="Card with secondary accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
+        <CCard class="c-card-accent-success" header="Card with success accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
+        <CCard class="c-card-accent-info" header="Card with info accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent" bodyWrapper>
+        <CCard class="c-card-accent-warning" header="Card with warning accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
+        <CCard class="c-card-accent-danger" header="Card with danger accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-primary c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -138,8 +138,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-success text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-success c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -148,8 +148,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-info text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-info c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -158,8 +158,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-warning c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -168,8 +168,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-danger c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -178,8 +178,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center" bodyWrapper>
-          <blockquote class="card-blockquote">
+        <CCard class="c-bg-secondary c-text-center" bodyWrapper>
+          <blockquote class="c-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>
@@ -190,43 +190,43 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="bg-primary" bodyWrapper>
+        <CCard headerHtml="Card title" class="c-bg-primary" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="bg-success" bodyWrapper>
+        <CCard headerHtml="Card title" class="c-bg-success" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="bg-info" bodyWrapper>
+        <CCard headerHtml="Card title" class="c-bg-info" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="bg-warning" bodyWrapper>
+        <CCard headerHtml="Card title" class="c-bg-warning" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="bg-danger" bodyWrapper>
+        <CCard headerHtml="Card title" class="c-bg-danger" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show" >
+          <CCard class="c-bg-secondary" v-if="show" >
             <CCardHeader>
               Card with header actions
-              <div class="card-header-actions">
-                <CLink href="#" class="card-header-action btn-setting" >
+              <div class="c-card-header-actions">
+                <CLink href="#" class="c-card-header-action btn-setting" >
                   <i class="icon-settings"></i>
                 </CLink>
-                <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
+                <CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
                   <i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
                 </CLink>
-                <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
+                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
                   <i class="icon-close"></i>
                 </CLink>
               </div>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 2a4b8199..89edff7d 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,6 +1,6 @@
 <template functional>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol md="12" lg="9" >
           <CCard>
@@ -19,7 +19,11 @@
               </div> -->
             </CCardHeader>
             <CCardBody>
-              <CCarousel>
+              <CCarousel
+                arrows
+                indicators
+                animate
+              >
                 <CCarouselItem
                   caption="First Slide"
                   imgSrc="https://lorempixel.com/1024/480/technics/2/"
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 90c91e82..10e9ebeb 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12" md="6">
           <CCard>
@@ -17,13 +17,13 @@
               <CButton id="collapse1" variant="primary">
                 Toggle Collapse
               </CButton>
-              <CCollapse toggler="collapse1" class="mt-2">
+              <CCollapse toggler="collapse1" class="c-mt-2">
                 <CCard bodyWrapper>
-                  <p class="card-text">Collapse contents Here</p>
+                  <p class="c-card-text">Collapse contents Here</p>
                   <CButton id="collapse2" size="sm">
                     Toggle Inner Collapse
                   </CButton>
-                  <CCollapse toggler="collapse2" class="mt-2">
+                  <CCollapse toggler="collapse2" class="c-mt-2">
                     <CCard bodyWrapper>Hello!</CCard>
                   </CCollapse>
                 </CCard>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 8adb9599..1f6c8749 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol>
           <CCard>
@@ -9,7 +9,7 @@
               <strong> Bootstrap Jumbotron </strong>
               <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="text-muted">docs</small>
+                  <small class="c-text-muted">docs</small>
                 </a>
               </div> -->
             </CCardHeader>
@@ -29,11 +29,11 @@
             </CCardHeader>
             <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="">
-                <p slot="lead" class="lead">
+                <p slot="lead" class="c-lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="my-4">
+                <hr class="c-my-4">
                 <p>
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
@@ -53,16 +53,17 @@
               <small>variants</small>
             </CCardHeader>
             <CCardBody>
-              <CJumbotron variant="info"
-                           textVariant="white"
-                           borderVariant="dark"
-                           header="Bootstrap 4">
-
-                <p slot="lead" class="lead">
+              <CJumbotron
+                variant="info"
+                textVariant="white"
+                borderVariant="dark"
+                header="Bootstrap 4"
+              >
+                <p slot="lead" class="c-lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="my-4">
+                <hr class="c-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 918f0015..9ebadfbd 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap list group </strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="text-muted">docs</small>
+              <!-- <div class="c-card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+                  <small class="c-text-muted">docs</small>
                 </a>
               </div> -->
             </CCardHeader>
@@ -105,15 +105,21 @@
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Cras justo odio
                   <CBadge variant="primary" pill>14</CBadge>
                 </CListGroupItem>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Dapibus ac facilisis in
                   <CBadge variant="primary" pill>2</CBadge>
                 </CListGroupItem>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Morbi leo risus
                   <CBadge variant="primary" pill>1</CBadge>
                 </CListGroupItem>
@@ -184,7 +190,7 @@
                     <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                     <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
                   </CListGroup>
-                  <p class="card-text mt-2">
+                  <p class="c-card-text c-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
@@ -217,38 +223,42 @@
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem href="#" active class="flex-column align-items-start">
-                  <div class="d-flex w-100 justify-content-between">
-                    <h5 class="mb-1">List group item heading</h5>
+                <CListGroupItem
+                  href="#"
+                  active
+                  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>3 days ago</small>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-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="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>
+                <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>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="text-muted">Donec id elit non mi porta.</small>
+                  <small class="c-text-muted">Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <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>
+                <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>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="text-muted">Donec id elit non mi porta.</small>
+                  <small class="c-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 d899230d..8765b9bf 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <!-- <CCard>
         <CNavbar toggleable="md" light variant="light">
           <CNavbarToggle class="hehe" @click="test2 = !test2"/>
@@ -34,9 +34,9 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navbar </strong>
-          <!-- <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+          <!-- <div class="c-card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
@@ -56,14 +56,14 @@
               </CNavbarNav>
 
               <!-- Right aligned nav items -->
-              <CNavbarNav class="ml-auto">
+              <CNavbarNav class="c-ml-auto">
                 <CForm inline>
                   <CFormInput
-                    class="mr-sm-2"
+                    class="c-mr-sm-2"
                     placeholder="Search"
                     size="sm"
                   />
-                  <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
+                  <CButton size="sm" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
                 </CForm>
 
                 <CDropdown
@@ -99,7 +99,7 @@
           <!-- Image and text -->
           <CNavbar variant="faded" light>
             <CNavbarBrand href="#">
-              <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
+              <img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
               BootstrapVue
             </CNavbarBrand>
           </CNavbar>
@@ -116,7 +116,7 @@
             <CNavbarBrand>BootstrapVue</CNavbarBrand>
             <CCollapse :show="navbarText" navbar>
               <CNavbarNav>
-                <span class="navbar-text">Navbar text</span>
+                <span class="c-navbar-text">Navbar text</span>
               </CNavbarNav>
             </CCollapse>
           </CNavbar>
@@ -167,11 +167,11 @@
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
-                class="mr-sm-2"
+                class="c-mr-sm-2"
                 placeholder="Search"
                 size="sm"
               />
-              <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
+              <CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
             </CForm>
           </CNavbar>
         </CCardBody>
@@ -185,7 +185,7 @@
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
-                class="mr-sm-2"
+                class="c-mr-sm-2"
                 placeholder="Username"
               />
             </CForm>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 5be50db6..2efc0b7f 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
             <CLink
               href="#"
-              class="card-header-action"
+              class="c-card-header-action"
             >
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </CLink>
           </div> -->
         </CCardHeader>
@@ -124,7 +124,7 @@
                        placement="bottom-end"
                        buttonContent="Dropdown"
             >
-              <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
+              <!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
               <CDropdownItem>one</CDropdownItem>
               <CDropdownItem>two</CDropdownItem>
               <CDropdownDivider/>
@@ -141,7 +141,7 @@
         </CCardHeader>
         <CCardBody>
           <CRow>
-            <CCol col="3" class="m-0">
+            <CCol col="3" class="c-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 484f9093..bafce39d 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Pagination</strong>
-          <!-- <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+          <!-- <div class="c-card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
@@ -26,7 +26,7 @@
             :pages="10"/>
           <br>
 
-          <div class="d-sm-down-none">
+          <div class="c-d-sm-down-none">
             <h6>Large</h6>
             <CPagination
               size="lg"
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 4c31bc08..6cdc04b1 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Popovers</strong>
-          <!-- <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+          <!-- <div class="c-card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CRow>
             <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -27,7 +27,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -40,7 +40,7 @@
               </div>
             </CCol>
             <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover.click="{
@@ -62,11 +62,11 @@
           <strong> Popovers </strong>
           <small>placement</small>
         </CCardHeader>
-        <CCardBody class="my-3">
+        <CCardBody class="c-my-3">
           <CRow>
             <CCol
               md="4"
-              class="py-4 text-center"
+              class="c-py-4 c-text-center"
               v-for="placement in placements"
               :key="placement"
             >
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index 6752bb03..0ad4d136 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Progress</strong>
-          <!-- <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+          <!-- <div class="c-card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CProgress :value="counter" :max="max" show-progress animated></CProgress>
-          <CProgress class="mt-1" :max="max" show-value>
+          <CProgress class="c-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"/>
           </CProgress>
-          <CButton class="mt-4" @click="clicked">Click me</CButton>
+          <CButton class="c-mt-4" @click="clicked">Click me</CButton>
         </CCardBody>
       </CCard>
       <CCard>
@@ -27,68 +27,97 @@
         </CCardHeader>
         <CCardBody>
           <h6>No label</h6>
-          <CProgress :value="value" :max="max2" class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" class="c-mb-3"/>
           <h6>Value label</h6>
-          <CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
           <h6>Progress label</h6>
-          <CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
           <h6>Value label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
           <h6>Progress label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>width</small>
         </CCardHeader>
         <CCardBody>
           <h6>Default width</h6>
-          <CProgress :value="value3" class="mb-3"></CProgress>
+          <CProgress :value="value3" class="c-mb-3"/>
           <h6>Custom widths</h6>
-          <CProgress :value="value3" class="w-75 mb-2"></CProgress>
-          <CProgress :value="value3" class="w-50 mb-2"></CProgress>
-          <CProgress :value="value3" class="w-25"></CProgress>
+          <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"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>height</small>
         </CCardHeader>
         <CCardBody>
           <h6>Default height</h6>
-          <CProgress :value="value3" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value3" show-progress class="c-mb-3"/>
           <h6>Custom heights</h6>
-          <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
-          <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
-          <CProgress height="2px" :value="value3"></CProgress>
+          <CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
+          <CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
+          <CProgress height="2px" :value="value3"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>variants</small>
         </CCardHeader>
         <CCardBody>
-          <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"
-                          :key="bar.variant"
-              ></CProgress>
+          <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">
+              <CProgress
+                :value="bar.value"
+                :variant="bar.variant"
+                :key="bar.variant"
+              />
             </div>
           </div>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>striped</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
-          <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
-          <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
-          <CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
+          <CProgress
+            :value="25"
+            variant="success"
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="50"
+            variant="info"
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="75"
+            variant="warning"
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="100"
+            variant="danger"
+            :striped="striped"
+            class="c-mb-2"
+          />
           <CButton variant="secondary" @click="striped = !striped">
             {{ striped ? 'Remove' : 'Add'}} Striped
           </CButton>
@@ -96,13 +125,38 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>animated</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
-          <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
-          <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
-          <CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
+          <CProgress
+            :value="25"
+            variant="success"
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="50"
+            variant="info"
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="75"
+            variant="warning"
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="100"
+            variant="danger"
+            :animated="animate"
+            class="c-mb-3"
+          />
           <CButton variant="secondary" @click="animate = !animate">
             {{ animate ? 'Stop' : 'Start'}} Animation
           </CButton>
@@ -110,28 +164,30 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>multiple bars</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :max="max3" class="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          <CProgress :max="max3" class="c-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="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          <CProgress show-progress :max="max3" class="c-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="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          <CProgress show-value striped :max="max3" class="c-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="mb-3">
-            <CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
-            <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
-            <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
+          <CProgress :max="max3" class="c-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/>
           </CProgress>
         </CCardBody>
       </CCard>
@@ -168,8 +224,8 @@ export default {
   methods: {
     clicked () {
       this.counter = Math.random() * this.max
-      console.log('Change progress to ' +
-          Math.round(this.counter * 100) / 100)
+      // console.log('Change progress to ' +
+      //     Math.round(this.counter * 100) / 100)
     }
   },
   mounted () {
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 2cd64b5e..6ce6dcce 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol xs="12" md="6">
         <CCard v-if="true">
           <CCardHeader>
             <h5>
                Radio switches
-              <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
-              <CBadge variant="danger" class="float-right">NEW</CBadge>
+              <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
+              <CBadge variant="danger" class="c-float-right">NEW</CBadge>
             </h5>
           </CCardHeader>
           <CCardBody>
@@ -19,9 +19,9 @@
               name="lg"
               required
             /> -->
-            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
+            <!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
             <CSwitch
-              class="mx-1"
+              class="c-mx-1"
               :key="key"
               :variant="variant"
               shape="3d"
@@ -46,20 +46,21 @@
           </CCardHeader>
           <CCardBody>
             <CSwitch
-              class="mx-1"
+              class="c-mx-1"
               variant="primary"
               name="switch1"
               :checked.sync="checker"
               trueValue="yes"
               falseValue="no"
             />
-            <CSwitch 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="variant"
+              checked
+              :key="key"
+              v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
             />
-            <CSwitch class="mx-1" variant="primary" disabled />
+            <CSwitch class="c-mx-1" variant="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -69,15 +70,15 @@
             Switch pills
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -87,15 +88,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -105,15 +106,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -123,15 +124,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -141,15 +142,15 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -159,15 +160,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -177,15 +178,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -195,15 +196,15 @@
             Switch <small><code>outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -213,15 +214,15 @@
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -231,15 +232,15 @@
             Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -249,15 +250,15 @@
             Switch <small><code>outline="alt"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -267,15 +268,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -285,15 +286,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -303,15 +304,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -321,15 +322,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -339,15 +340,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -357,15 +358,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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 />
+            <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 />
           </CCardBody>
         </CCard>
       </CCol>
@@ -376,15 +377,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>shape
       </CCol>
@@ -394,15 +395,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -412,15 +413,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -430,15 +431,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -448,15 +449,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -466,15 +467,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <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" />
+            <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" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -484,11 +485,11 @@
           <CCardHeader>
             Sizes
           </CCardHeader>
-          <CCardBody class="p-0">
+          <CCardBody class="c-p-0">
             <CTable
               hover
               striped
-              class="table-align-middle mb-0"
+              class="c-table-align-middle c-mb-0"
               :items="items"
               :fields="fields"
               noSorting
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 9f470b72..21841777 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="12">
         <CCard headerHtml="CTable power presentation" bodyWrapper>
@@ -22,10 +22,10 @@
               <td
                 @click="toggleDetails(index)"
                 style="cursor:pointer"
-                class="text-center"
+                class="c-text-center"
               >
                 <i
-                  class="icons font-lg d-block cui-chevron-right"
+                  class="c-icons c-font-lg c-d-block cui-chevron-right"
                   style="transition: transform 0.4s"
                   :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
                 ></i>
@@ -39,7 +39,7 @@
               </td>
             </template>
             <template #show_details="{item, index}">
-              <td class="py-2">
+              <td class="c-py-2">
                 <CButton
                   variant="outline-primary"
                   square
@@ -173,11 +173,11 @@ const items = [
   {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: 'table-success'},
+  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-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: 'table-info'},
+  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-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'},
@@ -189,7 +189,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: 'table-danger'},
+  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-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 0e636d7b..b301bfcf 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol xs="12" lg="6">
         <CCard>
@@ -7,7 +7,7 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="mt-1">
+            <CTabs addTabClasses="c-mt-1">
               <CTab titleHtml="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -41,7 +41,7 @@
           <CCardBody>
             <CTabs
               pills
-              addNavClasses="mb-3"
+              addNavClasses="c-mb-3"
             >
               <CTab titleHtml="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -74,7 +74,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="mt-1">
+            <CTabs addTabClasses="c-mt-1">
               <CTab active>
                 <template slot="title">
                   <i class="icon-calculator"></i>
@@ -116,7 +116,7 @@
           </CCardHeader>
           <CCardBody>
             <CTabs
-              addTabClasses="mt-1"
+              addTabClasses="c-mt-1"
               card
             >
               <CTab active>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index f74f39af..a62cf753 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,35 +1,35 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Tooltips </strong>
           <small><code>v-c-tooltip</code> directive</small>
-          <!-- <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+          <!-- <div class="c-card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CRow>
             <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
                   Hover Me
                 </CButton>
               </div>
             </CCol>
             <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip="{content: 'I start open!', active:true }">
                   Hover me
                 </CButton>
               </div>
             </CCol>
             <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip.click="
                   'I am showing on click and hiding on click outside tooltip!'
                 ">
@@ -47,11 +47,11 @@
           <small>placement</small>
         </CCardHeader>
         <CCardBody>
-          <div class="my-3">
+          <div class="c-my-3">
             <CRow>
               <CCol
                 md="4"
-                class="py-4 text-center"
+                class="c-py-4 c-text-center"
                 v-for="placement in placements"
                 :key="placement"
               >