From 11438806084459dc78278cd5cfda09519145f41c Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 23 Sep 2019 14:53:04 +0200
Subject: [PATCH] test: update tests and snapshots

---
 tests/unit/App.spec.js                        |    2 +-
 tests/unit/containers/TheContainer.spec.js    |    2 +-
 .../containers/TheHeaderDropdownAccnt.spec.js |    2 +-
 tests/unit/containers/TheSidebar.spec.js      |    2 +-
 .../DefaultContainer.spec.js.snap             |   31 -
 .../__snapshots__/TheContainer.spec.js.snap   |   33 +
 .../__snapshots__/TheFooter.spec.js.snap      |    8 +-
 .../__snapshots__/TheHeader.spec.js.snap      |  155 +-
 ...ap => TheHeaderDropdownAccnt.spec.js.snap} |  103 +-
 .../__snapshots__/TheSidebar.spec.js.snap     |   23 +-
 tests/unit/views/Charts.spec.js               |    4 +-
 tests/unit/views/Dashboard.spec.js            |    2 +-
 .../views/__snapshots__/Charts.spec.js.snap   |    4 +-
 .../__snapshots__/Dashboard.spec.js.snap      |  280 +-
 tests/unit/views/base/Breadcrumbs.spec.js     |    2 +-
 tests/unit/views/base/Cards.spec.js           |    2 +-
 tests/unit/views/base/Carousels.spec.js       |    2 +-
 tests/unit/views/base/Collapses.spec.js       |    2 +-
 tests/unit/views/base/Forms.spec.js           |    2 +-
 tests/unit/views/base/Jumbotrons.spec.js      |    2 +-
 tests/unit/views/base/ListGroups.spec.js      |    2 +-
 tests/unit/views/base/Navbars.spec.js         |    2 +-
 tests/unit/views/base/Navs.spec.js            |    2 +-
 tests/unit/views/base/Paginations.spec.js     |    2 +-
 tests/unit/views/base/Popovers.spec.js        |    2 +-
 tests/unit/views/base/ProgressBars.spec.js    |    2 +-
 tests/unit/views/base/Switches.spec.js        |    2 +-
 tests/unit/views/base/Table.spec.js           |    2 +-
 tests/unit/views/base/Tables.spec.js          |    2 +-
 tests/unit/views/base/Tabs.spec.js            |    2 +-
 tests/unit/views/base/Tooltips.spec.js        |    2 +-
 .../__snapshots__/Breadcrumbs.spec.js.snap    |  322 +-
 .../base/__snapshots__/Cards.spec.js.snap     |  256 +-
 .../base/__snapshots__/Carousels.spec.js.snap |  234 +-
 .../base/__snapshots__/Collapses.spec.js.snap |  182 +-
 .../__snapshots__/Jumbotrons.spec.js.snap     |  382 +-
 .../__snapshots__/ListGroups.spec.js.snap     | 2330 ++++----
 .../base/__snapshots__/Navbars.spec.js.snap   | 1070 ++--
 .../base/__snapshots__/Navs.spec.js.snap      | 1246 +++--
 .../__snapshots__/Paginations.spec.js.snap    |  328 +-
 .../__snapshots__/ProgressBars.spec.js.snap   | 1411 ++---
 .../base/__snapshots__/Switches.spec.js.snap  |  464 +-
 .../base/__snapshots__/Tables.spec.js.snap    |    8 +-
 .../base/__snapshots__/Tabs.spec.js.snap      |   85 +-
 .../base/__snapshots__/Tooltips.spec.js.snap  |  714 ++-
 tests/unit/views/buttons/BrandButtons.spec.js |    2 +-
 .../views/buttons/ButtonDropdowns.spec.js     |    2 +-
 tests/unit/views/buttons/ButtonGroups.spec.js |    2 +-
 .../views/buttons/StandardButtons.spec.js     |    2 +-
 .../__snapshots__/BrandButtons.spec.js.snap   | 4709 ++++++++---------
 .../ButtonDropdowns.spec.js.snap              | 2446 +++++----
 .../__snapshots__/ButtonGroups.spec.js.snap   | 1814 ++++---
 .../StandardButtons.spec.js.snap              | 1074 ++--
 tests/unit/views/icons/Brands.spec.js         |    2 +-
 tests/unit/views/icons/CoreUIIcons.spec.js    |    2 +-
 tests/unit/views/icons/Flags.spec.js          |    2 +-
 .../icons/__snapshots__/Brands.spec.js.snap   |  864 +--
 .../__snapshots__/CoreUIIcons.spec.js.snap    |  212 +-
 .../icons/__snapshots__/Flags.spec.js.snap    |  506 +-
 tests/unit/views/notifications/Alerts.spec.js |    2 +-
 tests/unit/views/notifications/Badges.spec.js |    2 +-
 tests/unit/views/notifications/Modals.spec.js |    2 +-
 .../__snapshots__/Alerts.spec.js.snap         |  958 ++--
 .../__snapshots__/Badges.spec.js.snap         |  662 ++-
 .../__snapshots__/Modals.spec.js.snap         |   58 +-
 tests/unit/views/pages/Login.spec.js          |    2 +-
 tests/unit/views/pages/Page404.spec.js        |    2 +-
 tests/unit/views/pages/Page500.spec.js        |    2 +-
 tests/unit/views/pages/Register.spec.js       |    2 +-
 .../pages/__snapshots__/Login.spec.js.snap    |   30 +-
 .../pages/__snapshots__/Page404.spec.js.snap  |   16 +-
 .../pages/__snapshots__/Page500.spec.js.snap  |   14 +-
 .../pages/__snapshots__/Register.spec.js.snap |   26 +-
 tests/unit/views/theme/Colors.spec.js         |    2 +-
 tests/unit/views/theme/Typography.spec.js     |    2 +-
 .../theme/__snapshots__/Colors.spec.js.snap   |  798 +--
 .../__snapshots__/Typography.spec.js.snap     |  118 +-
 tests/unit/views/users/User.spec.js           |    2 +-
 tests/unit/views/users/Users.spec.js          |    2 +-
 .../users/__snapshots__/User.spec.js.snap     |    4 +-
 tests/unit/views/widgets/Widgets.spec.js      |    2 +-
 .../__snapshots__/Widgets.spec.js.snap        |   12 +-
 82 files changed, 11751 insertions(+), 12325 deletions(-)
 delete mode 100644 tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
 create mode 100644 tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
 rename tests/unit/containers/__snapshots__/{DefaultHeaderDropdownAccnt.spec.js.snap => TheHeaderDropdownAccnt.spec.js.snap} (63%)

diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
index d9426795..4bbd794d 100644
--- a/tests/unit/App.spec.js
+++ b/tests/unit/App.spec.js
@@ -12,7 +12,7 @@ localVue.use(CoreuiVue)
 
 describe('App.vue', () => {
   it('has a name', () => {
-    expect(App.name).toMatch('app')
+    expect(App.name).toBe('App')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(App, {
diff --git a/tests/unit/containers/TheContainer.spec.js b/tests/unit/containers/TheContainer.spec.js
index 4643e3db..9c52be80 100644
--- a/tests/unit/containers/TheContainer.spec.js
+++ b/tests/unit/containers/TheContainer.spec.js
@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('TheContainer.vue', () => {
   it('has a name', () => {
-    expect(TheContainer.name).toMatch('full')
+    expect(TheContainer.name).toBe('TheContainer')
   })
   test('renders correctly', () => {
     const wrapper = shallowMount(TheContainer, {
diff --git a/tests/unit/containers/TheHeaderDropdownAccnt.spec.js b/tests/unit/containers/TheHeaderDropdownAccnt.spec.js
index 56cb80d5..911c12f9 100644
--- a/tests/unit/containers/TheHeaderDropdownAccnt.spec.js
+++ b/tests/unit/containers/TheHeaderDropdownAccnt.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('TheHeaderDropdownAccnt.vue', () => {
   it('has a name', () => {
-    expect(TheHeaderDropdownAccnt.name).toMatch('TheHeaderDropdownAccnt')
+    expect(TheHeaderDropdownAccnt.name).toBe('TheHeaderDropdownAccnt')
   })
   it('has a created hook', () => {
     expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
diff --git a/tests/unit/containers/TheSidebar.spec.js b/tests/unit/containers/TheSidebar.spec.js
index 71d2540f..a899d59f 100644
--- a/tests/unit/containers/TheSidebar.spec.js
+++ b/tests/unit/containers/TheSidebar.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('TheSidebar.vue', () => {
   it('has a name', () => {
-    expect(TheSidebar.name).toMatch('TheSidebar')
+    expect(TheSidebar.name).toBe('TheSidebar')
   })
   test('renders correctly', () => {
     const wrapper = shallowMount(TheSidebar)
diff --git a/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap b/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
deleted file mode 100644
index 58ff7edd..00000000
--- a/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DefaultContainer.vue renders correctly 1`] = `
-<div
-  class="c-app c-default-layout"
->
-  <theheader-stub />
-   
-  <thesidebar-stub />
-   
-  <div
-    class="c-body"
-  >
-    <main
-      class="c-main"
-    >
-      <cbreadcrumbrouter-stub />
-       
-      <ccontainer-stub
-        fluid="true"
-      >
-        <router-view-stub
-          name="fade"
-        />
-      </ccontainer-stub>
-    </main>
-  </div>
-   
-  <thefooter-stub />
-</div>
-`;
diff --git a/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap b/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
new file mode 100644
index 00000000..401e82a2
--- /dev/null
+++ b/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TheContainer.vue renders correctly 1`] = `
+<div
+  class="c-app"
+>
+  <thesidebar-stub />
+   
+  <div
+    class="c-wrapper"
+  >
+    <theheader-stub />
+     
+    <div
+      class="c-body"
+    >
+      <main
+        class="c-main"
+      >
+        <ccontainer-stub
+          fluid="true"
+        >
+          <router-view-stub
+            name="fade"
+          />
+        </ccontainer-stub>
+      </main>
+    </div>
+     
+    <thefooter-stub />
+  </div>
+</div>
+`;
diff --git a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
index 409aa72c..89744c07 100644
--- a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
@@ -10,17 +10,17 @@ exports[`TheFooter.vue renders correctly 1`] = `
     </a>
      
     <span
-      class="c-ml-1"
+      class="ml-1"
     >
-      © 2018 creativeLabs.
+      © 2019 creativeLabs.
     </span>
   </div>
    
   <div
-    class="c-ml-auto"
+    class="ml-auto"
   >
     <span
-      class="c-mr-1"
+      class="mr-1"
     >
       Powered by
     </span>
diff --git a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
index 7a640174..b6e032db 100644
--- a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
@@ -3,153 +3,82 @@
 exports[`TheHeader.vue renders correctly 1`] = `
 <cheader-stub
   fixed="true"
+  light=""
+  with-subheader=""
 >
   <csidebartoggler-stub
-    class="c-header-toggler c-d-lg-none c-mr-auto"
+    class="c-header-toggler ml-3"
   />
    
-  <clink-stub
-    activeclass="c-active"
-    class="c-header-brand,[object Object]"
-    event="click"
-    exactactiveclass="c-active"
-    routertag="a"
-    tag="span"
-    target="_self"
-    to="/"
-  >
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-minimized c-d-md-down-none"
-      height="30"
-      src="img/brand/sygnet.svg"
-      style="display: none;"
-      width="30"
-    />
-     
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-full c-d-md-down-none"
-      height="25"
-      src="img/brand/logo.svg"
-      width="89"
-    />
-     
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-full c-d-lg-none"
-      height="25"
-      src="img/brand/logo.svg"
-      width="89"
-    />
-  </clink-stub>
-   
-  <csidebartoggler-stub
-    class="c-header-toggler c-d-md-down-none"
+  <img
+    alt="CoreUI Logo"
+    class="c-header-brand mx-auto d-lg-none"
+    height="46"
+    src="img/brand/coreui-base.svg"
+    width="97"
   />
    
   <ul
-    class="c-header-nav c-d-md-down-none"
+    class="c-header-nav d-md-down-none mr-auto"
   >
-    <cnavitem-stub
-      activeclass="c-active"
-      class="c-px-3"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="px-3"
       to="/dashboard"
     >
       Dashboard
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
-      activeclass="c-active"
-      class="c-px-3"
-      event="click"
-      exact="true"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="px-3"
+      exact=""
       to="/users"
     >
       Users
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
-      activeclass="c-active"
-      class="c-px-3"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="px-3"
     >
       Settings
-    </cnavitem-stub>
+    </cheadernavitem>
   </ul>
    
-  <cnav-stub
-    class="c-header-nav c-ml-auto"
+  <ul
+    class="c-header-nav mr-4"
   >
-    <cnavitem-stub
-      activeclass="c-active"
-      class="c-d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="d-md-down-none mx-2"
     >
       <i
         class="cui-bell"
       />
-       
-      <cbadge-stub
-        activeclass="c-active"
-        event="click"
-        exactactiveclass="c-active"
-        pill="true"
-        routertag="a"
-        tag="span"
-        target="_self"
-        variant="danger"
-      >
-        5
-      </cbadge-stub>
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
-      activeclass="c-active"
-      class="c-d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="d-md-down-none mx-2"
     >
       <i
         class="cui-list"
       />
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
-      activeclass="c-active"
-      class="d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
+    <cheadernavitem
+      class="d-md-down-none mx-2"
     >
       <i
-        class="cui-location-pin"
+        class="cui-envelope-open"
       />
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <defaultheaderdropdownaccnt-stub />
-  </cnav-stub>
+    <theheaderdropdownaccnt-stub />
+  </ul>
+   
+  <div
+    class="c-subheader px-3"
+  >
+    <cbreadcrumbrouter-stub
+      class="border-0"
+    />
+  </div>
 </cheader-stub>
 `;
diff --git a/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
similarity index 63%
rename from tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
rename to tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
index 7bb8d28d..8dc62bfd 100644
--- a/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
+exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
 <cdropdown-stub
-  addmenuclasses="c-dropdown-menu-right"
+  addmenuclasses="pt-0"
+  class="c-header-nav-items"
   nav="true"
   nocaret="true"
-  nopopper="true"
-  placement="bottom-start"
+  placement="bottom-end"
   togglertext="Dropdown"
 >
    
   <cdropdownheader-stub
-    class="c-text-center"
+    class="text-center bg-light"
     tag="div"
   >
     <strong>
@@ -20,22 +20,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownheader-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-bell"
+      class="cui-bell mr-2"
     />
      Updates
     
     <cbadge-stub
-      activeclass="c-active"
-      additional-classes="hehe"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -46,21 +46,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-envelope-open"
+      class="cui-envelope-open mr-2"
     />
      Messages
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -71,21 +72,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-task"
+      class="cui-task mr-2"
     />
      Tasks
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -96,21 +98,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-comment-square"
+      class="cui-comment-square mr-2"
     />
      Comments
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -121,7 +124,7 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownheader-stub
-    class="c-text-center"
+    class="text-center bg-light"
     tag="div"
   >
     <strong>
@@ -130,49 +133,50 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownheader-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-user"
+      class="cui-user mr-2"
     />
      Profile
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-wrench"
+      class="cui-wrench mr-2"
     />
      Settings
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-dollar"
+      class="cui-dollar mr-2"
     />
      Payments
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -183,21 +187,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-file"
+      class="cui-file mr-2"
     />
      Projects
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -212,28 +217,28 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   />
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-shield"
+      class="cui-shield mr-2"
     />
      Lock Account
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-lock-locked"
+      class="cui-lock-locked mr-2"
     />
      Logout
   
diff --git a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
index ecbbf379..21609c78 100644
--- a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
@@ -3,25 +3,22 @@
 exports[`TheSidebar.vue renders correctly 1`] = `
 <csidebar-stub
   breakpoint="lg"
-  dropdownbehaviors="closeOnInactiveRoute"
+  dropdownstateonroutechange="openActive"
   fixed="true"
   show="true"
 >
-  <csidebarheader-stub />
+  <csidebarbrand
+    fullsrc="img/brand/coreui-base-white.svg"
+    minimizedsrc="img/brand/coreui-signet-white.svg"
+    wrappedinlink="[object Object]"
+  />
    
-  <csidebarform-stub />
-   
-  <csidebarnav-stub>
-    <ctreegenerator-stub
-      components="[object Object]"
-      items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-    />
-  </csidebarnav-stub>
-   
-  <csidebarfooter-stub />
+  <crenderfunction-stub
+    contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]"
+  />
    
   <csidebarminimizer-stub
-    class="c-d-md-down-none"
+    class="d-md-down-none"
   />
 </csidebar-stub>
 `;
diff --git a/tests/unit/views/Charts.spec.js b/tests/unit/views/Charts.spec.js
index 5ab4ef31..94113a2a 100644
--- a/tests/unit/views/Charts.spec.js
+++ b/tests/unit/views/Charts.spec.js
@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils';
 import CoreuiVue from '@coreui/vue'
-import Charts from '@/views/Charts'
+import Charts from '@/views/charts/Charts'
 
 Vue.use(CoreuiVue)
 
 describe('Charts.vue', () => {
   it('has a name', () => {
-    expect(Charts.name).toMatch('Charts')
+    expect(Charts.name).toBe('Charts')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Charts)
diff --git a/tests/unit/views/Dashboard.spec.js b/tests/unit/views/Dashboard.spec.js
index 07578354..3388255d 100644
--- a/tests/unit/views/Dashboard.spec.js
+++ b/tests/unit/views/Dashboard.spec.js
@@ -11,7 +11,7 @@ Vue.use(CIconPlugin, iconsSet)
 
 describe('Dashboard.vue', () => {
   it('has a name', () => {
-    expect(Dashboard.name).toMatch('Dashboard')
+    expect(Dashboard.name).toBe('Dashboard')
   })
   it('has a created hook', () => {
     expect(typeof Dashboard.data).toMatch('function')
diff --git a/tests/unit/views/__snapshots__/Charts.spec.js.snap b/tests/unit/views/__snapshots__/Charts.spec.js.snap
index 71f52200..c0e6038a 100644
--- a/tests/unit/views/__snapshots__/Charts.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Charts.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`Charts.vue renders correctly 1`] = `
 <div>
   <ccardgroup-stub
-    class="c-card-columns c-cols-2"
+    class="card-columns cols-2"
     columns="true"
   >
     <ccard-stub
@@ -18,7 +18,7 @@ exports[`Charts.vue renders correctly 1`] = `
         Line Chart
         
         <div
-          class="c-card-header-actions"
+          class="card-header-actions"
         >
           <a
             class="card-header-action"
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
index 227d4225..f76d8198 100644
--- a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -18,29 +18,29 @@ exports[`Dashboard.vue renders correctly 1`] = `
           tag="div"
         >
           <h4
-            class="c-card-title c-mb-0"
+            class="card-title mb-0"
             id="traffic"
           >
             Traffic
           </h4>
            
           <div
-            class="c-small c-text-muted"
+            class="small text-muted"
           >
             November 2017
           </div>
         </ccol-stub>
          
         <ccol-stub
-          class="c-d-none c-d-md-block"
+          class="d-none d-md-block"
           sm="7"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
-            class="c-float-right"
+            activeclass="active"
+            class="float-right"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -52,13 +52,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbuttongroup-stub
-            class="c-float-right c-mr-3"
+            class="float-right mr-3"
           >
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mx-0"
+              activeclass="active"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -69,10 +69,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
             
             </cbutton-stub>
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mx-0"
+              activeclass="active"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               pressed="true"
               routertag="a"
               target="_self"
@@ -84,10 +84,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
             
             </cbutton-stub>
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mx-0"
+              activeclass="active"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -111,16 +111,16 @@ exports[`Dashboard.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-text-center"
+        class="text-center"
       >
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Visits
           </div>
@@ -130,7 +130,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="40"
@@ -139,13 +139,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          class="mb-sm-2 mb-0 d-md-down-none"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Unique
           </div>
@@ -155,7 +155,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="20"
@@ -164,13 +164,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Pageviews
           </div>
@@ -180,7 +180,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="60"
@@ -189,13 +189,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             New Users
           </div>
@@ -205,7 +205,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="80"
@@ -214,13 +214,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          class="mb-sm-2 mb-0 d-md-down-none"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Bounce Rate
           </div>
@@ -230,7 +230,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="40"
@@ -268,14 +268,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="info"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     New Clients
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     9,123
                   </strong>
@@ -290,14 +290,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="danger"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Recurring Clients
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     22,643
                   </strong>
@@ -306,17 +306,17 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </crow-stub>
              
             <hr
-              class="c-mt-0"
+              class="mt-0"
             />
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Monday
@@ -325,10 +325,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="34"
@@ -336,7 +336,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="78"
@@ -346,13 +346,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Tuesday
@@ -361,10 +361,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="56"
@@ -372,7 +372,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="94"
@@ -382,13 +382,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Wednesday
@@ -397,10 +397,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="12"
@@ -408,7 +408,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="67"
@@ -418,13 +418,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Thursday
@@ -433,10 +433,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="43"
@@ -444,7 +444,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="91"
@@ -454,13 +454,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Friday
@@ -469,10 +469,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="22"
@@ -480,7 +480,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="73"
@@ -490,13 +490,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Saturday
@@ -505,10 +505,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="53"
@@ -516,7 +516,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="82"
@@ -526,13 +526,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Sunday
@@ -541,10 +541,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="9"
@@ -552,7 +552,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="69"
@@ -562,14 +562,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-legend c-text-center"
+              class="legend text-center"
             >
               <small>
                 <sup>
                   <cbadge-stub
-                    activeclass="c-active"
+                    activeclass="active"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     pill="true"
                     routertag="a"
                     tag="span"
@@ -585,9 +585,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 
                 <sup>
                   <cbadge-stub
-                    activeclass="c-active"
+                    activeclass="active"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     pill="true"
                     routertag="a"
                     tag="span"
@@ -618,14 +618,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="warning"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Pageviews
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     78,623
                   </strong>
@@ -640,14 +640,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="success"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Organic
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     49,123
                   </strong>
@@ -656,40 +656,40 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </crow-stub>
              
             <hr
-              class="c-mt-0"
+              class="mt-0"
             />
              
             <ul
-              class="c-horizontal-bars c-type-2"
+              class="horizontal-bars type-2"
             >
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-user c-progress-group-icon"
+                    class="cui-user progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Male
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     43%
                   </span>
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="43"
@@ -699,33 +699,33 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group c-mb-5"
+                class="progress-group mb-5"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-user-female c-progress-group-icon"
+                    class="cui-user-female progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Female
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     37%
                   </span>
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="37"
@@ -735,23 +735,23 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-globe c-progress-group-icon"
+                    class="cui-globe progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Organic Search
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     191,235
@@ -764,10 +764,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="56"
@@ -777,30 +777,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialFacebook"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Facebook
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     51,223 
                     <span
-                      class="c-text-muted small"
+                      class="text-muted small"
                     >
                       (15%)
                     </span>
@@ -808,10 +808,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="15"
@@ -821,30 +821,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialTwitter"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Twitter
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     37,564 
                     <span
-                      class="c-text-muted c-small"
+                      class="text-muted small"
                     >
                       (11%)
                     </span>
@@ -852,10 +852,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="11"
@@ -865,30 +865,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialLinkedin"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     LinkedIn
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     27,319 
                     <span
-                      class="c-text-muted small"
+                      class="text-muted small"
                     >
                        (8%)
                     </span>
@@ -896,10 +896,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="8"
@@ -909,13 +909,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-divider c-text-center"
+                class="divider text-center"
               >
                 <cbutton-stub
-                  activeclass="c-active"
-                  class="c-text-muted"
+                  activeclass="active"
+                  class="text-muted"
                   event="click"
-                  exactactiveclass="c-active"
+                  exactactiveclass="active"
                   routertag="a"
                   size="sm"
                   target="_self"
@@ -934,7 +934,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
         <br />
          
         <ctable-stub
-          class="c-mb-0 c-table-outline"
+          class="mb-0 table-outline"
           defaultsorter="[object Object]"
           fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           head-variant="light"
diff --git a/tests/unit/views/base/Breadcrumbs.spec.js b/tests/unit/views/base/Breadcrumbs.spec.js
index 76e6249f..7b5224fd 100644
--- a/tests/unit/views/base/Breadcrumbs.spec.js
+++ b/tests/unit/views/base/Breadcrumbs.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Breadcrumbs.vue', () => {
   it('has a name', () => {
-    expect(Breadcrumbs.name).toMatch('breadcrumbs')
+    expect(Breadcrumbs.name).toBe('Breadcrumbs')
   })
   it('has a created hook', () => {
     expect(typeof Breadcrumbs.data).toMatch('function')
diff --git a/tests/unit/views/base/Cards.spec.js b/tests/unit/views/base/Cards.spec.js
index 2f1aae73..8eee76f3 100644
--- a/tests/unit/views/base/Cards.spec.js
+++ b/tests/unit/views/base/Cards.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Cards.vue', () => {
   it('has a name', () => {
-    expect(Cards.name).toMatch('cards')
+    expect(Cards.name).toBe('Cards')
   })
   it('has a created hook', () => {
     expect(typeof Cards.data).toMatch('function')
diff --git a/tests/unit/views/base/Carousels.spec.js b/tests/unit/views/base/Carousels.spec.js
index 2751a04b..48f2f3d1 100644
--- a/tests/unit/views/base/Carousels.spec.js
+++ b/tests/unit/views/base/Carousels.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Carousels.vue', () => {
   it('has a name', () => {
-    expect(Carousels.name).toMatch('carousels')
+    expect(Carousels.name).toBe('Carousels')
   })
   it('is Carousels', () => {
     const wrapper = shallowMount(Carousels)
diff --git a/tests/unit/views/base/Collapses.spec.js b/tests/unit/views/base/Collapses.spec.js
index 01306a60..017727df 100644
--- a/tests/unit/views/base/Collapses.spec.js
+++ b/tests/unit/views/base/Collapses.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Collapses.vue', () => {
   it('has a name', () => {
-    expect(Collapses.name).toMatch('collapses')
+    expect(Collapses.name).toBe('Collapses')
   })
   it('has a created hook', () => {
     expect(typeof Collapses.data).toMatch('function')
diff --git a/tests/unit/views/base/Forms.spec.js b/tests/unit/views/base/Forms.spec.js
index 76b3f672..57ba71be 100644
--- a/tests/unit/views/base/Forms.spec.js
+++ b/tests/unit/views/base/Forms.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Forms.vue', () => {
   it('has a name', () => {
-    expect(Forms.name).toMatch('forms')
+    expect(Forms.name).toBe('Forms')
   })
   it('is Forms', () => {
     const wrapper = shallowMount(Forms)
diff --git a/tests/unit/views/base/Jumbotrons.spec.js b/tests/unit/views/base/Jumbotrons.spec.js
index 5325e5ed..08b9da65 100644
--- a/tests/unit/views/base/Jumbotrons.spec.js
+++ b/tests/unit/views/base/Jumbotrons.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Jumbotrons.vue', () => {
   it('has a name', () => {
-    expect(Jumbotrons.name).toMatch('jumbotrons')
+    expect(Jumbotrons.name).toBe('Jumbotrons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Jumbotrons)
diff --git a/tests/unit/views/base/ListGroups.spec.js b/tests/unit/views/base/ListGroups.spec.js
index c8cf3be1..595ba1c8 100644
--- a/tests/unit/views/base/ListGroups.spec.js
+++ b/tests/unit/views/base/ListGroups.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('ListGroups.vue', () => {
   it('has a name', () => {
-    expect(ListGroups.name).toMatch('list-groups')
+    expect(ListGroups.name).toBe('ListGroups')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(ListGroups)
diff --git a/tests/unit/views/base/Navbars.spec.js b/tests/unit/views/base/Navbars.spec.js
index fc6618db..bcd7d872 100644
--- a/tests/unit/views/base/Navbars.spec.js
+++ b/tests/unit/views/base/Navbars.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Navbars.vue', () => {
   it('has a name', () => {
-    expect(Navbars.name).toMatch('navbars')
+    expect(Navbars.name).toBe('Navbars')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Navbars)
diff --git a/tests/unit/views/base/Navs.spec.js b/tests/unit/views/base/Navs.spec.js
index 12a2a717..2557597f 100644
--- a/tests/unit/views/base/Navs.spec.js
+++ b/tests/unit/views/base/Navs.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Navs.vue', () => {
   it('has a name', () => {
-    expect(Navs.name).toMatch('navs')
+    expect(Navs.name).toBe('Navs')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Navs)
diff --git a/tests/unit/views/base/Paginations.spec.js b/tests/unit/views/base/Paginations.spec.js
index eec64dec..424b9d18 100644
--- a/tests/unit/views/base/Paginations.spec.js
+++ b/tests/unit/views/base/Paginations.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Paginations.vue', () => {
   it('has a name', () => {
-    expect(Paginations.name).toMatch('paginations')
+    expect(Paginations.name).toBe('Paginations')
   })
   it('has a created hook', () => {
     expect(typeof Paginations.data).toMatch('function')
diff --git a/tests/unit/views/base/Popovers.spec.js b/tests/unit/views/base/Popovers.spec.js
index 554b5833..ac79b389 100644
--- a/tests/unit/views/base/Popovers.spec.js
+++ b/tests/unit/views/base/Popovers.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Popovers.vue', () => {
   it('has a name', () => {
-    expect(Popovers.name).toMatch('popovers')
+    expect(Popovers.name).toBe('Popovers')
   })
   it('has a created hook', () => {
     expect(typeof Popovers.data).toMatch('function')
diff --git a/tests/unit/views/base/ProgressBars.spec.js b/tests/unit/views/base/ProgressBars.spec.js
index 8738b402..ab31f569 100644
--- a/tests/unit/views/base/ProgressBars.spec.js
+++ b/tests/unit/views/base/ProgressBars.spec.js
@@ -9,7 +9,7 @@ jest.useFakeTimers()
 
 describe('ProgressBars.vue', () => {
   it('has a name', () => {
-    expect(ProgressBars.name).toMatch('progress-bars')
+    expect(ProgressBars.name).toBe('ProgressBars')
   })
   it('has a created hook', () => {
     expect(typeof ProgressBars.data).toMatch('function')
diff --git a/tests/unit/views/base/Switches.spec.js b/tests/unit/views/base/Switches.spec.js
index c4aff3ef..61f89830 100644
--- a/tests/unit/views/base/Switches.spec.js
+++ b/tests/unit/views/base/Switches.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Switches.vue', () => {
   it('has a name', () => {
-    expect(Switches.name).toMatch('switches')
+    expect(Switches.name).toBe('Switches')
   })
   it('has a created hook', () => {
     expect(typeof Switches.data).toMatch('function')
diff --git a/tests/unit/views/base/Table.spec.js b/tests/unit/views/base/Table.spec.js
index 860893dc..187c1fad 100644
--- a/tests/unit/views/base/Table.spec.js
+++ b/tests/unit/views/base/Table.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Table.vue', () => {
   it('has a name', () => {
-    expect(Table.name).toMatch('TableWrapper')
+    expect(Table.name).toBe('Table')
   })
   it('is Vue instance', () => {
     const wrapper = mount(Table)
diff --git a/tests/unit/views/base/Tables.spec.js b/tests/unit/views/base/Tables.spec.js
index 2325ee71..8ef936ad 100644
--- a/tests/unit/views/base/Tables.spec.js
+++ b/tests/unit/views/base/Tables.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tables.vue', () => {
   it('has a name', () => {
-    expect(Tables.name).toMatch('tables')
+    expect(Tables.name).toBe('Tables')
   })
   it('is Vue instance', () => {
     const wrapper = mount(Tables)
diff --git a/tests/unit/views/base/Tabs.spec.js b/tests/unit/views/base/Tabs.spec.js
index df4ebbac..47b0dac7 100644
--- a/tests/unit/views/base/Tabs.spec.js
+++ b/tests/unit/views/base/Tabs.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tabs.vue', () => {
   it('has a name', () => {
-    expect(Tabs.name).toMatch('tabs')
+    expect(Tabs.name).toBe('Tabs')
   })
   it('has a created hook', () => {
     expect(typeof Tabs.data).toMatch('function')
diff --git a/tests/unit/views/base/Tooltips.spec.js b/tests/unit/views/base/Tooltips.spec.js
index 3d5d6c93..968bab13 100644
--- a/tests/unit/views/base/Tooltips.spec.js
+++ b/tests/unit/views/base/Tooltips.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tooltips.vue', () => {
   it('has a name', () => {
-    expect(Tooltips.name).toMatch('tooltips')
+    expect(Tooltips.name).toBe('Tooltips')
   })
   it('has a created hook', () => {
     expect(typeof Tooltips.data).toMatch('function')
diff --git a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
index b9c11d74..e45b2fb7 100644
--- a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
@@ -2,180 +2,174 @@
 
 exports[`Breadcrumbs.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
-        class="c-col"
+      <!---->
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Breadcrumb
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
-          <header
-            class="c-card-header"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-            <strong>
-               Bootstrap Breadcrumb
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
+            <small
+              class="text-muted"
             >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <ol
-              class="c-breadcrumb"
-            >
-              <li
-                class="c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  <b>
-                    Admin
-                  </b>
-                </a>
-              </li>
-              <li
-                class="c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  Manage
-                </a>
-              </li>
-              <li
-                class="c-active c-breadcrumb-item"
-                role="presentation"
-              >
-                <span>
-                  Library
-                </span>
-              </li>
-            </ol>
-             
-            <ol
-              class="c-breadcrumb"
-            >
-              <li
-                class="c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  Go to dashboard
-                </a>
-              </li>
-              <li
-                class="c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  Go to widgets
-                </a>
-              </li>
-              <li
-                class="c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="http://google.com"
-                  target="_self"
-                >
-                  Go to Google
-                </a>
-              </li>
-              <li
-                class="c-active c-breadcrumb-item"
-                role="presentation"
-              >
-                <span>
-                  Current page
-                </span>
-              </li>
-            </ol>
-             
-            <ol
-              class="c-breadcrumb"
-            >
-              <li
-                class="c-font-xl c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  Added
-                </a>
-              </li>
-              <li
-                class="c-font-xl c-breadcrumb-item"
-                role="presentation"
-              >
-                <a
-                  class=""
-                  href="#"
-                  target="_self"
-                >
-                  Custom
-                </a>
-              </li>
-              <li
-                class="c-active c-font-xl c-text-danger c-breadcrumb-item"
-                role="presentation"
-              >
-                <span>
-                  Classes
-                </span>
-              </li>
-            </ol>
-          </div>
-          <!---->
+              docs
+            </small>
+          </a>
         </div>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <ol
+          class="breadcrumb"
+        >
+          <li
+            class="breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              <b>
+                Admin
+              </b>
+            </a>
+          </li>
+          <li
+            class="breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              Manage
+            </a>
+          </li>
+          <li
+            class="active breadcrumb-item"
+            role="presentation"
+          >
+            <span>
+              Library
+            </span>
+          </li>
+        </ol>
+         
+        <ol
+          class="breadcrumb"
+        >
+          <li
+            class="breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              Go to dashboard
+            </a>
+          </li>
+          <li
+            class="breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              Go to widgets
+            </a>
+          </li>
+          <li
+            class="breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="http://google.com"
+              target="_self"
+            >
+              Go to Google
+            </a>
+          </li>
+          <li
+            class="active breadcrumb-item"
+            role="presentation"
+          >
+            <span>
+              Current page
+            </span>
+          </li>
+        </ol>
+         
+        <ol
+          class="breadcrumb"
+        >
+          <li
+            class="font-xl breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              Added
+            </a>
+          </li>
+          <li
+            class="font-xl breadcrumb-item"
+            role="presentation"
+          >
+            <a
+              class=""
+              href="#"
+              target="_self"
+            >
+              Custom
+            </a>
+          </li>
+          <li
+            class="active font-xl text-danger breadcrumb-item"
+            role="presentation"
+          >
+            <span>
+              Classes
+            </span>
+          </li>
+        </ol>
       </div>
+      <!---->
     </div>
   </div>
 </div>
diff --git a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
index d019d633..1c049b69 100644
--- a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
@@ -3,23 +3,23 @@
 exports[`Cards.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card title
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -37,7 +37,7 @@ exports[`Cards.vue renders correctly 1`] = `
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -50,19 +50,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           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.
         </div>
         <footer
-          class="c-card-footer"
+          class="card-footer"
         >
           Card Footer
         </footer>
@@ -70,13 +70,13 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           <i
             class="cui-check"
@@ -84,7 +84,7 @@ exports[`Cards.vue renders correctly 1`] = `
            Card with icon
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           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.
         </div>
@@ -93,36 +93,36 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with switch
           
           <label
-            class="c-float-right c-switch c-form-check-label c-switch-info c-switch-sm c-switch-pill"
+            class="float-right switch form-check-label switch-info switch-sm switch-pill"
           >
             <input
-              class="c-switch-input c-form-check-input"
+              class="switch-input form-check-input"
               data-off="Off"
               data-on="On"
               type="checkbox"
               value=""
             />
             <span
-              class="c-switch-slider"
+              class="switch-slider"
             />
           </label>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -135,27 +135,27 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with label
           
           <span
-            class="c-badge c-float-right c-badge-success"
+            class="badge float-right badge-success"
           >
             Success
           </span>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -168,27 +168,27 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with label
           
           <span
-            class="c-badge c-float-right c-badge-danger c-badge-pill"
+            class="badge float-right badge-danger badge-pill"
           >
             42
           </span>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -202,18 +202,18 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-primary"
+        class="card border-primary"
         header="Card outline primary"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           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.
         </div>
@@ -222,15 +222,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-secondary"
+        class="card border-secondary"
         header="Card outline secondary"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           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.
         </div>
@@ -239,15 +239,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-success"
+        class="card border-success"
         header="Card outline success"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -260,18 +260,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-info"
+        class="card border-info"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline info
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -284,18 +284,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-warning"
+        class="card border-warning"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline warning
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -308,18 +308,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-danger"
+        class="card border-danger"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline danger
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -333,18 +333,18 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-primary"
+        class="card card-accent-primary"
         header="Card with primary accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -357,15 +357,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-secondary"
+        class="card card-accent-secondary"
         header="Card with secondary accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -378,15 +378,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-success"
+        class="card card-accent-success"
         header="Card with success accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -399,15 +399,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-info"
+        class="card card-accent-info"
         header="Card with info accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -420,15 +420,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-warning"
+        class="card card-accent-warning"
         header="Card with warning accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -441,15 +441,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-danger"
+        class="card card-accent-danger"
         header="Card with danger accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -463,22 +463,22 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-primary c-text-center"
+        class="card bg-primary text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -500,19 +500,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-success c-text-center"
+        class="card bg-success text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -534,19 +534,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-info c-text-center"
+        class="card bg-info text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -568,19 +568,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-warning c-text-center"
+        class="card bg-warning text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -602,19 +602,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-danger c-text-center"
+        class="card bg-danger text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -636,19 +636,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-secondary c-text-center"
+        class="card bg-secondary text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -671,21 +671,21 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-primary"
+        class="card bg-primary"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -698,18 +698,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-success"
+        class="card bg-success"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -722,18 +722,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-info"
+        class="card bg-info"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -746,18 +746,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-warning"
+        class="card bg-warning"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -770,18 +770,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-danger"
+        class="card bg-danger"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -794,24 +794,24 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-secondary"
+        class="card bg-secondary"
         name="fade"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
             Card with header actions
             
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
-              class="c-card-header-action btn-setting"
+              class="card-header-action btn-setting"
               href="#"
               target="_self"
             >
@@ -821,7 +821,7 @@ exports[`Cards.vue renders correctly 1`] = `
             </a>
              
             <a
-              class="c-card-header-action btn-minimize"
+              class="card-header-action btn-minimize"
               href="#"
               target="_self"
             >
@@ -831,7 +831,7 @@ exports[`Cards.vue renders correctly 1`] = `
             </a>
              
             <a
-              class="c-card-header-action c-btn-close"
+              class="card-header-action btn-close"
               href="#"
               target="_self"
             >
@@ -844,11 +844,11 @@ exports[`Cards.vue renders correctly 1`] = `
          
         <div
           class=""
-          data-v-98918eb0=""
+          data-v-1b076234=""
         >
           <div
-            class="c-card-body"
-            data-v-98918eb0=""
+            class="card-body"
+            data-v-1b076234=""
           >
             <!---->
             <!---->
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
index fa3d1480..52032891 100644
--- a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -2,150 +2,136 @@
 
 exports[`Carousels.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col-md-12 col-lg-7"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
-        class="c-col-md-12 c-col-lg-7"
+      <!---->
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Carousel
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
-          <header
-            class="c-card-header"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Carousel"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <div
+          class="carousel slide"
+          style="height: 400px;"
+        >
+          <ol
+            class="carousel-indicators"
+          >
+            <li
+              class="active"
             />
-             
-            <strong>
-               Bootstrap Carousel
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
-            >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Carousel"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </header>
-           
+            <li
+              class=""
+            />
+            <li
+              class=""
+            />
+          </ol>
           <div
-            class="c-card-body"
+            class="carousel-inner"
           >
-            <!---->
-            <!---->
             <div
-              class="c-carousel c-slide"
-              style="height: 400px;"
+              class="carousel-item active"
             >
-              <ol
-                class="c-carousel-indicators"
-              >
-                <li
-                  class="c-active"
-                />
-                <li
-                  class=""
-                />
-                <li
-                  class=""
-                />
-              </ol>
+              <img
+                class="d-block w-100 h-100 img-fluid"
+                src="https://lorempixel.com/1024/480/technics/2/"
+              />
               <div
-                class="c-carousel-inner"
+                class="carousel-caption"
               >
-                <div
-                  class="c-carousel-item c-active"
-                >
-                  <img
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
-                    src="https://lorempixel.com/1024/480/technics/2/"
-                  />
-                  <div
-                    class="c-carousel-caption"
-                  >
-                    <h3>
-                      First Slide
-                    </h3>
-                    <p>
-                      Nulla vitae elit libero, a pharetra augue mollis interdum.
-                    </p>
-                  </div>
-                </div>
-                 
-                <div
-                  class="c-carousel-item"
-                >
-                  <svg
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
-                    style="background-color: grey;"
-                  />
-                  <div
-                    class="c-carousel-caption"
-                  >
-                    <h3>
-                      Blank page
-                    </h3>
-                    <p>
-                      Nulla vitae elit libero, a pharetra augue mollis interdum.
-                    </p>
-                  </div>
-                </div>
-                 
-                <div
-                  class="c-carousel-item"
-                >
-                  <img
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
-                    src="https://lorempixel.com/1024/480/technics/8/"
-                  />
-                  <!---->
-                </div>
+                <h3>
+                  First Slide
+                </h3>
+                <p>
+                  Nulla vitae elit libero, a pharetra augue mollis interdum.
+                </p>
               </div>
-              <a
-                class="c-carousel-control-prev"
+            </div>
+             
+            <div
+              class="carousel-item"
+            >
+              <svg
+                class="d-block w-100 h-100 img-fluid"
+                style="background-color: grey;"
+              />
+              <div
+                class="carousel-caption"
               >
-                <span
-                  class="c-carousel-control-prev-icon"
-                />
-                <span
-                  class="sr-only"
-                >
-                  Previous
-                </span>
-              </a>
-              <a
-                class="c-carousel-control-next"
-              >
-                <span
-                  class="c-carousel-control-next-icon"
-                />
-                <span
-                  class="sr-only"
-                >
-                  Next
-                </span>
-              </a>
+                <h3>
+                  Blank page
+                </h3>
+                <p>
+                  Nulla vitae elit libero, a pharetra augue mollis interdum.
+                </p>
+              </div>
+            </div>
+             
+            <div
+              class="carousel-item"
+            >
+              <img
+                class="d-block w-100 h-100 img-fluid"
+                src="https://lorempixel.com/1024/480/technics/8/"
+              />
+              <!---->
             </div>
           </div>
-          <!---->
+          <a
+            class="carousel-control-prev"
+          >
+            <span
+              aria-label="Previous"
+              class="carousel-control-prev-icon"
+            />
+          </a>
+          <a
+            class="carousel-control-next"
+          >
+            <span
+              aria-label="Next"
+              class="carousel-control-next-icon"
+            />
+          </a>
         </div>
       </div>
+      <!---->
     </div>
   </div>
 </div>
diff --git a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
index c44af2d6..d7b3a68e 100644
--- a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
@@ -2,126 +2,120 @@
 
 exports[`Collapses.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col-12 col-md-6"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
-        class="c-col-12 c-col-md-6"
+      <!---->
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Collapse 
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
-          <header
-            class="c-card-header"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Collapse"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Collapse 
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
+            <small
+              class="text-muted"
             >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Collapse"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </header>
-           
+              docs
+            </small>
+          </a>
+        </div>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <button
+          class="btn btn-primary"
+          id="collapse1"
+          type="button"
+        >
+          
+          Toggle Collapse
+        
+        </button>
+         
+        <div
+          class="mt-2"
+          data-v-1b076234=""
+          style="display: none;"
+        >
           <div
-            class="c-card-body"
+            class="card"
+            data-v-1b076234=""
           >
             <!---->
-            <!---->
-            <button
-              class="c-btn c-btn-primary"
-              id="collapse1"
-              type="button"
-            >
-              
-              Toggle Collapse
-            
-            </button>
-             
             <div
-              class="c-mt-2"
-              data-v-98918eb0=""
-              style="display: none;"
+              class="card-body"
+              data-v-1b076234=""
             >
-              <div
-                class="c-card"
-                data-v-98918eb0=""
+              <!---->
+              <!---->
+              <p
+                class="card-text"
+                data-v-1b076234=""
+              >
+                Collapse contents Here
+              </p>
+               
+              <button
+                class="btn btn-secondary btn-sm"
+                data-v-1b076234=""
+                id="collapse2"
+                type="button"
+              >
+                
+              Toggle Inner Collapse
+            
+              </button>
+               
+              <div
+                class="mt-2"
+                data-v-1b076234=""
+                style="display: none;"
               >
-                <!---->
                 <div
-                  class="c-card-body"
-                  data-v-98918eb0=""
+                  class="card"
+                  data-v-1b076234=""
                 >
                   <!---->
-                  <!---->
-                  <p
-                    class="c-card-text"
-                    data-v-98918eb0=""
-                  >
-                    Collapse contents Here
-                  </p>
-                   
-                  <button
-                    class="c-btn c-btn-secondary c-btn-sm"
-                    data-v-98918eb0=""
-                    id="collapse2"
-                    type="button"
-                  >
-                    
-                  Toggle Inner Collapse
-                
-                  </button>
-                   
                   <div
-                    class="c-mt-2"
-                    data-v-98918eb0=""
-                    style="display: none;"
+                    class="card-body"
+                    data-v-1b076234=""
                   >
-                    <div
-                      class="c-card"
-                      data-v-98918eb0=""
-                    >
-                      <!---->
-                      <div
-                        class="c-card-body"
-                        data-v-98918eb0=""
-                      >
-                        <!---->
-                        <!---->
-                        Hello!
-                      </div>
-                      <!---->
-                    </div>
+                    <!---->
+                    <!---->
+                    Hello!
                   </div>
+                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
+            <!---->
           </div>
-          <!---->
         </div>
       </div>
+      <!---->
     </div>
   </div>
 </div>
diff --git a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
index b80a6fa0..b3c99238 100644
--- a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
@@ -1,224 +1,220 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Jumbotrons.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <crow-stub>
-      <ccol-stub
-        tag="div"
+<div>
+  <crow-stub>
+    <ccol-stub
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
+        <ccardheader-stub
           subtitletag="h6"
           titletag="h4"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Jumbotron 
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
-            >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </ccardheader-stub>
+          <i
+            class="fa fa-align-justify"
+          />
            
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
+          <strong>
+             Bootstrap Jumbotron 
+          </strong>
+           
+          <div
+            class="card-header-actions"
           >
-            <cjumbotron-stub
-              header="Bootstrap 4"
-              lead="Bootstrap 4 Components for Vue.js 2"
-              tag="div"
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
+              rel="noreferrer noopener"
+              target="_blank"
             >
-              <p>
-                For more information visit website
-              </p>
-               
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
+              <small
+                class="text-muted"
               >
-                More Info
-              </cbutton-stub>
-            </cjumbotron-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        tag="div"
-      >
-        <ccard-stub
+                docs
+              </small>
+            </a>
+          </div>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
           subtitletag="h6"
           titletag="h4"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
+          <cjumbotron-stub
+            header="Bootstrap 4"
+            lead="Bootstrap 4 Components for Vue.js 2"
+            tag="div"
           >
-            <i
-              class="fa fa-align-justify"
-            />
+            <p>
+              For more information visit website
+            </p>
              
-            <strong>
-               Jumbotron 
-            </strong>
-             
-            <small>
-              with slots
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <cjumbotron-stub
-              header="Bootstrap 4"
-              lead=""
-              tag="div"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <p
-                class="c-lead"
-                slot="lead"
-              >
-                
-                This is a simple hero unit, a simple jumbotron-style component for
-                calling extra attention to featured content or information.
-              
-              </p>
-               
-              <hr
-                class="c-my-4"
-              />
-               
-              <p>
-                
-                It uses utility classes for typography and spacing to space content
-                out within the larger container.
-              
-              </p>
-               
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                Do Something
-              </cbutton-stub>
-               
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="success"
-              >
-                Do Something Else
-              </cbutton-stub>
-            </cjumbotron-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
+              More Info
+            </cbutton-stub>
+          </cjumbotron-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
      
-    <crow-stub>
-      <ccol-stub
-        tag="div"
+    <ccol-stub
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
+        <ccardheader-stub
           subtitletag="h6"
           titletag="h4"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Jumbotron 
+          </strong>
+           
+          <small>
+            with slots
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <cjumbotron-stub
+            header="Bootstrap 4"
+            lead=""
+            tag="div"
           >
-            <i
-              class="fa fa-align-justify"
+            <p
+              class="lead"
+              slot="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"
             />
              
-            <strong>
-               Jumbotron 
-            </strong>
+            <p>
+              
+              It uses utility classes for typography and spacing to space content
+              out within the larger container.
+            
+            </p>
              
-            <small>
-              variants
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <cjumbotron-stub
-              bordervariant="dark"
-              header="Bootstrap 4"
-              tag="div"
-              textvariant="white"
-              variant="info"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              Do Something
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="success"
+            >
+              Do Something Else
+            </cbutton-stub>
+          </cjumbotron-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Jumbotron 
+          </strong>
+           
+          <small>
+            variants
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <cjumbotron-stub
+            bordervariant="dark"
+            header="Bootstrap 4"
+            tag="div"
+            textvariant="white"
+            variant="info"
+          >
+            <p
+              class="lead"
+              slot="lead"
             >
-              <p
-                class="c-lead"
-                slot="lead"
-              >
-                
-                This is a simple hero unit, a simple jumbotron-style component for
-                calling extra attention to featured content or information.
               
-              </p>
-               
-              <hr
-                class="c-my-4"
-              />
-               
-              <p>
-                
-                It uses utility classes for typography and spacing to space content
-                out within the larger container.
+              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"
+            />
+             
+            <p>
               
-              </p>
-            </cjumbotron-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-  </div>
+              It uses utility classes for typography and spacing to space content
+              out within the larger container.
+            
+            </p>
+          </cjumbotron-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
index 379a955a..d5968e42 100644
--- a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -1,1194 +1,1190 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ListGroups.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <crow-stub>
-      <ccol-stub
-        md="6"
-        tag="div"
+<div>
+  <crow-stub>
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
+        <ccardheader-stub
           subtitletag="h6"
           titletag="h4"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Bootstrap list group 
+          </strong>
+           
+          <div
+            class="card-header-actions"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap list group 
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/ListGroup"
+              rel="noreferrer noopener"
+              target="_blank"
             >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/ListGroup"
-                rel="noreferrer noopener"
-                target="_blank"
+              <small
+                class="text-muted"
               >
+                docs
+              </small>
+            </a>
+          </div>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+          <strong>
+             List group 
+          </strong>
+          <small>
+            active items
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              active="true"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            disabled items
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            actionable items
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#some-link"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Awesome link
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              active="true"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Link with active state
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Action links are easy
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#foobar"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Disabled link
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            buttons
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="button"
+              target="_self"
+            >
+              Button item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="button"
+              target="_self"
+            >
+              I am a button
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="button"
+              target="_self"
+            >
+              Disabled button
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="button"
+              target="_self"
+            >
+              This is a button too
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            with badges
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Cras justo odio
+              
+              <cbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                14
+              </cbadge-stub>
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Dapibus ac facilisis in
+              
+              <cbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                2
+              </cbadge-stub>
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Morbi leo risus
+              
+              <cbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                1
+              </cbadge-stub>
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            variants
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              This is a default list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="primary"
+            >
+              This is a primary list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="secondary"
+            >
+              This is a secondary list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="success"
+            >
+              This is a success list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="danger"
+            >
+              This is a danger list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="warning"
+            >
+              This is a warning list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="info"
+            >
+              This is a info list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="light"
+            >
+              This is a light list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="dark"
+            >
+              This is a dark list group item
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            variants active
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              This is a default list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="primary"
+            >
+              This is a primary list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="secondary"
+            >
+              This is a secondary list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="success"
+            >
+              This is a success list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="danger"
+            >
+              This is a danger list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="warning"
+            >
+              This is a warning list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="info"
+            >
+              This is a info list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="light"
+            >
+              This is a light list group item
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="dark"
+            >
+              This is a dark list group item
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      col="12"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             List group 
+          </strong>
+           
+          <small>
+            inside cards
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardgroup-stub
+            deck="true"
+          >
+            <ccard-stub
+              headerhtml=<b>Card with list group</b>
+              subtitletag="h6"
+              titletag="h4"
+            >
+              <clistgroup-stub
+                tag="div"
+              >
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Cras justo odio
+                </clistgroupitem-stub>
+                 
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Dapibus ac facilisis in
+                </clistgroupitem-stub>
+                 
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Vestibulum at eros
+                </clistgroupitem-stub>
+              </clistgroup-stub>
+               
+              <p
+                class="card-text mt-2"
+              >
+                
+                Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                ad sit ipsum anim Lorem.
+              
+              </p>
+            </ccard-stub>
+             
+            <ccard-stub
+              header=<b>Card with flush list group</b>
+              subtitletag="h6"
+              titletag="h4"
+            >
+              <clistgroup-stub
+                flush="true"
+                tag="div"
+              >
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Cras justo odio
+                </clistgroupitem-stub>
+                 
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Dapibus ac facilisis in
+                </clistgroupitem-stub>
+                 
+                <clistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Vestibulum at eros
+                </clistgroupitem-stub>
+              </clistgroup-stub>
+               
+              <ccardbody-stub
+                subtitletag="h6"
+                titletag="h4"
+              >
+                
+                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
+                ad sit ipsum anim Lorem.
+              
+              </ccardbody-stub>
+            </ccard-stub>
+          </ccardgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+          <strong>
+             List group 
+          </strong>
+          <small>
+            custom content
+          </small>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <clistgroup-stub
+            tag="div"
+          >
+            <clistgroupitem-stub
+              active="true"
+              activeclass="active"
+              class="flex-column align-items-start"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              <div
+                class="d-flex w-100 justify-content-between"
+              >
+                <h5
+                  class="mb-1"
+                >
+                  List group item heading
+                </h5>
+                 
+                <small>
+                  3 days ago
+                </small>
+              </div>
+               
+              <p
+                class="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-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              class="flex-column align-items-start"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              <div
+                class="d-flex w-100 justify-content-between"
+              >
+                <h5
+                  class="mb-1"
+                >
+                  List group item heading
+                </h5>
+                 
                 <small
                   class="text-muted"
                 >
-                  docs
+                  3 days ago
                 </small>
-              </a>
-            </div>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
+              </div>
+               
+              <p
+                class="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>
+            </clistgroupitem-stub>
+             
+            <clistgroupitem-stub
+              activeclass="active"
+              class="flex-column align-items-start"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
               tag="div"
+              target="_self"
             >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
+              <div
+                class="d-flex w-100 justify-content-between"
               >
-                Cras justo odio
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Dapibus ac facilisis in
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Morbi leo risus
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Porta ac consectetur ac
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Vestibulum at eros
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-            <strong>
-               List group 
-            </strong>
-            <small>
-              active items
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Cras justo odio
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                active="true"
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Dapibus ac facilisis in
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Morbi leo risus
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Porta ac consectetur ac
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Vestibulum at eros
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-     
-    <crow-stub>
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              disabled items
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Cras justo odio
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Dapibus ac facilisis in
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Morbi leo risus
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Porta ac consectetur ac
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Vestibulum at eros
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              actionable items
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#some-link"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Awesome link
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                active="true"
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Link with active state
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Action links are easy
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                href="#foobar"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                Disabled link
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-     
-    <crow-stub>
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              buttons
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="button"
-                target="_self"
-              >
-                Button item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="button"
-                target="_self"
-              >
-                I am a button
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="button"
-                target="_self"
-              >
-                Disabled button
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="button"
-                target="_self"
-              >
-                This is a button too
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              with badges
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                class="c-d-flex c-justify-content-between c-align-items-center"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                
-                Cras justo odio
-                
-                <cbadge-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  pill="true"
-                  routertag="a"
-                  tag="span"
-                  target="_self"
-                  variant="primary"
+                <h5
+                  class="mb-1"
                 >
-                  14
-                </cbadge-stub>
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                class="c-d-flex c-justify-content-between c-align-items-center"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                
-                Dapibus ac facilisis in
-                
-                <cbadge-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  pill="true"
-                  routertag="a"
-                  tag="span"
-                  target="_self"
-                  variant="primary"
-                >
-                  2
-                </cbadge-stub>
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                class="c-d-flex c-justify-content-between c-align-items-center"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                
-                Morbi leo risus
-                
-                <cbadge-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  pill="true"
-                  routertag="a"
-                  tag="span"
-                  target="_self"
-                  variant="primary"
-                >
-                  1
-                </cbadge-stub>
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-     
-    <crow-stub>
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              variants
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                This is a default list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="primary"
-              >
-                This is a primary list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="secondary"
-              >
-                This is a secondary list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="success"
-              >
-                This is a success list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="danger"
-              >
-                This is a danger list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="warning"
-              >
-                This is a warning list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="info"
-              >
-                This is a info list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="light"
-              >
-                This is a light list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="dark"
-              >
-                This is a dark list group item
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              variants active
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                This is a default list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="primary"
-              >
-                This is a primary list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="secondary"
-              >
-                This is a secondary list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="success"
-              >
-                This is a success list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="danger"
-              >
-                This is a danger list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="warning"
-              >
-                This is a warning list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="info"
-              >
-                This is a info list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="light"
-              >
-                This is a light list group item
-              </clistgroupitem-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-                variant="dark"
-              >
-                This is a dark list group item
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-     
-    <crow-stub>
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               List group 
-            </strong>
-             
-            <small>
-              inside cards
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <ccardgroup-stub
-              deck="true"
-            >
-              <ccard-stub
-                headerhtml=<b>Card with list group</b>
-                subtitletag="h6"
-                titletag="h4"
-              >
-                <clistgroup-stub
-                  tag="div"
-                >
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Cras justo odio
-                  </clistgroupitem-stub>
-                   
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Dapibus ac facilisis in
-                  </clistgroupitem-stub>
-                   
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Vestibulum at eros
-                  </clistgroupitem-stub>
-                </clistgroup-stub>
-                 
-                <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
-                  ad sit ipsum anim Lorem.
-                
-                </p>
-              </ccard-stub>
-               
-              <ccard-stub
-                header=<b>Card with flush list group</b>
-                subtitletag="h6"
-                titletag="h4"
-              >
-                <clistgroup-stub
-                  flush="true"
-                  tag="div"
-                >
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Cras justo odio
-                  </clistgroupitem-stub>
-                   
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Dapibus ac facilisis in
-                  </clistgroupitem-stub>
-                   
-                  <clistgroupitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    href="#"
-                    routertag="a"
-                    tag="div"
-                    target="_self"
-                  >
-                    Vestibulum at eros
-                  </clistgroupitem-stub>
-                </clistgroup-stub>
-                 
-                <ccardbody-stub
-                  subtitletag="h6"
-                  titletag="h4"
-                >
-                  
-                  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
-                  ad sit ipsum anim Lorem.
-                
-                </ccardbody-stub>
-              </ccard-stub>
-            </ccardgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-     
-    <crow-stub>
-      <ccol-stub
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-            <strong>
-               List group 
-            </strong>
-            <small>
-              custom content
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <clistgroup-stub
-              tag="div"
-            >
-              <clistgroupitem-stub
-                active="true"
-                activeclass="c-active"
-                class="c-flex-column c-align-items-start"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                <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="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-stub>
-               
-              <clistgroupitem-stub
-                activeclass="c-active"
-                class="c-flex-column c-align-items-start"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
-              >
-                <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="c-mb-1"
-                >
-                  
-                  Donec id elit non mi porta gravida at eget metus. Maecenas
-                  sed diam eget risus varius blandit.
-                
-                </p>
+                  Disabled List group item
+                </h5>
                  
                 <small
-                  class="c-text-muted"
+                  class="text-muted"
                 >
-                  Donec id elit non mi porta.
+                  3 days ago
                 </small>
-              </clistgroupitem-stub>
+              </div>
                
-              <clistgroupitem-stub
-                activeclass="c-active"
-                class="c-flex-column c-align-items-start"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="div"
-                target="_self"
+              <p
+                class="mb-1"
               >
-                <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="c-mb-1"
-                >
-                  
-                  Donec id elit non mi porta gravida at eget metus. Maecenas
-                  sed diam eget risus varius blandit.
                 
-                </p>
-                 
-                <small
-                  class="c-text-muted"
-                >
-                  Donec id elit non mi porta.
-                </small>
-              </clistgroupitem-stub>
-            </clistgroup-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-  </div>
+                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>
+            </clistgroupitem-stub>
+          </clistgroup-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
index 2f06c0d9..548d1326 100644
--- a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
@@ -1,570 +1,566 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navbars.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <ccard-stub
+<div>
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navbar 
-        </strong>
-         
-        <div
-          class="c-card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Navbar"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <strong>
+         Bootstrap Navbar 
+      </strong>
+       
+      <div
+        class="card-header-actions"
       >
-        <cnavbar-stub
-          tag="nav"
-          toggleable="md"
-          variant="info"
+        <a
+          class="card-header-action"
+          href="https://coreui.io/vue/docs/3.0/components/Navbar"
+          rel="noreferrer noopener"
+          target="_blank"
         >
-          <cnavbartoggle-stub />
-           
-          <cnavbarbrand-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            href="#"
-            routertag="a"
-            target="_self"
+          <small
+            class="text-muted"
           >
-            NavBar
-          </cnavbarbrand-stub>
-           
-          <ccollapse-stub
-            duration="400"
-            navbar="true"
-            transition="ease-in-out"
-          >
-            <cnavbarnav-stub
-              tag="ul"
-            >
-              <cnavitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Link
-              </cnavitem-stub>
-               
-              <cnavitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Disabled
-              </cnavitem-stub>
-            </cnavbarnav-stub>
-             
-            <cnavbarnav-stub
-              class="c-ml-auto"
-              tag="ul"
-            >
-              <cform-stub
-                inline="true"
-              >
-                <cforminput-stub
-                  class="c-mr-sm-2"
-                  lazy="400"
-                  placeholder="Search"
-                  size="sm"
-                  type="text"
-                />
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-my-2 c-my-sm-0"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  size="sm"
-                  target="_self"
-                  type="button"
-                  variant="light"
-                >
-                  
-                  Search
-                
-                </cbutton-stub>
-              </cform-stub>
-               
-              <cdropdown-stub
-                button-html="Lang"
-                nav="true"
-                placement="bottom-end"
-                togglertext="Dropdown"
-              >
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  EN
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  ES
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  RU
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  FA
-                </cdropdownitem-stub>
-              </cdropdown-stub>
-               
-              <cdropdown-stub
-                buttonhtml=<em>User</em>
-                nav="true"
-                placement="bottom-end"
-                togglertext="Dropdown"
-              >
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  Profile
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  Signout
-                </cdropdownitem-stub>
-              </cdropdown-stub>
-            </cnavbarnav-stub>
-          </ccollapse-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
+            docs
+          </small>
+        </a>
+      </div>
+    </ccardheader-stub>
      
-    <ccard-stub
+    <ccardbody-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
+      <cnavbar-stub
+        tag="nav"
+        toggleable="md"
+        variant="info"
       >
-        <i
-          class="fa fa-align-justify"
-        />
+        <cnavbartoggle-stub />
          
-        <strong>
-           Navbar 
-        </strong>
-         
-        <small>
-          brand
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnavbar-stub
-          light="true"
-          tag="nav"
-          variant="faded"
+        <cnavbarbrand-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          href="#"
+          routertag="a"
+          target="_self"
         >
-          <cnavbarbrand-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            href="#"
-            routertag="a"
-            target="_self"
-          >
-            <img
-              alt="CoreuiVue"
-              class="c-d-inline-block c-align-top"
-              src="https://placekitten.com/g/30/30"
-            />
-            
-            CoreuiVue
-          
-          </cnavbarbrand-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
+          NavBar
+        </cnavbarbrand-stub>
          
-        <strong>
-           Navbar 
-        </strong>
-         
-        <small>
-          text
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnavbar-stub
-          light="true"
-          tag="nav"
-          toggleable="sm"
-          variant="light"
+        <ccollapse-stub
+          duration="400"
+          navbar="true"
+          transition="ease-in-out"
         >
-          <cnavbartoggle-stub />
-           
-          <cnavbarbrand-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            target="_self"
+          <cnavbarnav-stub
+            tag="ul"
           >
-            CoreuiVue
-          </cnavbarbrand-stub>
-           
-          <ccollapse-stub
-            duration="400"
-            navbar="true"
-            transition="ease-in-out"
-          >
-            <cnavbarnav-stub
-              tag="ul"
-            >
-              <span
-                class="c-navbar-text"
-              >
-                Navbar text
-              </span>
-            </cnavbarnav-stub>
-          </ccollapse-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Navbar 
-        </strong>
-         
-        <small>
-          dropdown
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnavbar-stub
-          tag="nav"
-          toggleable="sm"
-          variant="primary"
-        >
-          <cnavbartoggle-stub />
-           
-          <ccollapse-stub
-            duration="400"
-            navbar="true"
-            transition="ease-in-out"
-          >
-            <cnavbarnav-stub
-              tag="ul"
-            >
-              <cnavitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Home
-              </cnavitem-stub>
-               
-              <cnavitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                href="#"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Link
-              </cnavitem-stub>
-               
-              <cdropdown-stub
-                button-html="Lang"
-                nav="true"
-                placement="bottom-start"
-                right=""
-                togglertext="Dropdown"
-              >
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  EN
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  ES
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  RU
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  FA
-                </cdropdownitem-stub>
-              </cdropdown-stub>
-               
-              <cdropdown-stub
-                button-html="User"
-                nav="true"
-                placement="bottom-start"
-                right=""
-                togglertext="Dropdown"
-              >
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  Account
-                </cdropdownitem-stub>
-                 
-                <cdropdownitem-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                >
-                  Settings
-                </cdropdownitem-stub>
-              </cdropdown-stub>
-            </cnavbarnav-stub>
-          </ccollapse-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Navbar 
-        </strong>
-         
-        <small>
-          form
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnavbar-stub
-          light="true"
-          tag="nav"
-          variant="light"
-        >
-          <cform-stub
-            inline="true"
-          >
-            <cforminput-stub
-              class="c-mr-sm-2"
-              lazy="400"
-              placeholder="Search"
-              size="sm"
-              type="text"
-            />
-             
-            <cbutton-stub
-              activeclass="c-active"
-              class="c-my-2 c-my-sm-0"
+            <cnavitem-stub
+              activeclass="active"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
+              href="#"
               routertag="a"
+              tag="span"
               target="_self"
-              type="submit"
-              variant="outline-success"
             >
-              Search
-            </cbutton-stub>
-          </cform-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
+              Link
+            </cnavitem-stub>
+             
+            <cnavitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="span"
+              target="_self"
+            >
+              Disabled
+            </cnavitem-stub>
+          </cnavbarnav-stub>
+           
+          <cnavbarnav-stub
+            class="ml-auto"
+            tag="ul"
+          >
+            <cform-stub
+              inline="true"
+            >
+              <cforminput-stub
+                class="mr-sm-2"
+                lazy="400"
+                placeholder="Search"
+                size="sm"
+                type="text"
+              />
+               
+              <cbutton-stub
+                activeclass="active"
+                class="my-2 my-sm-0"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                size="sm"
+                target="_self"
+                type="button"
+                variant="light"
+              >
+                
+                Search
+              
+              </cbutton-stub>
+            </cform-stub>
+             
+            <cdropdown-stub
+              button-html="Lang"
+              nav="true"
+              placement="bottom-end"
+              togglertext="Dropdown"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                EN
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                ES
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                RU
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                FA
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+             
+            <cdropdown-stub
+              buttonhtml=<em>User</em>
+              nav="true"
+              placement="bottom-end"
+              togglertext="Dropdown"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Profile
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Signout
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+          </cnavbarnav-stub>
+        </ccollapse-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Navbar 
-        </strong>
-         
-        <small>
-          input group
-        </small>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <strong>
+         Navbar 
+      </strong>
+       
+      <small>
+        brand
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnavbar-stub
+        light="true"
+        tag="nav"
+        variant="faded"
       >
-        <cnavbar-stub
-          light="true"
-          tag="nav"
-          variant="light"
+        <cnavbarbrand-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          href="#"
+          routertag="a"
+          target="_self"
         >
-          <cform-stub
-            inline="true"
+          <img
+            alt="CoreuiVue"
+            class="d-inline-block align-top"
+            src="https://placekitten.com/g/30/30"
+          />
+          
+          CoreuiVue
+        
+        </cnavbarbrand-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Navbar 
+      </strong>
+       
+      <small>
+        text
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnavbar-stub
+        light="true"
+        tag="nav"
+        toggleable="sm"
+        variant="light"
+      >
+        <cnavbartoggle-stub />
+         
+        <cnavbarbrand-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+        >
+          CoreuiVue
+        </cnavbarbrand-stub>
+         
+        <ccollapse-stub
+          duration="400"
+          navbar="true"
+          transition="ease-in-out"
+        >
+          <cnavbarnav-stub
+            tag="ul"
           >
-            <cforminput-stub
-              class="c-mr-sm-2"
-              lazy="400"
-              placeholder="Username"
-              type="text"
-            />
-          </cform-stub>
-        </cnavbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
+            <span
+              class="navbar-text"
+            >
+              Navbar text
+            </span>
+          </cnavbarnav-stub>
+        </ccollapse-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Navbar 
+      </strong>
+       
+      <small>
+        dropdown
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnavbar-stub
+        tag="nav"
+        toggleable="sm"
+        variant="primary"
+      >
+        <cnavbartoggle-stub />
+         
+        <ccollapse-stub
+          duration="400"
+          navbar="true"
+          transition="ease-in-out"
+        >
+          <cnavbarnav-stub
+            tag="ul"
+          >
+            <cnavitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="span"
+              target="_self"
+            >
+              Home
+            </cnavitem-stub>
+             
+            <cnavitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="span"
+              target="_self"
+            >
+              Link
+            </cnavitem-stub>
+             
+            <cdropdown-stub
+              button-html="Lang"
+              nav="true"
+              placement="bottom-start"
+              right=""
+              togglertext="Dropdown"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                EN
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                ES
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                RU
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                FA
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+             
+            <cdropdown-stub
+              button-html="User"
+              nav="true"
+              placement="bottom-start"
+              right=""
+              togglertext="Dropdown"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Account
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Settings
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+          </cnavbarnav-stub>
+        </ccollapse-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Navbar 
+      </strong>
+       
+      <small>
+        form
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnavbar-stub
+        light="true"
+        tag="nav"
+        variant="light"
+      >
+        <cform-stub
+          inline="true"
+        >
+          <cforminput-stub
+            class="mr-sm-2"
+            lazy="400"
+            placeholder="Search"
+            size="sm"
+            type="text"
+          />
+           
+          <cbutton-stub
+            activeclass="active"
+            class="my-2 my-sm-0"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="submit"
+            variant="outline-success"
+          >
+            Search
+          </cbutton-stub>
+        </cform-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Navbar 
+      </strong>
+       
+      <small>
+        input group
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnavbar-stub
+        light="true"
+        tag="nav"
+        variant="light"
+      >
+        <cform-stub
+          inline="true"
+        >
+          <cforminput-stub
+            class="mr-sm-2"
+            lazy="400"
+            placeholder="Username"
+            type="text"
+          />
+        </cform-stub>
+      </cnavbar-stub>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index 0fae376c..ea26ee34 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -1,674 +1,670 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navs.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <ccard-stub
+<div>
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-        <strong>
-           Bootstrap Navs
-        </strong>
-         
-        <div
-          class="c-card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Nav"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
+      <strong>
+         Bootstrap Navs
+      </strong>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <div
+        class="card-header-actions"
       >
-        <cnav-stub>
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
+        <a
+          class="card-header-action"
+          href="https://coreui.io/vue/docs/3.0/components/Nav"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <small
+            class="text-muted"
+          >
+            docs
+          </small>
+        </a>
+      </div>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub>
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Active
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+          title="Link"
+        />
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Another Link
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        icons
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub>
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          <i
+            class="cui-basket-loaded"
+          />
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          
+          Link
+        
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          
+          Another Link
+        
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        tab style
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub
+        tabs="true"
+      >
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          
+          Active
+        
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          
+          Link
+        
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          
+          Another Link
+        
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        pill style
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub
+        pills="true"
+      >
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Active
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Another Link
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        fill tabs
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub
+        fill="true"
+        tabs="true"
+      >
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Active
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link with a long name 
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        justified tabs
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub
+        justified="true"
+        tabs="true"
+      >
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Active
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link with a long name 
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          disabled="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Disabled
+        </cnavitem-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        dropdown support
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cnav-stub
+        pills="true"
+      >
+        <cnavitem-stub
+          active="true"
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Active
+        </cnavitem-stub>
+         
+        <cnavitem-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          tag="span"
+          target="_self"
+        >
+          Link
+        </cnavitem-stub>
+         
+        <cdropdown-stub
+          button-content="Dropdown"
+          id="nav7_ddown"
+          nav="true"
+          placement="bottom-end"
+          togglertext="Dropdown"
+        >
+          <cdropdownitem-stub
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
-            tag="span"
             target="_self"
           >
-            Active
-          </cnavitem-stub>
+            one
+          </cdropdownitem-stub>
            
-          <cnavitem-stub
-            activeclass="c-active"
+          <cdropdownitem-stub
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
-            tag="span"
             target="_self"
-            title="Link"
+          >
+            two
+          </cdropdownitem-stub>
+           
+          <cdropdowndivider-stub
+            tag="div"
           />
            
-          <cnavitem-stub
-            activeclass="c-active"
+          <cdropdownitem-stub
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
-            tag="span"
             target="_self"
           >
-            Another Link
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
+            three
+          </cdropdownitem-stub>
+        </cdropdown-stub>
+      </cnav-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          icons
-        </small>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub>
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            <i
-              class="cui-basket-loaded"
-            />
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            
-            Link
-          
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            
-            Another Link
-          
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
+      <strong>
+         Bootstrap Navs 
+      </strong>
+       
+      <small>
+        vertical variation
+      </small>
+    </ccardheader-stub>
      
-    <ccard-stub
+    <ccardbody-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          tab style
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub
-          tabs="true"
+      <crow-stub>
+        <ccol-stub
+          class="m-0"
+          col="3"
+          tag="div"
         >
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
+          <cnav-stub
+            pills="true"
+            vertical="true"
           >
-            
-            Active
-          
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            
-            Link
-          
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            
-            Another Link
-          
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          pill style
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub
-          pills="true"
-        >
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Active
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Another Link
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          fill tabs
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub
-          fill="true"
-          tabs="true"
-        >
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Active
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link with a long name 
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          justified tabs
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub
-          justified="true"
-          tabs="true"
-        >
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Active
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link with a long name 
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            disabled="true"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Disabled
-          </cnavitem-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          dropdown support
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cnav-stub
-          pills="true"
-        >
-          <cnavitem-stub
-            active="true"
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Active
-          </cnavitem-stub>
-           
-          <cnavitem-stub
-            activeclass="c-active"
-            event="click"
-            exactactiveclass="c-active"
-            routertag="a"
-            tag="span"
-            target="_self"
-          >
-            Link
-          </cnavitem-stub>
-           
-          <cdropdown-stub
-            button-content="Dropdown"
-            id="nav7_ddown"
-            nav="true"
-            placement="bottom-end"
-            togglertext="Dropdown"
-          >
-            <cdropdownitem-stub
-              activeclass="c-active"
+            <cnavitem-stub
+              active="true"
+              activeclass="active"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
+              tag="span"
               target="_self"
             >
-              one
-            </cdropdownitem-stub>
+              Active
+            </cnavitem-stub>
              
-            <cdropdownitem-stub
-              activeclass="c-active"
+            <cnavitem-stub
+              activeclass="active"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
+              tag="span"
               target="_self"
             >
-              two
-            </cdropdownitem-stub>
+              Link
+            </cnavitem-stub>
              
-            <cdropdowndivider-stub
-              tag="div"
-            />
-             
-            <cdropdownitem-stub
-              activeclass="c-active"
+            <cnavitem-stub
+              activeclass="active"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
+              tag="span"
               target="_self"
             >
-              three
-            </cdropdownitem-stub>
-          </cdropdown-stub>
-        </cnav-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Navs 
-        </strong>
-         
-        <small>
-          vertical variation
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <crow-stub>
-          <ccol-stub
-            class="c-m-0"
-            col="3"
-            tag="div"
-          >
-            <cnav-stub
-              pills="true"
-              vertical="true"
+              Another Link
+            </cnavitem-stub>
+             
+            <cnavitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
             >
-              <cnavitem-stub
-                active="true"
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Active
-              </cnavitem-stub>
-               
-              <cnavitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Link
-              </cnavitem-stub>
-               
-              <cnavitem-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Another Link
-              </cnavitem-stub>
-               
-              <cnavitem-stub
-                activeclass="c-active"
-                disabled="true"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                tag="span"
-                target="_self"
-              >
-                Disabled
-              </cnavitem-stub>
-            </cnav-stub>
-          </ccol-stub>
-        </crow-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
+              Disabled
+            </cnavitem-stub>
+          </cnav-stub>
+        </ccol-stub>
+      </crow-stub>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
index 9472665f..03efd817 100644
--- a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
@@ -1,50 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Paginations.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <ccard-stub
+<div>
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Responsive bootstrap Pagination
-        </strong>
-         
-        <div
-          class="c-card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Pagination"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <strong>
+         Responsive bootstrap Pagination
+      </strong>
+       
+      <div
+        class="card-header-actions"
       >
+        <a
+          class="card-header-action"
+          href="https://coreui.io/vue/docs/3.0/components/Pagination"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <small
+            class="text-muted"
+          >
+            docs
+          </small>
+        </a>
+      </div>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        Default
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="start"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        responsive="true"
+        size="md"
+      />
+       
+      <br />
+       
+      <h6>
+        Small
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="start"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        size="sm"
+      />
+       
+      <br />
+       
+      <div>
         <h6>
-          Default
+          Large
         </h6>
          
         <cpagination-stub
@@ -57,140 +92,101 @@ exports[`Paginations.vue renders correctly 1`] = `
           pages="10"
           previousbuttonhtml="&lsaquo;"
           responsive="true"
-          size="md"
+          size="lg"
         />
          
         <br />
-         
-        <h6>
-          Small
-        </h6>
-         
-        <cpagination-stub
-          activepage="3"
-          align="start"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
-          limit="5"
-          nextbuttonhtml="&rsaquo;"
-          pages="10"
-          previousbuttonhtml="&lsaquo;"
-          size="sm"
-        />
-         
-        <br />
-         
-        <div>
-          <h6>
-            Large
-          </h6>
-           
-          <cpagination-stub
-            activepage="3"
-            align="start"
-            firstbuttonhtml="&laquo;"
-            lastbuttonhtml="&raquo;"
-            limit="5"
-            nextbuttonhtml="&rsaquo;"
-            pages="10"
-            previousbuttonhtml="&lsaquo;"
-            responsive="true"
-            size="lg"
-          />
-           
-          <br />
-        </div>
-         
-        <div>
-          currentPage: 3
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
+      </div>
+       
+      <div>
+        currentPage: 3
+      </div>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Pagination 
-        </strong>
-         
-        <small>
-          alignment
-        </small>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <h6>
-          Left alignment (default)
-        </h6>
-         
-        <cpagination-stub
-          activepage="3"
-          align="start"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
-          limit="5"
-          nextbuttonhtml="&rsaquo;"
-          pages="10"
-          previousbuttonhtml="&lsaquo;"
-          size="md"
-        />
-         
-        <br />
-         
-        <h6>
-          Center alignment
-        </h6>
-         
-        <cpagination-stub
-          activepage="3"
-          align="center"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
-          limit="5"
-          nextbuttonhtml="&rsaquo;"
-          pages="10"
-          previousbuttonhtml="&lsaquo;"
-          size="md"
-        />
-         
-        <br />
-         
-        <h6>
-          Right (end) alignment
-        </h6>
-         
-        <cpagination-stub
-          activepage="3"
-          align="end"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
-          limit="5"
-          nextbuttonhtml="&rsaquo;"
-          pages="10"
-          previousbuttonhtml="&lsaquo;"
-          size="md"
-        />
-         
-        <br />
-         
-        <div>
-          currentPage: 3
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
+      <strong>
+         Pagination 
+      </strong>
+       
+      <small>
+        alignment
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        Left alignment (default)
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="start"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        size="md"
+      />
+       
+      <br />
+       
+      <h6>
+        Center alignment
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="center"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        size="md"
+      />
+       
+      <br />
+       
+      <h6>
+        Right (end) alignment
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="end"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        size="md"
+      />
+       
+      <br />
+       
+      <div>
+        currentPage: 3
+      </div>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
index 52cc0525..cc0e0967 100644
--- a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
@@ -1,784 +1,785 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressBars.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <ccard-stub
+<div>
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Bootstrap Progress
+      </strong>
+       
+      <div
+        class="card-header-actions"
       >
-        <i
-          class="fa fa-align-justify"
+        <a
+          class="card-header-action"
+          href="https://coreui.io/vue/docs/3.0/components/Progress"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <small
+            class="text-muted"
+          >
+            docs
+          </small>
+        </a>
+      </div>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cprogress-stub
+        animated="true"
+        max="100"
+        precision="0"
+        showprogress="true"
+        value="73"
+      />
+       
+      <cprogress-stub
+        class="mt-1"
+        max="100"
+        precision="0"
+        showvalue="true"
+        value="0"
+      >
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="43.8"
+          variant="success"
         />
          
-        <strong>
-           Bootstrap Progress
-        </strong>
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="18.25"
+          variant="warning"
+        />
+         
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="10.95"
+          variant="danger"
+        />
+      </cprogress-stub>
+       
+      <cbutton-stub
+        activeclass="active"
+        class="mt-4"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+        type="button"
+        variant="secondary"
+      >
+        
+        Click me to animate progress bars
+      
+      </cbutton-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Progress 
+      </strong>
+      <small>
+        labels
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        No label
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="50"
+        precision="0"
+        value="33.333333333"
+      />
+       
+      <h6>
+        Value label
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="50"
+        precision="0"
+        showvalue="true"
+        value="33.333333333"
+      />
+       
+      <h6>
+        Progress label
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="50"
+        precision="0"
+        showprogress="true"
+        value="33.333333333"
+      />
+       
+      <h6>
+        Value label with precision
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="50"
+        precision="2"
+        showvalue="true"
+        value="33.333333333"
+      />
+       
+      <h6>
+        Progress label with precision
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="50"
+        precision="2"
+        showprogress="true"
+        value="33.333333333"
+      />
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        width
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        Default width
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        value="75"
+      />
+       
+      <h6>
+        Custom widths
+      </h6>
+       
+      <cprogress-stub
+        class="w-75 mb-2"
+        max="100"
+        precision="0"
+        value="75"
+      />
+       
+      <cprogress-stub
+        class="w-50 mb-2"
+        max="100"
+        precision="0"
+        value="75"
+      />
+       
+      <cprogress-stub
+        class="w-25"
+        max="100"
+        precision="0"
+        value="75"
+      />
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        height
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        Default height
+      </h6>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        showprogress="true"
+        value="75"
+      />
+       
+      <h6>
+        Custom heights
+      </h6>
+       
+      <cprogress-stub
+        class="mb-2"
+        height="2rem"
+        max="100"
+        precision="0"
+        showprogress="true"
+        value="75"
+      />
+       
+      <cprogress-stub
+        class="mb-2"
+        height="20px"
+        max="100"
+        precision="0"
+        showprogress="true"
+        value="75"
+      />
+       
+      <cprogress-stub
+        height="2px"
+        max="100"
+        precision="0"
+        value="75"
+      />
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        variants
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          success:
+        </div>
          
         <div
-          class="c-card-header-actions"
+          class="col-sm-10 pt-1"
         >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Progress"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cprogress-stub
-          animated="true"
-          max="100"
-          precision="0"
-          showprogress="true"
-          value="73"
-        />
-         
-        <cprogress-stub
-          class="c-mt-1"
-          max="100"
-          precision="0"
-          showvalue="true"
-        >
-          <cprogressbar-stub
+          <cprogress-stub
             max="100"
             precision="0"
-            value="43.8"
+            value="75"
             variant="success"
           />
-           
-          <cprogressbar-stub
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          info:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
             max="100"
             precision="0"
-            value="18.25"
+            value="75"
+            variant="info"
+          />
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          warning:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
+            max="100"
+            precision="0"
+            value="75"
             variant="warning"
           />
-           
-          <cprogressbar-stub
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          danger:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
             max="100"
             precision="0"
-            value="10.95"
+            value="75"
             variant="danger"
           />
-        </cprogress-stub>
-         
-        <cbutton-stub
-          activeclass="c-active"
-          class="c-mt-4"
-          event="click"
-          exactactiveclass="c-active"
-          routertag="a"
-          target="_self"
-          type="button"
-          variant="secondary"
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
         >
-          
-          Click me to animate progress bars
+          primary:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
+            max="100"
+            precision="0"
+            value="75"
+            variant="primary"
+          />
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          secondary:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
+            max="100"
+            precision="0"
+            value="75"
+            variant="secondary"
+          />
+        </div>
+      </div>
+      <div
+        class="row mb-1"
+      >
+        <div
+          class="col-sm-2"
+        >
+          dark:
+        </div>
+         
+        <div
+          class="col-sm-10 pt-1"
+        >
+          <cprogress-stub
+            max="100"
+            precision="0"
+            value="75"
+            variant="dark"
+          />
+        </div>
+      </div>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        striped
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cprogress-stub
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="25"
+        variant="success"
+      />
+       
+      <cprogress-stub
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="50"
+        variant="info"
+      />
+       
+      <cprogress-stub
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="75"
+        variant="warning"
+      />
+       
+      <cprogress-stub
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="100"
+        variant="danger"
+      />
+       
+      <cbutton-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+        type="button"
+        variant="secondary"
+      >
         
-        </cbutton-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
+        Remove Striped
+      
+      </cbutton-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-        <small>
-          labels
-        </small>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <h6>
-          No label
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="50"
-          precision="0"
-          value="33.333333333"
-        />
-         
-        <h6>
-          Value label
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="50"
-          precision="0"
-          showvalue="true"
-          value="33.333333333"
-        />
-         
-        <h6>
-          Progress label
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="50"
-          precision="0"
-          showprogress="true"
-          value="33.333333333"
-        />
-         
-        <h6>
-          Value label with precision
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="50"
-          precision="2"
-          showvalue="true"
-          value="33.333333333"
-        />
-         
-        <h6>
-          Progress label with precision
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="50"
-          precision="2"
-          showprogress="true"
-          value="33.333333333"
-        />
-      </ccardbody-stub>
-    </ccard-stub>
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        animated
+      </small>
+    </ccardheader-stub>
      
-    <ccard-stub
+    <ccardbody-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          width
-        </small>
-      </ccardheader-stub>
+      <cprogress-stub
+        animated="true"
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="25"
+        variant="success"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <cprogress-stub
+        animated="true"
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="50"
+        variant="info"
+      />
+       
+      <cprogress-stub
+        animated="true"
+        class="mb-2"
+        max="100"
+        precision="0"
+        striped="true"
+        value="75"
+        variant="warning"
+      />
+       
+      <cprogress-stub
+        animated="true"
+        class="mb-3"
+        max="100"
+        precision="0"
+        value="100"
+        variant="danger"
+      />
+       
+      <cbutton-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+        type="button"
+        variant="secondary"
       >
-        <h6>
-          Default width
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="100"
-          precision="0"
-          value="75"
-        />
-         
-        <h6>
-          Custom widths
-        </h6>
-         
-        <cprogress-stub
-          class="c-w-75 c-mb-2"
-          max="100"
-          precision="0"
-          value="75"
-        />
-         
-        <cprogress-stub
-          class="c-w-50 c-mb-2"
-          max="100"
-          precision="0"
-          value="75"
-        />
-         
-        <cprogress-stub
-          class="c-w-25"
-          max="100"
-          precision="0"
-          value="75"
-        />
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
+        
+        Stop Animation
+      
+      </cbutton-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          height
-        </small>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <h6>
-          Default height
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="100"
-          precision="0"
-          showprogress="true"
-          value="75"
-        />
-         
-        <h6>
-          Custom heights
-        </h6>
-         
-        <cprogress-stub
-          class="c-mb-2"
-          height="2rem"
-          max="100"
-          precision="0"
-          showprogress="true"
-          value="75"
-        />
-         
-        <cprogress-stub
-          class="c-mb-2"
-          height="20px"
-          max="100"
-          precision="0"
-          showprogress="true"
-          value="75"
-        />
-         
-        <cprogress-stub
-          height="2px"
-          max="100"
-          precision="0"
-          value="75"
-        />
-      </ccardbody-stub>
-    </ccard-stub>
+      <strong>
+         Progress 
+      </strong>
+       
+      <small>
+        multiple bars
+      </small>
+    </ccardheader-stub>
      
-    <ccard-stub
+    <ccardbody-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        value="0"
       >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          variants
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            success:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="success"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            info:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="info"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            warning:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="warning"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            danger:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="danger"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            primary:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="primary"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            secondary:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="secondary"
-            />
-          </div>
-        </div>
-        <div
-          class="c-row c-mb-1"
-        >
-          <div
-            class="c-col-sm-2"
-          >
-            dark:
-          </div>
-           
-          <div
-            class="c-col-sm-10 c-pt-1"
-          >
-            <cprogress-stub
-              max="100"
-              precision="0"
-              value="75"
-              variant="dark"
-            />
-          </div>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          striped
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <cprogress-stub
-          class="c-mb-2"
+        <cprogressbar-stub
           max="100"
           precision="0"
-          striped="true"
-          value="25"
+          value="15"
+          variant="primary"
+        />
+         
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="30"
           variant="success"
         />
          
-        <cprogress-stub
-          class="c-mb-2"
+        <cprogressbar-stub
           max="100"
           precision="0"
-          striped="true"
-          value="50"
+          value="20"
           variant="info"
         />
-         
-        <cprogress-stub
-          class="c-mb-2"
-          max="100"
-          precision="0"
-          striped="true"
-          value="75"
-          variant="warning"
-        />
-         
-        <cprogress-stub
-          class="c-mb-2"
-          max="100"
-          precision="0"
-          striped="true"
-          value="100"
-          variant="danger"
-        />
-         
-        <cbutton-stub
-          activeclass="c-active"
-          event="click"
-          exactactiveclass="c-active"
-          routertag="a"
-          target="_self"
-          type="button"
-          variant="secondary"
-        >
-          
-          Remove Striped
-        
-        </cbutton-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          animated
-        </small>
-      </ccardheader-stub>
+      </cprogress-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        showprogress="true"
+        value="0"
       >
-        <cprogress-stub
-          animated="true"
-          class="c-mb-2"
+        <cprogressbar-stub
           max="100"
           precision="0"
-          striped="true"
-          value="25"
+          value="15"
+          variant="primary"
+        />
+         
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="30"
           variant="success"
         />
          
-        <cprogress-stub
-          animated="true"
-          class="c-mb-2"
+        <cprogressbar-stub
           max="100"
           precision="0"
-          striped="true"
-          value="50"
+          value="20"
           variant="info"
         />
-         
-        <cprogress-stub
-          animated="true"
-          class="c-mb-2"
-          max="100"
-          precision="0"
-          striped="true"
-          value="75"
-          variant="warning"
-        />
-         
-        <cprogress-stub
-          animated="true"
-          class="c-mb-3"
-          max="100"
-          precision="0"
-          value="100"
-          variant="danger"
-        />
-         
-        <cbutton-stub
-          activeclass="c-active"
-          event="click"
-          exactactiveclass="c-active"
-          routertag="a"
-          target="_self"
-          type="button"
-          variant="secondary"
-        >
-          
-          Stop Animation
-        
-        </cbutton-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Progress 
-        </strong>
-         
-        <small>
-          multiple bars
-        </small>
-      </ccardheader-stub>
+      </cprogress-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        showvalue="true"
+        striped="true"
+        value="0"
       >
-        <cprogress-stub
-          class="c-mb-3"
+        <cprogressbar-stub
           max="100"
           precision="0"
-        >
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="15"
-            variant="primary"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="30"
-            variant="success"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="20"
-            variant="info"
-          />
-        </cprogress-stub>
+          value="15"
+          variant="primary"
+        />
          
-        <cprogress-stub
-          class="c-mb-3"
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="30"
+          variant="success"
+        />
+         
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          value="20"
+          variant="info"
+        />
+      </cprogress-stub>
+       
+      <cprogress-stub
+        class="mb-3"
+        max="100"
+        precision="0"
+        value="0"
+      >
+        <cprogressbar-stub
           max="100"
           precision="0"
           showprogress="true"
-        >
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="15"
-            variant="primary"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="30"
-            variant="success"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="20"
-            variant="info"
-          />
-        </cprogress-stub>
+          value="15"
+          variant="primary"
+        />
          
-        <cprogress-stub
-          class="c-mb-3"
+        <cprogressbar-stub
+          animated="true"
           max="100"
           precision="0"
-          showvalue="true"
+          showprogress="true"
+          value="30"
+          variant="success"
+        />
+         
+        <cprogressbar-stub
+          max="100"
+          precision="0"
+          showprogress="true"
           striped="true"
-        >
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="15"
-            variant="primary"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="30"
-            variant="success"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            value="20"
-            variant="info"
-          />
-        </cprogress-stub>
-         
-        <cprogress-stub
-          class="c-mb-3"
-          max="100"
-          precision="0"
-        >
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            showprogress="true"
-            value="15"
-            variant="primary"
-          />
-           
-          <cprogressbar-stub
-            animated="true"
-            max="100"
-            precision="0"
-            showprogress="true"
-            value="30"
-            variant="success"
-          />
-           
-          <cprogressbar-stub
-            max="100"
-            precision="0"
-            showprogress="true"
-            striped="true"
-            value="20"
-            variant="info"
-          />
-        </cprogress-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
+          value="20"
+          variant="info"
+        />
+      </cprogress-stub>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index d5819a51..4e1946a2 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -20,10 +20,10 @@ exports[`Switches.vue renders correctly 1`] = `
           Radio switches
           
           <cbadge-stub
-            activeclass="c-active"
-            class="c-mr-auto"
+            activeclass="active"
+            class="mr-auto"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             tag="span"
             target="_self"
@@ -33,7 +33,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </cbadge-stub>
            
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -56,7 +56,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -68,7 +68,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -80,7 +80,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -92,7 +92,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -104,7 +104,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -116,7 +116,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -128,7 +128,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -140,7 +140,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
           <cswitch-stub
             checked="primary"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             name="radio"
@@ -173,9 +173,9 @@ exports[`Switches.vue renders correctly 1`] = `
           Switch default
           
           <cbadge-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             tag="span"
             target="_self"
@@ -191,7 +191,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="yes"
-            class="c-mx-1"
+            class="mx-1"
             falsevalue="no"
             name="switch1"
             truevalue="yes"
@@ -201,49 +201,49 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="secondary"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="success"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="warning"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="info"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="danger"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="light"
           />
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             type="checkbox"
             variant="primary"
@@ -276,7 +276,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="primary"
@@ -284,7 +284,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="secondary"
@@ -292,7 +292,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="success"
@@ -300,7 +300,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="warning"
@@ -308,7 +308,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="info"
@@ -316,7 +316,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="danger"
@@ -324,7 +324,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="light"
@@ -332,14 +332,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="pill"
             type="checkbox"
@@ -373,7 +373,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="primary"
@@ -381,7 +381,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="secondary"
@@ -389,7 +389,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="success"
@@ -397,7 +397,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="warning"
@@ -405,7 +405,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="info"
@@ -413,7 +413,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="danger"
@@ -421,7 +421,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="light"
@@ -429,14 +429,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="3d"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -474,7 +474,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -483,7 +483,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -492,7 +492,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -501,7 +501,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -510,7 +510,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -519,7 +519,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -528,7 +528,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -537,7 +537,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -545,7 +545,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="3d"
             type="checkbox"
@@ -583,7 +583,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -592,7 +592,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -601,7 +601,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -610,7 +610,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -619,7 +619,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -628,7 +628,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -637,7 +637,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -646,7 +646,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -654,7 +654,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             shape="3d"
@@ -693,7 +693,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -703,7 +703,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -713,7 +713,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -723,7 +723,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -733,7 +733,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -743,7 +743,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -753,7 +753,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -763,7 +763,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="3d"
@@ -772,7 +772,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -812,7 +812,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -823,7 +823,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -834,7 +834,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -845,7 +845,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -856,7 +856,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -867,7 +867,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -878,7 +878,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -889,7 +889,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -899,7 +899,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -940,7 +940,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -949,7 +949,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -958,7 +958,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -967,7 +967,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -976,7 +976,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -985,7 +985,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -994,7 +994,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -1003,7 +1003,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="3d"
             type="checkbox"
@@ -1011,7 +1011,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             shape="3d"
@@ -1050,7 +1050,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="primary"
@@ -1058,7 +1058,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="secondary"
@@ -1066,7 +1066,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="success"
@@ -1074,7 +1074,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="warning"
@@ -1082,7 +1082,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="info"
@@ -1090,7 +1090,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="danger"
@@ -1098,7 +1098,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="light"
@@ -1106,14 +1106,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="true"
             type="checkbox"
@@ -1151,7 +1151,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1160,7 +1160,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1169,7 +1169,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1178,7 +1178,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1187,7 +1187,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1196,7 +1196,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1205,7 +1205,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1214,7 +1214,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1222,7 +1222,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="true"
             shape="pill"
@@ -1261,7 +1261,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="primary"
@@ -1269,7 +1269,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="secondary"
@@ -1277,7 +1277,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="success"
@@ -1285,7 +1285,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="warning"
@@ -1293,7 +1293,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="info"
@@ -1301,7 +1301,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="danger"
@@ -1309,7 +1309,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="light"
@@ -1317,14 +1317,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             type="checkbox"
@@ -1362,7 +1362,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1371,7 +1371,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1380,7 +1380,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1389,7 +1389,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1398,7 +1398,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1407,7 +1407,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1416,7 +1416,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1425,7 +1425,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1433,7 +1433,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             shape="pill"
@@ -1472,62 +1472,62 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="primary"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="secondary"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="success"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="warning"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="info"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="danger"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="light"
           />
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             type="checkbox"
             variant="primary"
@@ -1564,7 +1564,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="primary"
@@ -1572,7 +1572,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="secondary"
@@ -1580,7 +1580,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="success"
@@ -1588,7 +1588,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="warning"
@@ -1596,7 +1596,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="info"
@@ -1604,7 +1604,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="danger"
@@ -1612,7 +1612,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="light"
@@ -1620,14 +1620,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             shape="pill"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             shape="pill"
             type="checkbox"
@@ -1665,7 +1665,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="primary"
@@ -1673,7 +1673,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="secondary"
@@ -1681,7 +1681,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="success"
@@ -1689,7 +1689,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="warning"
@@ -1697,7 +1697,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="info"
@@ -1705,7 +1705,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="danger"
@@ -1713,7 +1713,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="light"
@@ -1721,14 +1721,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="true"
             type="checkbox"
@@ -1766,7 +1766,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1775,7 +1775,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1784,7 +1784,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1793,7 +1793,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1802,7 +1802,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1811,7 +1811,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1820,7 +1820,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1829,7 +1829,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="true"
             shape="pill"
             type="checkbox"
@@ -1837,7 +1837,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="true"
             shape="pill"
@@ -1876,7 +1876,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="primary"
@@ -1884,7 +1884,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="secondary"
@@ -1892,7 +1892,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="success"
@@ -1900,7 +1900,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="warning"
@@ -1908,7 +1908,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="info"
@@ -1916,7 +1916,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="danger"
@@ -1924,7 +1924,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="light"
@@ -1932,14 +1932,14 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             type="checkbox"
             variant="dark"
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             type="checkbox"
@@ -1977,7 +1977,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1986,7 +1986,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -1995,7 +1995,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2004,7 +2004,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2013,7 +2013,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2022,7 +2022,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2031,7 +2031,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2040,7 +2040,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             outline="alt"
             shape="pill"
             type="checkbox"
@@ -2048,7 +2048,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             outline="alt"
             shape="pill"
@@ -2087,7 +2087,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2096,7 +2096,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2105,7 +2105,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2114,7 +2114,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2123,7 +2123,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2132,7 +2132,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2141,7 +2141,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2150,7 +2150,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             type="checkbox"
@@ -2158,7 +2158,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2199,7 +2199,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2209,7 +2209,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2219,7 +2219,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2229,7 +2229,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2239,7 +2239,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2249,7 +2249,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2259,7 +2259,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2269,7 +2269,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             shape="pill"
@@ -2278,7 +2278,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2318,7 +2318,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2328,7 +2328,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2338,7 +2338,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2348,7 +2348,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2358,7 +2358,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2368,7 +2368,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2378,7 +2378,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2388,7 +2388,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2397,7 +2397,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2437,7 +2437,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2448,7 +2448,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2459,7 +2459,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2470,7 +2470,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2481,7 +2481,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2492,7 +2492,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2503,7 +2503,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2514,7 +2514,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="true"
@@ -2524,7 +2524,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2565,7 +2565,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2575,7 +2575,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2585,7 +2585,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2595,7 +2595,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2605,7 +2605,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2615,7 +2615,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2625,7 +2625,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2635,7 +2635,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2644,7 +2644,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2684,7 +2684,7 @@ exports[`Switches.vue renders correctly 1`] = `
         >
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="no"
             labelon="yes"
             outline="alt"
@@ -2695,7 +2695,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2706,7 +2706,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2717,7 +2717,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2728,7 +2728,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2739,7 +2739,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2750,7 +2750,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2761,7 +2761,7 @@ exports[`Switches.vue renders correctly 1`] = `
            
           <cswitch-stub
             checked="true"
-            class="c-mx-1"
+            class="mx-1"
             labeloff="✕"
             labelon="✓"
             outline="alt"
@@ -2771,7 +2771,7 @@ exports[`Switches.vue renders correctly 1`] = `
           />
            
           <cswitch-stub
-            class="c-mx-1"
+            class="mx-1"
             disabled=""
             labeloff="✕"
             labelon="✓"
@@ -2802,12 +2802,12 @@ exports[`Switches.vue renders correctly 1`] = `
         </ccardheader-stub>
          
         <ccardbody-stub
-          class="c-p-0"
+          class="p-0"
           subtitletag="h6"
           titletag="h4"
         >
           <ctable-stub
-            class="c-table-align-middle c-mb-0"
+            class="table-align-middle mb-0"
             defaultsorter="[object Object]"
             fields="[object Object],[object Object],[object Object]"
             hover="true"
diff --git a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
index 19c62928..964538d7 100644
--- a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
@@ -19,7 +19,7 @@ exports[`Tables.vue renders correctly 1`] = `
           CTable component functionality presentation
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -41,10 +41,6 @@ exports[`Tables.vue renders correctly 1`] = `
           titletag="h4"
         >
           <ctable-stub
-            dark-header=""
-            default-filter="2012"
-            default-sorters="username,asc"
-            defaultcolumnfilter="[object Object]"
             defaultsorter="[object Object]"
             fields="[object Object],registered,[object Object],[object Object],[object Object]"
             filterrow="true"
@@ -55,7 +51,7 @@ exports[`Tables.vue renders correctly 1`] = `
             itemsperpage="10"
             optionsrow="true"
             pagination="true"
-            per-page="6"
+            sorting="true"
           />
         </ccardbody-stub>
       </ccard-stub>
diff --git a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
index 449c46ee..d97a13fd 100644
--- a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
@@ -20,7 +20,7 @@ exports[`Tabs.vue renders correctly 1`] = `
           Tabs
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -230,6 +230,89 @@ exports[`Tabs.vue renders correctly 1`] = `
       </ccard-stub>
     </ccol-stub>
      
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs with icons
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            addtabclasses="mt-1"
+            tabs="true"
+          >
+            <ctab-stub
+              active="true"
+            >
+              <template>
+                <i
+                  class="cui-calculator"
+                />
+                 Calculator
+              
+              </template>
+              
+              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
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-basket-loaded"
+                />
+                 Shopping cart
+              
+              </template>
+              
+              2. 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
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-pie-chart"
+                />
+                 Charts
+              
+              </template>
+              
+              3. 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
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
     <ccol-stub
       lg="6"
       tag="div"
diff --git a/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
index 9d64b59b..b030394f 100644
--- a/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
@@ -1,389 +1,385 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltips.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <ccard-stub
+<div>
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Tooltips 
-        </strong>
-         
-        <small>
-          <code>
-            v-c-tooltip
-          </code>
-           directive
-        </small>
-         
-        <div
-          class="c-card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Tooltip"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
+      <i
+        class="fa fa-align-justify"
+      />
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
+      <strong>
+         Bootstrap Tooltips 
+      </strong>
+       
+      <small>
+        <code>
+          v-c-tooltip
+        </code>
+         directive
+      </small>
+       
+      <div
+        class="card-header-actions"
+      >
+        <a
+          class="card-header-action"
+          href="https://coreui.io/vue/docs/3.0/components/Tooltip"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <small
+            class="text-muted"
+          >
+            docs
+          </small>
+        </a>
+      </div>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <crow-stub>
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Hover Me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+         
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Hover me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+         
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Click me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+      </crow-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Tooltips 
+      </strong>
+       
+      <small>
+        placement
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <div
+        class="my-3"
       >
         <crow-stub>
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
-              class="c-text-center c-my-3"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Hover Me
               
-              </cbutton-stub>
-            </div>
+              top-start
+            
+            </cbutton-stub>
           </ccol-stub>
-           
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
-              class="c-text-center c-my-3"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Hover me
               
-              </cbutton-stub>
-            </div>
+              top
+            
+            </cbutton-stub>
           </ccol-stub>
-           
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
-              class="c-text-center c-my-3"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Click me
               
-              </cbutton-stub>
-            </div>
+              top-end
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom-end
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right-end
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left-end
+            
+            </cbutton-stub>
           </ccol-stub>
         </crow-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Tooltips 
-        </strong>
-         
-        <small>
-          placement
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <div
-          class="c-my-3"
-        >
-          <crow-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-          </crow-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
+      </div>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;
diff --git a/tests/unit/views/buttons/BrandButtons.spec.js b/tests/unit/views/buttons/BrandButtons.spec.js
index 652b129d..f0e0bf39 100644
--- a/tests/unit/views/buttons/BrandButtons.spec.js
+++ b/tests/unit/views/buttons/BrandButtons.spec.js
@@ -11,7 +11,7 @@ Vue.use(CoreuiVue)
 
 describe('BrandButtons.vue', () => {
   it('has a name', () => {
-    expect(BrandButtons.name).toMatch('brand-buttons')
+    expect(BrandButtons.name).toBe('BrandButtons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(BrandButtons)
diff --git a/tests/unit/views/buttons/ButtonDropdowns.spec.js b/tests/unit/views/buttons/ButtonDropdowns.spec.js
index 97172867..6e4aba7c 100644
--- a/tests/unit/views/buttons/ButtonDropdowns.spec.js
+++ b/tests/unit/views/buttons/ButtonDropdowns.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Dropdowns.vue', () => {
   it('has a name', () => {
-    expect(Dropdowns.name).toMatch('Dropdowns')
+    expect(Dropdowns.name).toBe('Dropdowns')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Dropdowns)
diff --git a/tests/unit/views/buttons/ButtonGroups.spec.js b/tests/unit/views/buttons/ButtonGroups.spec.js
index 6d460850..75b2d823 100644
--- a/tests/unit/views/buttons/ButtonGroups.spec.js
+++ b/tests/unit/views/buttons/ButtonGroups.spec.js
@@ -8,7 +8,7 @@ Vue.use(CoreuiVue)
 describe('ButtonGroups.vue', () => {
   const wrapper = shallowMount(ButtonGroups)
   it('has a name', () => {
-    expect(ButtonGroups.name).toMatch('button-groups')
+    expect(ButtonGroups.name).toBe('ButtonGroups')
   })
   it('is Vue instance', () => {
     expect(wrapper.isVueInstance()).toBe(true)
diff --git a/tests/unit/views/buttons/StandardButtons.spec.js b/tests/unit/views/buttons/StandardButtons.spec.js
index 79267102..24fb3d0a 100644
--- a/tests/unit/views/buttons/StandardButtons.spec.js
+++ b/tests/unit/views/buttons/StandardButtons.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('StandardButtons.vue', () => {
   it('has a name', () => {
-    expect(StandardButtons.name).toMatch('standard-buttons')
+    expect(StandardButtons.name).toBe('StandardButtons')
   })
   it('has a created hook', () => {
     expect(typeof StandardButtons.data).toMatch('function')
diff --git a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
index 5c9b1e9f..c922e36a 100644
--- a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
@@ -1,2448 +1,2429 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrandButtons.vue renders correctly 1`] = `
-<div>
+<div
+  class="row"
+>
   <div
-    class="c-row"
+    class="col-12"
   >
     <div
-      class="c-col-12"
+      class="card"
     >
-      <div
-        class="c-card"
+      <!---->
+      <header
+        class="card-header"
       >
-        <!---->
-        <header
-          class="c-card-header"
+        <strong>
+          Brand Button
+        </strong>
+         
+        <div
+          class="card-header-actions"
         >
-          <strong>
-            Brand Button
-          </strong>
-           
-          <div
-            class="c-card-header-actions"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
-              rel="noreferrer noopener"
-              target="_blank"
+            <small
+              class="text-muted"
             >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </header>
+              docs
+            </small>
+          </a>
+        </div>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <small>
+          Usage 
+        </small>
          
-        <div
-          class="c-card-body"
-        >
-          <!---->
-          <!---->
-          <small>
-            Usage 
-          </small>
-           
-          <code>
-            
-            &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
+        <code>
+          &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
+        </code>
+         
+        <hr />
+         
+        <h6>
           
-          </code>
-           
-          <hr />
-           
-          <h6>
-            
-            Size Small
-            
-            <small>
-              Add 
-              <code>
-                size="sm"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-sm"
-              name="facebook"
-              type="button"
+          Size Small
+          
+          <small>
+            Add 
+            <code>
+              size="sm"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-sm"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-               
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-sm"
-              name="twitter"
-              type="button"
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+             
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter btn-sm"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-               
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-sm"
-              name="linkedin"
-              type="button"
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+             
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin btn-sm"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-               
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-sm"
-              name="flickr"
-              type="button"
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+             
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr btn-sm"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-               
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-sm"
-              name="tumblr"
-              type="button"
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+             
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr btn-sm"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-               
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-sm"
-              name="xing"
-              type="button"
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+             
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing btn-sm"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-               
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-sm"
-              name="github"
-              type="button"
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+             
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github btn-sm"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-               
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-sm"
-              name="stack-overflow"
-              type="button"
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+             
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-sm"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-               
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-sm"
-              name="youtube"
-              type="button"
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+             
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube btn-sm"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-               
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-sm"
-              name="dribbble"
-              type="button"
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+             
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble btn-sm"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-               
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-sm"
-              name="instagram"
-              type="button"
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+             
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram btn-sm"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-               
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-sm"
-              name="pinterest"
-              type="button"
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+             
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest btn-sm"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-               
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-sm"
-              name="vk"
-              type="button"
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+             
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk btn-sm"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-               
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-sm"
-              name="yahoo"
-              type="button"
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+             
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo btn-sm"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-               
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-sm"
-              name="behance"
-              type="button"
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+             
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance btn-sm"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-               
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-sm"
-              name="reddit"
-              type="button"
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+             
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit btn-sm"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-               
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-sm"
-              name="vimeo"
-              type="button"
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+             
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo btn-sm"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-               
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-           
-          <h6>
-            Size Normal
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook"
-              name="facebook"
-              type="button"
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+             
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
+         
+        <h6>
+          Size Normal
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-               
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter"
-              name="twitter"
-              type="button"
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+             
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-               
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin"
-              name="linkedin"
-              type="button"
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+             
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-               
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr"
-              name="flickr"
-              type="button"
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+             
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-               
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr"
-              name="tumblr"
-              type="button"
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+             
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-               
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing"
-              name="xing"
-              type="button"
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+             
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-               
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github"
-              name="github"
-              type="button"
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+             
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-               
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow"
-              name="stack-overflow"
-              type="button"
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+             
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-               
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube"
-              name="youtube"
-              type="button"
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+             
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-               
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble"
-              name="dribbble"
-              type="button"
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+             
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-               
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram"
-              name="instagram"
-              type="button"
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+             
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-               
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest"
-              name="pinterest"
-              type="button"
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+             
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-               
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk"
-              name="vk"
-              type="button"
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+             
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-               
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo"
-              name="yahoo"
-              type="button"
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+             
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-               
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance"
-              name="behance"
-              type="button"
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+             
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-               
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit"
-              name="reddit"
-              type="button"
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+             
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-               
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo"
-              name="vimeo"
-              type="button"
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+             
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-               
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-           
-          <h6>
-            Size Large 
-            <small>
-              Add 
-              <code>
-                size="lg"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-lg"
-              name="facebook"
-              type="button"
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+             
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
+         
+        <h6>
+          Size Large 
+          <small>
+            Add 
+            <code>
+              size="lg"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-lg"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-               
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-lg"
-              name="twitter"
-              type="button"
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+             
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter btn-lg"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-               
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-lg"
-              name="linkedin"
-              type="button"
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+             
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin btn-lg"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-               
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-lg"
-              name="flickr"
-              type="button"
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+             
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr btn-lg"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-               
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-lg"
-              name="tumblr"
-              type="button"
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+             
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr btn-lg"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-               
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-lg"
-              name="xing"
-              type="button"
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+             
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing btn-lg"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-               
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-lg"
-              name="github"
-              type="button"
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+             
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github btn-lg"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-               
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-lg"
-              name="stack-overflow"
-              type="button"
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+             
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-lg"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-               
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-lg"
-              name="youtube"
-              type="button"
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+             
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube btn-lg"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-               
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-lg"
-              name="dribbble"
-              type="button"
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+             
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble btn-lg"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-               
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-lg"
-              name="instagram"
-              type="button"
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+             
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram btn-lg"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-               
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-lg"
-              name="pinterest"
-              type="button"
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+             
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest btn-lg"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-               
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-lg"
-              name="vk"
-              type="button"
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+             
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk btn-lg"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-               
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-lg"
-              name="yahoo"
-              type="button"
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+             
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo btn-lg"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-               
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-lg"
-              name="behance"
-              type="button"
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+             
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance btn-lg"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-               
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-lg"
-              name="reddit"
-              type="button"
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+             
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit btn-lg"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-               
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-lg"
-              name="vimeo"
-              type="button"
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+             
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo btn-lg"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-               
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-        </div>
-        <!---->
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+             
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
       </div>
+      <!---->
     </div>
-     
+  </div>
+   
+  <div
+    class="col-12"
+  >
     <div
-      class="c-col-12"
+      class="card"
     >
+      <!---->
+      <header
+        class="card-header"
+      >
+        <strong>
+          Brand Button 
+        </strong>
+         
+        <small>
+          Icons only
+        </small>
+      </header>
+       
       <div
-        class="c-card"
+        class="card-body"
       >
         <!---->
-        <header
-          class="c-card-header"
-        >
-          <strong>
-            Brand Button 
-          </strong>
-           
-          <small>
-            Icons only
-          </small>
-        </header>
-         
-        <div
-          class="c-card-body"
-        >
-          <!---->
-          <!---->
-          <small>
-            Usage 
-          </small>
-           
-          <code>
-            
-              {{ \`
-            <button
-              class="c-btn c-btn-facebook"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-            </button>
-            \` }}
-            
-          </code>
-           
-          <hr />
-           
-          <h6>
-            Size Small 
-            <small>
-              Add 
-              <code>
-                size="sm"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-sm"
-              name="facebook"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-sm"
-              name="twitter"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-sm"
-              name="linkedin"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-sm"
-              name="flickr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-sm"
-              name="tumblr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-sm"
-              name="xing"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-sm"
-              name="github"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-sm"
-              name="stack-overflow"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-sm"
-              name="youtube"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-sm"
-              name="dribbble"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-sm"
-              name="instagram"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-sm"
-              name="pinterest"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-sm"
-              name="vk"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-sm"
-              name="yahoo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-sm"
-              name="behance"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-sm"
-              name="reddit"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-sm"
-              name="vimeo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-            </button>
-          </p>
-           
-          <h6>
-            Size Normal
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook"
-              name="facebook"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-twitter"
-              name="twitter"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin"
-              name="linkedin"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-flickr"
-              name="flickr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr"
-              name="tumblr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-xing"
-              name="xing"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-github"
-              name="github"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow"
-              name="stack-overflow"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-youtube"
-              name="youtube"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble"
-              name="dribbble"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-instagram"
-              name="instagram"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest"
-              name="pinterest"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vk"
-              name="vk"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo"
-              name="yahoo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-behance"
-              name="behance"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-reddit"
-              name="reddit"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo"
-              name="vimeo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-            </button>
-          </p>
-           
-          <h6>
-            Size Large 
-            <small>
-              Add 
-              <code>
-                size="lg"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-lg"
-              name="facebook"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-lg"
-              name="twitter"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-lg"
-              name="linkedin"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-lg"
-              name="flickr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-lg"
-              name="tumblr"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-lg"
-              name="xing"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-lg"
-              name="github"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-lg"
-              name="stack-overflow"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-lg"
-              name="youtube"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-lg"
-              name="dribbble"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-lg"
-              name="instagram"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-lg"
-              name="pinterest"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 496 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-lg"
-              name="vk"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-lg"
-              name="yahoo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-lg"
-              name="behance"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-lg"
-              name="reddit"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
-                />
-              </svg>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-lg"
-              name="vimeo"
-              type="button"
-            >
-              <svg
-                style="fill: currentColor;"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
-                />
-              </svg>
-            </button>
-          </p>
-        </div>
         <!---->
+        <small>
+          Usage 
+        </small>
+         
+        <code>
+          &lt;CButton variant="facebook"&gt;&lt;CIcon name="facebook"/&gt;&lt;/CButton&gt;
+        </code>
+         
+        <hr />
+         
+        <h6>
+          Size Small 
+          <small>
+            Add 
+            <code>
+              size="sm"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-sm"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-twitter btn-sm"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-linkedin btn-sm"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-flickr btn-sm"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-tumblr btn-sm"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-xing btn-sm"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-github btn-sm"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-sm"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-youtube btn-sm"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-dribbble btn-sm"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-instagram btn-sm"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-pinterest btn-sm"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vk btn-sm"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-yahoo btn-sm"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-behance btn-sm"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-reddit btn-sm"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vimeo btn-sm"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+          </button>
+        </p>
+         
+        <h6>
+          Size Normal
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-twitter"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-linkedin"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-flickr"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-tumblr"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-xing"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-github"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-stack-overflow"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-youtube"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-dribbble"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-instagram"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-pinterest"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vk"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-yahoo"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-behance"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-reddit"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vimeo"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+          </button>
+        </p>
+         
+        <h6>
+          Size Large 
+          <small>
+            Add 
+            <code>
+              size="lg"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-lg"
+            name="facebook"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-twitter btn-lg"
+            name="twitter"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-linkedin btn-lg"
+            name="linkedin"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-flickr btn-lg"
+            name="flickr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-tumblr btn-lg"
+            name="tumblr"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-xing btn-lg"
+            name="xing"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-github btn-lg"
+            name="github"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-lg"
+            name="stack-overflow"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-youtube btn-lg"
+            name="youtube"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-dribbble btn-lg"
+            name="dribbble"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-instagram btn-lg"
+            name="instagram"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-pinterest btn-lg"
+            name="pinterest"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 496 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vk btn-lg"
+            name="vk"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-yahoo btn-lg"
+            name="yahoo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M252 292l4 220c-12.7-2.2-23.5-3.9-32.3-3.9-8.4 0-19.2 1.7-32.3 3.9l4-220C140.4 197.2 85 95.2 21.4 0c11.9 3.1 23 3.9 33.2 3.9 9 0 20.4-.8 34.1-3.9 40.9 72.2 82.1 138.7 135 225.5C261 163.9 314.8 81.4 358.6 0c11.1 2.9 22 3.9 32.9 3.9 11.5 0 23.2-1 35-3.9C392.1 47.9 294.9 216.9 252 292z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-behance btn-lg"
+            name="behance"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 576 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-reddit btn-lg"
+            name="reddit"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-vimeo btn-lg"
+            name="vimeo"
+            type="button"
+          >
+            <svg
+              style="fill: currentColor;"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"
+              />
+            </svg>
+          </button>
+        </p>
       </div>
+      <!---->
     </div>
-     
+  </div>
+   
+  <div
+    class="col-12"
+  >
     <div
-      class="c-col-12"
+      class="card"
     >
+      <!---->
+      <header
+        class="card-header"
+      >
+        <strong>
+          Brand Button 
+        </strong>
+         
+        <small>
+          Text only
+        </small>
+      </header>
+       
       <div
-        class="c-card"
+        class="card-body"
       >
         <!---->
-        <header
-          class="c-card-header"
-        >
-          <strong>
-            Brand Button 
-          </strong>
-           
-          <small>
-            Text only
-          </small>
-        </header>
-         
-        <div
-          class="c-card-body"
-        >
-          <!---->
-          <!---->
-          <small>
-            Usage 
-          </small>
-           
-          <code>
-            &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
-          </code>
-           
-          <hr />
-           
-          <h6>
-            Size Small 
-            <small>
-              Add 
-              <code>
-                size="sm"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-sm"
-              name="facebook"
-              type="button"
-            >
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-sm"
-              name="twitter"
-              type="button"
-            >
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-sm"
-              name="linkedin"
-              type="button"
-            >
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-sm"
-              name="flickr"
-              type="button"
-            >
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-sm"
-              name="tumblr"
-              type="button"
-            >
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-sm"
-              name="xing"
-              type="button"
-            >
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-sm"
-              name="github"
-              type="button"
-            >
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-sm"
-              name="stack-overflow"
-              type="button"
-            >
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-sm"
-              name="youtube"
-              type="button"
-            >
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-sm"
-              name="dribbble"
-              type="button"
-            >
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-sm"
-              name="instagram"
-              type="button"
-            >
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-sm"
-              name="pinterest"
-              type="button"
-            >
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-sm"
-              name="vk"
-              type="button"
-            >
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-sm"
-              name="yahoo"
-              type="button"
-            >
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-sm"
-              name="behance"
-              type="button"
-            >
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-sm"
-              name="reddit"
-              type="button"
-            >
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-sm"
-              name="vimeo"
-              type="button"
-            >
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-           
-          <h6>
-            Size Normal
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook"
-              name="facebook"
-              type="button"
-            >
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter"
-              name="twitter"
-              type="button"
-            >
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin"
-              name="linkedin"
-              type="button"
-            >
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr"
-              name="flickr"
-              type="button"
-            >
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr"
-              name="tumblr"
-              type="button"
-            >
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing"
-              name="xing"
-              type="button"
-            >
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github"
-              name="github"
-              type="button"
-            >
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow"
-              name="stack-overflow"
-              type="button"
-            >
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube"
-              name="youtube"
-              type="button"
-            >
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble"
-              name="dribbble"
-              type="button"
-            >
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram"
-              name="instagram"
-              type="button"
-            >
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest"
-              name="pinterest"
-              type="button"
-            >
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk"
-              name="vk"
-              type="button"
-            >
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo"
-              name="yahoo"
-              type="button"
-            >
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance"
-              name="behance"
-              type="button"
-            >
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit"
-              name="reddit"
-              type="button"
-            >
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo"
-              name="vimeo"
-              type="button"
-            >
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-           
-          <h6>
-            Size Large 
-            <small>
-              Add 
-              <code>
-                size="lg"
-              </code>
-            </small>
-          </h6>
-           
-          <p>
-            <button
-              class="c-btn c-btn-facebook c-btn-lg"
-              name="facebook"
-              type="button"
-            >
-              <span>
-                facebook
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-twitter c-btn-lg"
-              name="twitter"
-              type="button"
-            >
-              <span>
-                twitter
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-linkedin c-btn-lg"
-              name="linkedin"
-              type="button"
-            >
-              <span>
-                linkedin
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-flickr c-btn-lg"
-              name="flickr"
-              type="button"
-            >
-              <span>
-                flickr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-tumblr c-btn-lg"
-              name="tumblr"
-              type="button"
-            >
-              <span>
-                tumblr
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-xing c-btn-lg"
-              name="xing"
-              type="button"
-            >
-              <span>
-                xing
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-github c-btn-lg"
-              name="github"
-              type="button"
-            >
-              <span>
-                github
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-stack-overflow c-btn-lg"
-              name="stack-overflow"
-              type="button"
-            >
-              <span>
-                stack-overflow
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-youtube c-btn-lg"
-              name="youtube"
-              type="button"
-            >
-              <span>
-                youtube
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-dribbble c-btn-lg"
-              name="dribbble"
-              type="button"
-            >
-              <span>
-                dribbble
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-instagram c-btn-lg"
-              name="instagram"
-              type="button"
-            >
-              <span>
-                instagram
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-pinterest c-btn-lg"
-              name="pinterest"
-              type="button"
-            >
-              <span>
-                pinterest
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vk c-btn-lg"
-              name="vk"
-              type="button"
-            >
-              <span>
-                vk
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-yahoo c-btn-lg"
-              name="yahoo"
-              type="button"
-            >
-              <span>
-                yahoo
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-behance c-btn-lg"
-              name="behance"
-              type="button"
-            >
-              <span>
-                behance
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-reddit c-btn-lg"
-              name="reddit"
-              type="button"
-            >
-              <span>
-                reddit
-              </span>
-            </button>
-            <button
-              class="c-btn c-btn-vimeo c-btn-lg"
-              name="vimeo"
-              type="button"
-            >
-              <span>
-                vimeo
-              </span>
-            </button>
-          </p>
-        </div>
         <!---->
+        <small>
+          Usage 
+        </small>
+         
+        <code>
+          
+          &lt;CButton variant="facebook"&gt;&lt;CIcon name="facebook"/&gt;&lt;/CButton&gt;
+        
+        </code>
+         
+        <hr />
+         
+        <h6>
+          Size Small 
+          <small>
+            Add 
+            <code>
+              size="sm"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-sm"
+            name="facebook"
+            type="button"
+          >
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter btn-sm"
+            name="twitter"
+            type="button"
+          >
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin btn-sm"
+            name="linkedin"
+            type="button"
+          >
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr btn-sm"
+            name="flickr"
+            type="button"
+          >
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr btn-sm"
+            name="tumblr"
+            type="button"
+          >
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing btn-sm"
+            name="xing"
+            type="button"
+          >
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github btn-sm"
+            name="github"
+            type="button"
+          >
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-sm"
+            name="stack-overflow"
+            type="button"
+          >
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube btn-sm"
+            name="youtube"
+            type="button"
+          >
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble btn-sm"
+            name="dribbble"
+            type="button"
+          >
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram btn-sm"
+            name="instagram"
+            type="button"
+          >
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest btn-sm"
+            name="pinterest"
+            type="button"
+          >
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk btn-sm"
+            name="vk"
+            type="button"
+          >
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo btn-sm"
+            name="yahoo"
+            type="button"
+          >
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance btn-sm"
+            name="behance"
+            type="button"
+          >
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit btn-sm"
+            name="reddit"
+            type="button"
+          >
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo btn-sm"
+            name="vimeo"
+            type="button"
+          >
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
+         
+        <h6>
+          Size Normal
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook"
+            name="facebook"
+            type="button"
+          >
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter"
+            name="twitter"
+            type="button"
+          >
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin"
+            name="linkedin"
+            type="button"
+          >
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr"
+            name="flickr"
+            type="button"
+          >
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr"
+            name="tumblr"
+            type="button"
+          >
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing"
+            name="xing"
+            type="button"
+          >
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github"
+            name="github"
+            type="button"
+          >
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow"
+            name="stack-overflow"
+            type="button"
+          >
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube"
+            name="youtube"
+            type="button"
+          >
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble"
+            name="dribbble"
+            type="button"
+          >
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram"
+            name="instagram"
+            type="button"
+          >
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest"
+            name="pinterest"
+            type="button"
+          >
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk"
+            name="vk"
+            type="button"
+          >
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo"
+            name="yahoo"
+            type="button"
+          >
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance"
+            name="behance"
+            type="button"
+          >
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit"
+            name="reddit"
+            type="button"
+          >
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo"
+            name="vimeo"
+            type="button"
+          >
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
+         
+        <h6>
+          Size Large 
+          <small>
+            Add 
+            <code>
+              size="lg"
+            </code>
+          </small>
+        </h6>
+         
+        <p>
+          <button
+            class="btn btn-facebook btn-lg"
+            name="facebook"
+            type="button"
+          >
+            <span>
+              facebook
+            </span>
+          </button>
+          <button
+            class="btn btn-twitter btn-lg"
+            name="twitter"
+            type="button"
+          >
+            <span>
+              twitter
+            </span>
+          </button>
+          <button
+            class="btn btn-linkedin btn-lg"
+            name="linkedin"
+            type="button"
+          >
+            <span>
+              linkedin
+            </span>
+          </button>
+          <button
+            class="btn btn-flickr btn-lg"
+            name="flickr"
+            type="button"
+          >
+            <span>
+              flickr
+            </span>
+          </button>
+          <button
+            class="btn btn-tumblr btn-lg"
+            name="tumblr"
+            type="button"
+          >
+            <span>
+              tumblr
+            </span>
+          </button>
+          <button
+            class="btn btn-xing btn-lg"
+            name="xing"
+            type="button"
+          >
+            <span>
+              xing
+            </span>
+          </button>
+          <button
+            class="btn btn-github btn-lg"
+            name="github"
+            type="button"
+          >
+            <span>
+              github
+            </span>
+          </button>
+          <button
+            class="btn btn-stack-overflow btn-lg"
+            name="stack-overflow"
+            type="button"
+          >
+            <span>
+              stack-overflow
+            </span>
+          </button>
+          <button
+            class="btn btn-youtube btn-lg"
+            name="youtube"
+            type="button"
+          >
+            <span>
+              youtube
+            </span>
+          </button>
+          <button
+            class="btn btn-dribbble btn-lg"
+            name="dribbble"
+            type="button"
+          >
+            <span>
+              dribbble
+            </span>
+          </button>
+          <button
+            class="btn btn-instagram btn-lg"
+            name="instagram"
+            type="button"
+          >
+            <span>
+              instagram
+            </span>
+          </button>
+          <button
+            class="btn btn-pinterest btn-lg"
+            name="pinterest"
+            type="button"
+          >
+            <span>
+              pinterest
+            </span>
+          </button>
+          <button
+            class="btn btn-vk btn-lg"
+            name="vk"
+            type="button"
+          >
+            <span>
+              vk
+            </span>
+          </button>
+          <button
+            class="btn btn-yahoo btn-lg"
+            name="yahoo"
+            type="button"
+          >
+            <span>
+              yahoo
+            </span>
+          </button>
+          <button
+            class="btn btn-behance btn-lg"
+            name="behance"
+            type="button"
+          >
+            <span>
+              behance
+            </span>
+          </button>
+          <button
+            class="btn btn-reddit btn-lg"
+            name="reddit"
+            type="button"
+          >
+            <span>
+              reddit
+            </span>
+          </button>
+          <button
+            class="btn btn-vimeo btn-lg"
+            name="vimeo"
+            type="button"
+          >
+            <span>
+              vimeo
+            </span>
+          </button>
+        </p>
       </div>
+      <!---->
     </div>
   </div>
 </div>
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
index fe82c252..5f86fa98 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
@@ -1,1326 +1,1322 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdowns.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
+<div>
+  <div
+    class="row"
+  >
     <div
-      class="c-row"
+      class="col-12 col-md-6"
     >
       <div
-        class="c-col-12 c-col-md-6"
+        class="card"
       >
-        <div
-          class="c-card"
+        <!---->
+        <header
+          class="card-header"
         >
-          <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Dropdown
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
-            >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Dropdown"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </header>
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Bootstrap Dropdown
+          </strong>
            
           <div
-            class="c-card-body"
+            class="card-header-actions"
           >
-            <!---->
-            <!---->
-            <div>
-              <div
-                class="c-m-2 c-dropdown"
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/Dropdown"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <small
+                class="text-muted"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-secondary"
+                docs
+              </small>
+            </a>
+          </div>
+        </header>
+         
+        <div
+          class="card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            <div
+              class="m-2 dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-secondary"
+              >
+                Dropdown Button
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
-                  Dropdown Button
-                </button>
-                <!---->
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+                 
                 <div
-                  class="c-dropdown-menu"
+                  class="dropdown-divider"
+                  role="separator"
+                />
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    First Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Second Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Third Action
-                  </a>
-                   
-                  <div
-                    class="c-dropdown-divider"
-                    role="separator"
-                  />
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                   
-                  <a
-                    aria-disabled="true"
-                    class="c-dropdown-item c-disabled"
-                    href="#"
-                    role="menuitem"
-                    tabindex="-1"
-                    target="_self"
-                  >
-                    Disabled action
-                  </a>
-                </div>
+                  Something else here...
+                </a>
+                 
+                <a
+                  aria-disabled="true"
+                  class="dropdown-item disabled"
+                  href="#"
+                  role="menuitem"
+                  tabindex="-1"
+                  target="_self"
+                >
+                  Disabled action
+                </a>
+              </div>
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="m-2 dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-secondary"
+              >
+                Dropdown with divider
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First item
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second item
+                </a>
+                 
+                <div
+                  class="dropdown-divider"
+                  role="separator"
+                />
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Separated Item
+                </a>
+              </div>
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="m-2 dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-secondary"
+              >
+                Dropdown with header
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <h6
+                  class="dropdown-header"
+                >
+                  Dropdown header
+                </h6>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First item
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Item
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="col-12 col-md-6"
+    >
+      <div
+        class="card"
+      >
+        <!---->
+        <header
+          class="card-header"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Dropdown 
+          </strong>
+           
+          <small>
+            positioning
+          </small>
+        </header>
+         
+        <div
+          class="card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            <div
+              class="m-2 d-inline-block dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-primary"
+              >
+                Left align
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here
+                </a>
               </div>
             </div>
              
-            <div>
-              <div
-                class="c-m-2 c-dropdown"
+            <div
+              class="m-2 d-inline-block dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-primary"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-secondary"
+                Right align
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
-                  Dropdown with divider
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    First item
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Second item
-                  </a>
-                   
-                  <div
-                    class="c-dropdown-divider"
-                    role="separator"
-                  />
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Separated Item
-                  </a>
-                </div>
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here
+                </a>
+              </div>
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="m-2 dropup"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-info"
+              >
+                Drop-Up
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here
+                </a>
+              </div>
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="m-2 dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-secondary"
+              >
+                Offset Dropdown
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here
+                </a>
+              </div>
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="m-2 dropdown btn-group"
+            >
+              <button
+                class="btn btn-secondary"
+              >
+                Split Dropdown
+              </button>
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
+              />
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here...
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-12 col-md-6"
+    >
+      <div
+        class="card"
+      >
+        <!---->
+        <header
+          class="card-header"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Dropdown 
+          </strong>
+           
+          <small>
+            hidden caret
+          </small>
+        </header>
+         
+        <div
+          class="card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            <div
+              class="dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-lg btn-link"
+              >
+                
+                🔍
+                <span
+                  class="sr-only"
+                >
+                  Search
+                </span>
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here...
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="col-12 col-md-6"
+    >
+      <div
+        class="card"
+      >
+        <!---->
+        <header
+          class="card-header"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Dropdown 
+          </strong>
+           
+          <small>
+            sizing
+          </small>
+        </header>
+         
+        <div
+          class="card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            <div
+              class="m-2 d-inline-block dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-lg btn-secondary"
+              >
+                Large
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here
+                </a>
               </div>
             </div>
              
-            <div>
-              <div
-                class="c-m-2 c-dropdown"
+            <div
+              class="m-2 dropdown btn-group"
+            >
+              <button
+                class="btn btn-lg btn-secondary"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-secondary"
+                Large Split
+              </button>
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
+              />
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
-                  Dropdown with header
-                </button>
-                <!---->
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here...
+                </a>
+              </div>
+            </div>
+             
+            <br />
+             
+            <div
+              class="m-2 d-inline-block dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-sm btn-secondary"
+              >
+                Small
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here...
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-2 dropdown btn-group"
+            >
+              <button
+                class="btn btn-sm btn-secondary"
+              >
+                Small Split
+              </button>
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
+              />
+              <div
+                class="dropdown-menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Another action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Something else here...
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-12 col-md-6"
+    >
+      <div
+        class="card"
+      >
+        <!---->
+        <header
+          class="card-header"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Dropdown 
+          </strong>
+           
+          <small>
+            headers and accessibility
+          </small>
+        </header>
+         
+        <div
+          class="card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            <div
+              class="m-2 dropdown"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn dropdown-toggle btn-primary"
+              >
+                Dropdown ARIA
+              </button>
+              <!---->
+              <div
+                class="dropdown-menu"
+              >
                 <div
-                  class="c-dropdown-menu"
+                  role="group"
                 >
                   <h6
-                    class="c-dropdown-header"
+                    class="dropdown-header"
                   >
-                    Dropdown header
+                    Groups
                   </h6>
                    
                   <a
-                    class="c-dropdown-item"
+                    class="dropdown-item"
                     href="#"
                     role="menuitem"
                     target="_self"
                   >
-                    First item
+                    Add
                   </a>
                    
                   <a
-                    class="c-dropdown-item"
+                    class="dropdown-item"
                     href="#"
                     role="menuitem"
                     target="_self"
                   >
-                    Second Item
+                    Delete
                   </a>
                 </div>
-              </div>
-            </div>
-          </div>
-          <!---->
-        </div>
-      </div>
-       
-      <div
-        class="c-col-12 c-col-md-6"
-      >
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Dropdown 
-            </strong>
-             
-            <small>
-              positioning
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <div>
-              <div
-                class="c-m-2 c-d-inline-block c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-primary"
-                >
-                  Left align
-                </button>
-                <!---->
+                 
                 <div
-                  class="c-dropdown-menu"
+                  role="group"
                 >
+                  <h6
+                    class="dropdown-header"
+                  >
+                    Users
+                  </h6>
+                   
                   <a
-                    class="c-dropdown-item"
+                    class="dropdown-item"
                     href="#"
                     role="menuitem"
                     target="_self"
                   >
-                    Action
+                    Add
                   </a>
                    
                   <a
-                    class="c-dropdown-item"
+                    class="dropdown-item"
                     href="#"
                     role="menuitem"
                     target="_self"
                   >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
+                    Delete
                   </a>
                 </div>
-              </div>
-               
-              <div
-                class="c-m-2 c-d-inline-block c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-primary"
-                >
-                  Right align
-                </button>
-                <!---->
+                 
                 <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-            </div>
-             
-            <div>
-              <div
-                class="c-m-2 c-dropup"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-info"
-                >
-                  Drop-Up
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-            </div>
-             
-            <div>
-              <div
-                class="c-m-2 c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-secondary"
-                >
-                  Offset Dropdown
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-            </div>
-             
-            <div>
-              <div
-                class="c-m-2 c-dropdown c-btn-group"
-              >
-                <button
-                  class="c-btn c-btn-secondary"
-                >
-                  Split Dropdown
-                </button>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-secondary"
+                  class="dropdown-divider"
+                  role="separator"
                 />
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!---->
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="c-row"
-    >
-      <div
-        class="c-col-12 c-col-md-6"
-      >
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Dropdown 
-            </strong>
-             
-            <small>
-              hidden caret
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <div>
-              <div
-                class="c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-btn-lg c-btn-link"
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
                 >
                   
-                  🔍
-                  <span
-                    class="sr-only"
-                  >
-                    Search
-                  </span>
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                </div>
+                Something 
+                  <strong>
+                    not
+                  </strong>
+                   associated with user
+              
+                </a>
               </div>
             </div>
           </div>
-          <!---->
-        </div>
-      </div>
-       
-      <div
-        class="c-col-12 c-col-md-6"
-      >
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Dropdown 
-            </strong>
-             
-            <small>
-              sizing
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <div>
-              <div
-                class="c-m-2 c-d-inline-block c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-lg c-btn-secondary"
-                >
-                  Large
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-               
-              <div
-                class="c-m-2 c-dropdown c-btn-group"
-              >
-                <button
-                  class="c-btn c-btn-lg c-btn-secondary"
-                >
-                  Large Split
-                </button>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-lg c-btn-secondary"
-                />
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                </div>
-              </div>
-               
-              <br />
-               
-              <div
-                class="c-m-2 c-d-inline-block c-dropdown"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-sm c-btn-secondary"
-                >
-                  Small
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                </div>
-              </div>
-               
-              <div
-                class="c-m-2 c-dropdown c-btn-group"
-              >
-                <button
-                  class="c-btn c-btn-sm c-btn-secondary"
-                >
-                  Small Split
-                </button>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-sm c-btn-secondary"
-                />
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here...
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!---->
         </div>
+        <!---->
       </div>
     </div>
      
     <div
-      class="c-row"
+      class="col-12 col-md-6"
     >
       <div
-        class="c-col-12 c-col-md-6"
+        class="card"
       >
+        <!---->
+        <header
+          class="card-header"
+        >
+          <i
+            class="fa fa-align-justify"
+          />
+           
+          <strong>
+             Dropdown 
+          </strong>
+           
+          <small>
+            <code>
+              variant
+            </code>
+          </small>
+        </header>
+         
         <div
-          class="c-card"
+          class="card-body"
         >
           <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Dropdown 
-            </strong>
-             
-            <small>
-              headers and accessibility
-            </small>
-          </header>
-           
+          <!---->
           <div
-            class="c-card-body"
+            class="m-0 d-inline-block dropdown"
           >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-primary"
+            >
+              Primary
+            </button>
             <!---->
-            <!---->
-            <div>
-              <div
-                class="c-m-2 c-dropdown"
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="c-btn c-dropdown-toggle c-btn-primary"
-                >
-                  Dropdown ARIA
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <div
-                    role="group"
-                  >
-                    <h6
-                      class="c-dropdown-header"
-                    >
-                      Groups
-                    </h6>
-                     
-                    <a
-                      class="c-dropdown-item"
-                      href="#"
-                      role="menuitem"
-                      target="_self"
-                    >
-                      Add
-                    </a>
-                     
-                    <a
-                      class="c-dropdown-item"
-                      href="#"
-                      role="menuitem"
-                      target="_self"
-                    >
-                      Delete
-                    </a>
-                  </div>
-                   
-                  <div
-                    role="group"
-                  >
-                    <h6
-                      class="c-dropdown-header"
-                    >
-                      Users
-                    </h6>
-                     
-                    <a
-                      class="c-dropdown-item"
-                      href="#"
-                      role="menuitem"
-                      target="_self"
-                    >
-                      Add
-                    </a>
-                     
-                    <a
-                      class="c-dropdown-item"
-                      href="#"
-                      role="menuitem"
-                      target="_self"
-                    >
-                      Delete
-                    </a>
-                  </div>
-                   
-                  <div
-                    class="c-dropdown-divider"
-                    role="separator"
-                  />
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    
-                  Something 
-                    <strong>
-                      not
-                    </strong>
-                     associated with user
-                
-                  </a>
-                </div>
-              </div>
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
             </div>
           </div>
-          <!---->
-        </div>
-      </div>
-       
-      <div
-        class="c-col-12 c-col-md-6"
-      >
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Dropdown 
-            </strong>
-             
-            <small>
-              <code>
-                variant
-              </code>
-            </small>
-          </header>
            
           <div
-            class="c-card-body"
+            class="m-0 d-inline-block dropdown"
           >
-            <!---->
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-secondary"
+            >
+              Secondary
+            </button>
             <!---->
             <div
-              class="c-m-0 c-d-inline-block c-dropdown"
+              class="dropdown-menu"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-primary"
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
               >
-                Primary
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
               >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-secondary"
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
               >
-                Secondary
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-success"
-              >
-                Success
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-warning"
-              >
-                Warning
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-danger"
-              >
-                Danger
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-info"
-              >
-                Info
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-light"
-              >
-                Light
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-dark"
-              >
-                Dark
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
-            </div>
-             
-            <div
-              class="c-m-0 c-d-inline-block c-dropdown"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c-btn c-dropdown-toggle c-btn-sm c-btn-link"
-              >
-                Link
-              </button>
-              <!---->
-              <div
-                class="c-dropdown-menu"
-              >
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  First Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Second Action
-                </a>
-                 
-                <a
-                  class="c-dropdown-item"
-                  href="#"
-                  role="menuitem"
-                  target="_self"
-                >
-                  Third Action
-                </a>
-              </div>
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-success"
+            >
+              Success
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-warning"
+            >
+              Warning
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-danger"
+            >
+              Danger
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-info"
+            >
+              Info
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-light"
+            >
+              Light
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-dark"
+            >
+              Dark
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
+            </div>
+          </div>
+           
+          <div
+            class="m-0 d-inline-block dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn dropdown-toggle btn-sm btn-link"
+            >
+              Link
+            </button>
+            <!---->
+            <div
+              class="dropdown-menu"
+            >
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                First Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Second Action
+              </a>
+               
+              <a
+                class="dropdown-item"
+                href="#"
+                role="menuitem"
+                target="_self"
+              >
+                Third Action
+              </a>
             </div>
           </div>
-          <!---->
         </div>
+        <!---->
       </div>
     </div>
   </div>
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
index 69efc759..53b2c7b0 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
@@ -1,924 +1,918 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ButtonGroups.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <crow-stub>
-      <ccol-stub
-        col="12"
-        tag="div"
+<crow-stub>
+  <ccol-stub
+    col="12"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap button group
+        </strong>
+         
+        <div
+          class="card-header-actions"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap button group
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
+            <small
+              class="text-muted"
             >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <cbuttongroup-stub>
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  One
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Two
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Three
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Four
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Five
-                </cbutton-stub>
-              </cbuttongroup-stub>
-               
-              <br />
-              <br />
-               
-              <cbuttongroup-stub>
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="success"
-                >
-                  Success
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="info"
-                >
-                  Info
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="warning"
-                >
-                  Warn
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="primary"
-                >
-                  Primary
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="danger"
-                >
-                  Danger
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="link"
-                >
-                  Link
-                </cbutton-stub>
-              </cbuttongroup-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Button group 
-            </strong>
-            sizing
-          
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <cbuttongroup-stub>
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Left
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Middle
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Right
-                </cbutton-stub>
-              </cbuttongroup-stub>
-               
-              <br />
-              <br />
-               
-              <cbuttongroup-stub
-                size="sm"
-              >
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Left
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Middle
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Right
-                </cbutton-stub>
-              </cbuttongroup-stub>
-               
-              <br />
-              <br />
-               
-              <cbuttongroup-stub
-                size="lg"
-              >
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Left
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Middle
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Right
-                </cbutton-stub>
-              </cbuttongroup-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-            <strong>
-               Button group 
-            </strong>
-            dropdown support
-          
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <cbuttongroup-stub>
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Button 1
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Button 2
-                </cbutton-stub>
-                 
-                <cdropdown-stub
-                  placement="bottom-start"
-                  right=""
-                  text="Menu"
-                  togglertext="Dropdown"
-                  variant="success"
-                >
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 1
-                  </cdropdownitem-stub>
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 2
-                  </cdropdownitem-stub>
-                   
-                  <cdropdowndivider-stub
-                    tag="div"
-                  />
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 3
-                  </cdropdownitem-stub>
-                </cdropdown-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  class="c-d-sm-down-none"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Button 3
-                </cbutton-stub>
-                 
-                <cdropdown-stub
-                  placement="bottom-start"
-                  right=""
-                  split="true"
-                  text="Split Menu"
-                  togglertext="Dropdown"
-                  variant="info"
-                >
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 1
-                  </cdropdownitem-stub>
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 2
-                  </cdropdownitem-stub>
-                   
-                  <cdropdowndivider-stub
-                    tag="div"
-                  />
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 3
-                  </cdropdownitem-stub>
-                </cdropdown-stub>
-              </cbuttongroup-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Button group 
-            </strong>
-            vertical variation
-          
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <cbuttongroup-stub
-                vertical="true"
-              >
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Top
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Middle
-                </cbutton-stub>
-                 
-                <cbutton-stub
-                  activeclass="c-active"
-                  event="click"
-                  exactactiveclass="c-active"
-                  routertag="a"
-                  target="_self"
-                  type="button"
-                  variant="secondary"
-                >
-                  Bottom
-                </cbutton-stub>
-              </cbuttongroup-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Button toolbar 
-            </strong>
-             
-            <small>
-              with button groups
+              docs
             </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <cbuttontoolbar-stub
-                aria-label="Toolbar with button groups"
-              >
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    class="c-d-sm-down-none"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    «
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    ‹
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-                 
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    class="c-d-sm-down-none"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Edit
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Undo
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Redo
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-                 
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    ›
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    class="c-d-sm-down-none"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    »
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-              </cbuttontoolbar-stub>
-            </div>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <cbuttongroup-stub>
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              One
+            </cbutton-stub>
              
-            <hr
-              class="c-d-sm-down-none"
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Two
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Three
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Four
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Five
+            </cbutton-stub>
+          </cbuttongroup-stub>
+           
+          <br />
+          <br />
+           
+          <cbuttongroup-stub>
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="success"
+            >
+              Success
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="info"
+            >
+              Info
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="warning"
+            >
+              Warn
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              Primary
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="danger"
+            >
+              Danger
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="link"
+            >
+              Link
+            </cbutton-stub>
+          </cbuttongroup-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Button group 
+        </strong>
+        sizing
+      
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <cbuttongroup-stub>
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Left
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Middle
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Right
+            </cbutton-stub>
+          </cbuttongroup-stub>
+           
+          <br />
+          <br />
+           
+          <cbuttongroup-stub
+            size="sm"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Left
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Middle
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Right
+            </cbutton-stub>
+          </cbuttongroup-stub>
+           
+          <br />
+          <br />
+           
+          <cbuttongroup-stub
+            size="lg"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Left
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Middle
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Right
+            </cbutton-stub>
+          </cbuttongroup-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Button group 
+        </strong>
+        dropdown support
+      
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <cbuttongroup-stub>
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Button 1
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Button 2
+            </cbutton-stub>
+             
+            <cdropdown-stub
+              placement="bottom-start"
+              right=""
+              text="Menu"
+              togglertext="Dropdown"
+              variant="success"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 1
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 2
+              </cdropdownitem-stub>
+               
+              <cdropdowndivider-stub
+                tag="div"
+              />
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 3
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              class="d-sm-down-none"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Button 3
+            </cbutton-stub>
+             
+            <cdropdown-stub
+              placement="bottom-start"
+              right=""
+              split="true"
+              text="Split Menu"
+              togglertext="Dropdown"
+              variant="info"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 1
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 2
+              </cdropdownitem-stub>
+               
+              <cdropdowndivider-stub
+                tag="div"
+              />
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 3
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+          </cbuttongroup-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Button group 
+        </strong>
+        vertical variation
+      
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <cbuttongroup-stub
+            vertical="true"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Top
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Middle
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              Bottom
+            </cbutton-stub>
+          </cbuttongroup-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Button toolbar 
+        </strong>
+         
+        <small>
+          with button groups
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <cbuttontoolbar-stub
+            aria-label="Toolbar with button groups"
+          >
+            <cbuttongroup-stub
+              class="mx-1"
+            >
+              <cbutton-stub
+                activeclass="active"
+                class="d-sm-down-none"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                «
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                ‹
+              </cbutton-stub>
+            </cbuttongroup-stub>
+             
+            <cbuttongroup-stub
+              class="mx-1"
+            >
+              <cbutton-stub
+                activeclass="active"
+                class="d-sm-down-none"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Edit
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Undo
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Redo
+              </cbutton-stub>
+            </cbuttongroup-stub>
+             
+            <cbuttongroup-stub
+              class="mx-1"
+            >
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                ›
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                class="d-sm-down-none"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                »
+              </cbutton-stub>
+            </cbuttongroup-stub>
+          </cbuttontoolbar-stub>
+        </div>
+         
+        <hr
+          class="d-sm-down-none"
+        />
+         
+        <div>
+          <cbuttontoolbar-stub
+            aria-label="Toolbar with button groups and input groups"
+            class="d-sm-down-none"
+          >
+            <cbuttongroup-stub
+              class="mx-1"
+              size="sm"
+            >
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                New
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Edit
+              </cbutton-stub>
+            </cbuttongroup-stub>
+             
+            <cforminput-stub
+              appendhtml=".00"
+              class="mb-0 w-25 mx-1"
+              lazy="400"
+              prependhtml="$"
+              size="sm"
+              type="text"
+              value="100"
             />
              
-            <div>
-              <cbuttontoolbar-stub
-                aria-label="Toolbar with button groups and input groups"
-                class="c-d-sm-down-none"
-              >
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                  size="sm"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    New
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Edit
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-                 
-                <cforminput-stub
-                  appendhtml=".00"
-                  class="c-mb-0 c-w-25 c-mx-1"
-                  lazy="400"
-                  prependhtml="$"
-                  size="sm"
-                  type="text"
-                  value="100"
-                />
-                 
-                <cformselect-stub
-                  class="c-mb-0 c-w-25 c-mx-1"
-                  custom="true"
-                  options="Large,Medium,Small"
-                  prependhtml="Size"
-                  size="sm"
-                  value="Medium"
-                />
-                 
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                  size="sm"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Save
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Cancel
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-              </cbuttontoolbar-stub>
-            </div>
+            <cformselect-stub
+              class="mb-0 w-25 mx-1"
+              custom="true"
+              options="Large,Medium,Small"
+              prependhtml="Size"
+              size="sm"
+              value="Medium"
+            />
              
-            <hr />
-             
-            <div>
-              <cbuttontoolbar-stub
-                aria-label="Toolbar with button groups and dropdown menu"
+            <cbuttongroup-stub
+              class="mx-1"
+              size="sm"
+            >
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
               >
-                <cbuttongroup-stub
-                  class="c-mx-1 c-d-sm-down-none"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    New
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Edit
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Undo
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-                 
-                <cdropdown-stub
-                  button-content="Menu"
-                  class="c-mx-1"
-                  placement="bottom-end"
-                  togglertext="Dropdown"
-                  variant="secondary"
-                >
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 1
-                  </cdropdownitem-stub>
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 2
-                  </cdropdownitem-stub>
-                   
-                  <cdropdownitem-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                  >
-                    Item 3
-                  </cdropdownitem-stub>
-                </cdropdown-stub>
-                 
-                <cbuttongroup-stub
-                  class="c-mx-1"
-                >
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Save
-                  </cbutton-stub>
-                   
-                  <cbutton-stub
-                    activeclass="c-active"
-                    event="click"
-                    exactactiveclass="c-active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Cancel
-                  </cbutton-stub>
-                </cbuttongroup-stub>
-              </cbuttontoolbar-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-  </div>
-</div>
+                Save
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </cbutton-stub>
+            </cbuttongroup-stub>
+          </cbuttontoolbar-stub>
+        </div>
+         
+        <hr />
+         
+        <div>
+          <cbuttontoolbar-stub
+            aria-label="Toolbar with button groups and dropdown menu"
+          >
+            <cbuttongroup-stub
+              class="mx-1 d-sm-down-none"
+            >
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                New
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Edit
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Undo
+              </cbutton-stub>
+            </cbuttongroup-stub>
+             
+            <cdropdown-stub
+              button-content="Menu"
+              class="mx-1"
+              placement="bottom-end"
+              togglertext="Dropdown"
+              variant="secondary"
+            >
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 1
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 2
+              </cdropdownitem-stub>
+               
+              <cdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+              >
+                Item 3
+              </cdropdownitem-stub>
+            </cdropdown-stub>
+             
+            <cbuttongroup-stub
+              class="mx-1"
+            >
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Save
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </cbutton-stub>
+            </cbuttongroup-stub>
+          </cbuttontoolbar-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+</crow-stub>
 `;
diff --git a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
index 7f73368f..43507704 100644
--- a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
@@ -15,7 +15,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </strong>
        
       <div
-        class="c-card-header-actions"
+        class="card-header-actions"
       >
         <a
           class="card-header-action"
@@ -37,10 +37,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -51,7 +51,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -59,10 +59,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -73,7 +73,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -81,10 +81,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -95,7 +95,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -103,10 +103,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -117,7 +117,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -125,10 +125,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -139,7 +139,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -147,10 +147,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -161,7 +161,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -169,10 +169,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -183,7 +183,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -191,10 +191,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -205,7 +205,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -213,10 +213,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -227,7 +227,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -235,10 +235,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -250,10 +250,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -264,7 +264,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -272,11 +272,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -288,7 +288,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -296,11 +296,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -312,7 +312,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -320,11 +320,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -336,7 +336,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -344,11 +344,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -360,7 +360,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -368,11 +368,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -384,7 +384,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -392,11 +392,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -408,7 +408,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -416,11 +416,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -432,7 +432,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -440,11 +440,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -456,7 +456,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -464,11 +464,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             target="_self"
@@ -481,10 +481,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -495,7 +495,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -503,11 +503,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -518,7 +518,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -526,11 +526,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -541,7 +541,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -549,11 +549,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -564,7 +564,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -572,11 +572,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -587,7 +587,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -595,11 +595,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -610,7 +610,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -618,11 +618,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -633,7 +633,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -641,11 +641,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -656,7 +656,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -664,11 +664,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -679,7 +679,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -687,11 +687,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -732,10 +732,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </p>
        
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -746,7 +746,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -754,10 +754,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -769,7 +769,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -777,10 +777,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -792,7 +792,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -800,10 +800,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -815,7 +815,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -823,10 +823,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -838,7 +838,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -846,10 +846,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -861,7 +861,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -869,10 +869,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -884,7 +884,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -892,10 +892,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -907,7 +907,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -915,10 +915,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -930,7 +930,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -940,10 +940,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -954,7 +954,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -962,11 +962,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -979,7 +979,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -987,11 +987,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1004,7 +1004,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1012,11 +1012,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1029,7 +1029,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1037,11 +1037,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1054,7 +1054,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1062,11 +1062,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1079,7 +1079,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1087,11 +1087,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1104,7 +1104,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1112,11 +1112,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1129,7 +1129,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1137,11 +1137,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             pressed="true"
             routertag="a"
@@ -1154,7 +1154,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1164,10 +1164,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -1178,7 +1178,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1186,11 +1186,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1202,7 +1202,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1210,11 +1210,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1226,7 +1226,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1234,11 +1234,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1250,7 +1250,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1258,11 +1258,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1274,7 +1274,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1282,11 +1282,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1298,7 +1298,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1306,11 +1306,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1322,7 +1322,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1330,11 +1330,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1346,7 +1346,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1354,11 +1354,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -1370,7 +1370,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1410,10 +1410,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </p>
        
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -1424,7 +1424,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1432,10 +1432,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1447,7 +1447,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1455,10 +1455,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1470,7 +1470,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1478,10 +1478,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1493,7 +1493,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1501,10 +1501,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1516,7 +1516,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1524,10 +1524,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1539,7 +1539,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1547,10 +1547,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1562,7 +1562,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1570,10 +1570,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1585,7 +1585,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1593,10 +1593,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1608,7 +1608,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1618,10 +1618,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -1632,7 +1632,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1640,11 +1640,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1657,7 +1657,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1665,11 +1665,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1682,7 +1682,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1690,11 +1690,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1707,7 +1707,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1715,11 +1715,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1732,7 +1732,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1740,11 +1740,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1757,7 +1757,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1765,11 +1765,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1782,7 +1782,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1790,11 +1790,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1807,7 +1807,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1815,11 +1815,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             pressed="true"
             routertag="a"
@@ -1832,7 +1832,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1842,10 +1842,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -1856,7 +1856,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1864,11 +1864,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1880,7 +1880,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1888,11 +1888,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1904,7 +1904,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1912,11 +1912,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1928,7 +1928,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1936,11 +1936,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1952,7 +1952,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1960,11 +1960,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -1976,7 +1976,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -1984,11 +1984,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -2000,7 +2000,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2008,11 +2008,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -2024,7 +2024,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2032,11 +2032,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -2048,7 +2048,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2088,10 +2088,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </p>
        
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -2102,7 +2102,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2110,10 +2110,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2125,7 +2125,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2133,10 +2133,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2148,7 +2148,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2156,10 +2156,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2171,7 +2171,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2179,10 +2179,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2194,7 +2194,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2202,10 +2202,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2217,7 +2217,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2225,10 +2225,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2240,7 +2240,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2248,10 +2248,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2263,7 +2263,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2271,10 +2271,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2286,7 +2286,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2294,10 +2294,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2310,10 +2310,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -2324,7 +2324,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2332,11 +2332,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2349,7 +2349,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2357,11 +2357,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2374,7 +2374,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2382,11 +2382,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2399,7 +2399,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2407,11 +2407,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2424,7 +2424,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2432,11 +2432,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2449,7 +2449,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2457,11 +2457,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2474,7 +2474,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2482,11 +2482,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2499,7 +2499,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2507,11 +2507,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2524,7 +2524,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2532,11 +2532,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pressed="true"
             routertag="a"
             square="true"
@@ -2550,10 +2550,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -2564,7 +2564,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2572,11 +2572,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2588,7 +2588,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2596,11 +2596,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2612,7 +2612,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2620,11 +2620,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2636,7 +2636,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2644,11 +2644,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2660,7 +2660,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2668,11 +2668,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2684,7 +2684,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2692,11 +2692,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2708,7 +2708,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2716,11 +2716,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2732,7 +2732,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2740,11 +2740,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2756,7 +2756,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2764,11 +2764,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -2811,10 +2811,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </p>
        
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -2825,7 +2825,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2833,10 +2833,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2848,7 +2848,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2856,10 +2856,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2871,7 +2871,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2879,10 +2879,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2894,7 +2894,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2902,10 +2902,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2917,7 +2917,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2925,10 +2925,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2940,7 +2940,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2948,10 +2948,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2963,7 +2963,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2971,10 +2971,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -2986,7 +2986,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -2994,10 +2994,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3009,7 +3009,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3017,10 +3017,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3033,10 +3033,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -3047,7 +3047,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3055,11 +3055,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3072,7 +3072,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3080,11 +3080,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3097,7 +3097,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3105,11 +3105,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3122,7 +3122,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3130,11 +3130,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3147,7 +3147,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3155,11 +3155,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3172,7 +3172,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3180,11 +3180,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3197,7 +3197,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3205,11 +3205,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3222,7 +3222,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3230,11 +3230,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3247,7 +3247,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3255,11 +3255,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             aria-pressed="true"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             pressed="true"
             routertag="a"
@@ -3273,10 +3273,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="12"
           tag="div"
           xl="true"
@@ -3287,7 +3287,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3295,11 +3295,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3311,7 +3311,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3319,11 +3319,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3335,7 +3335,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3343,11 +3343,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3359,7 +3359,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3367,11 +3367,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3383,7 +3383,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3391,11 +3391,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3407,7 +3407,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3415,11 +3415,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3431,7 +3431,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3439,11 +3439,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3455,7 +3455,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3463,11 +3463,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3479,7 +3479,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="6"
           md="2"
           sm="4"
@@ -3487,11 +3487,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           xl="true"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             disabled="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3535,10 +3535,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </p>
        
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="2"
           tag="div"
           xl="true"
@@ -3549,14 +3549,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="sm"
             target="_self"
@@ -3568,14 +3568,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="sm"
@@ -3588,14 +3588,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             size="sm"
@@ -3608,14 +3608,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="sm"
             square="true"
@@ -3628,14 +3628,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             size="sm"
@@ -3649,10 +3649,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="2"
           tag="div"
           xl="true"
@@ -3663,14 +3663,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -3681,14 +3681,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -3700,14 +3700,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             target="_self"
@@ -3719,14 +3719,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -3738,14 +3738,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -3758,10 +3758,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </crow-stub>
        
       <crow-stub
-        class="c-align-items-center c-mt-3"
+        class="align-items-center mt-3"
       >
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0"
+          class="mb-3 mb-xl-0"
           col="2"
           tag="div"
           xl="true"
@@ -3772,14 +3772,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -3791,14 +3791,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -3811,14 +3811,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             size="lg"
@@ -3831,14 +3831,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             square="true"
@@ -3851,14 +3851,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-3 c-mb-xl-0 c-text-center"
+          class="mb-3 mb-xl-0 text-center"
           col="2"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             size="lg"
@@ -3891,18 +3891,18 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-align-items-center"
+        class="align-items-center"
       >
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -3917,15 +3917,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -3941,15 +3941,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -3964,15 +3964,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             square="true"
             target="_self"
@@ -3988,15 +3988,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             pill="true"
             routertag="a"
             target="_self"
@@ -4033,15 +4033,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     >
       <crow-stub>
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4053,15 +4053,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4073,15 +4073,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4093,15 +4093,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4113,15 +4113,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4133,15 +4133,15 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-text-center c-mt-3"
+          class="text-center mt-3"
           sm="true"
           tag="div"
           xs="12"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             target="_self"
@@ -4185,10 +4185,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           titletag="h4"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4199,10 +4199,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4213,10 +4213,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4227,10 +4227,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4241,10 +4241,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4255,10 +4255,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4269,10 +4269,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             size="lg"
             target="_self"
@@ -4314,10 +4314,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           titletag="h4"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4329,10 +4329,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4344,10 +4344,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4359,10 +4359,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4374,10 +4374,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4389,10 +4389,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             outline="true"
             routertag="a"
             size="lg"
@@ -4404,10 +4404,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
             block="true"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             ghost="true"
             routertag="a"
             size="lg"
diff --git a/tests/unit/views/icons/Brands.spec.js b/tests/unit/views/icons/Brands.spec.js
index 5e91d0f8..95d54996 100644
--- a/tests/unit/views/icons/Brands.spec.js
+++ b/tests/unit/views/icons/Brands.spec.js
@@ -9,7 +9,7 @@ Vue.use(CoreuiVue)
 
 describe('Brands.vue', () => {
   it('has a name', () => {
-    expect(Brands.name).toMatch('Brands')
+    expect(Brands.name).toBe('Brands')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Brands)
diff --git a/tests/unit/views/icons/CoreUIIcons.spec.js b/tests/unit/views/icons/CoreUIIcons.spec.js
index 2993a58b..b5f7fa51 100644
--- a/tests/unit/views/icons/CoreUIIcons.spec.js
+++ b/tests/unit/views/icons/CoreUIIcons.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('CoreUIIcons.vue', () => {
   it('has a name', () => {
-    expect(CoreUIIcons.name).toMatch('CoreUIIcons')
+    expect(CoreUIIcons.name).toBe('CoreUIIcons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(CoreUIIcons)
diff --git a/tests/unit/views/icons/Flags.spec.js b/tests/unit/views/icons/Flags.spec.js
index a2b6b5a0..63f226f2 100644
--- a/tests/unit/views/icons/Flags.spec.js
+++ b/tests/unit/views/icons/Flags.spec.js
@@ -9,7 +9,7 @@ Vue.use(CIconPlugin)
 
 describe('Flags.vue', () => {
   it('has a name', () => {
-    expect(Flags.name).toMatch('flags')
+    expect(Flags.name).toBe('Flags')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Flags)
diff --git a/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap b/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
index cbd35efc..07c7c656 100644
--- a/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
@@ -3,11 +3,11 @@
 exports[`Brands.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-card"
+    class="card"
   >
     <!---->
     <header
-      class="c-card-header"
+      class="card-header"
     >
       <i
         class="cui-globe"
@@ -17,15 +17,15 @@ exports[`Brands.vue renders correctly 1`] = `
     </header>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <!---->
       <!---->
       <div
-        class="c-row c-text-center"
+        class="row text-center"
       >
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -43,7 +43,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -61,7 +61,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -79,7 +79,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -97,7 +97,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -115,7 +115,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -133,7 +133,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -151,7 +151,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -169,7 +169,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -187,7 +187,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -205,7 +205,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -223,7 +223,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -241,7 +241,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -259,7 +259,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -277,7 +277,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -295,7 +295,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -313,7 +313,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -331,7 +331,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -349,7 +349,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -367,7 +367,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -385,7 +385,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -403,7 +403,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -421,7 +421,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -439,7 +439,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -457,7 +457,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -475,7 +475,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -493,7 +493,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -511,7 +511,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -529,7 +529,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -547,7 +547,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -565,7 +565,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -583,7 +583,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -601,7 +601,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -619,7 +619,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -637,7 +637,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -655,7 +655,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -673,7 +673,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -691,7 +691,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -709,7 +709,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -727,7 +727,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -745,7 +745,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -763,7 +763,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -781,7 +781,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -799,7 +799,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -817,7 +817,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -835,7 +835,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -853,7 +853,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -872,7 +872,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -890,7 +890,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -908,7 +908,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -926,7 +926,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -944,7 +944,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -962,7 +962,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -980,7 +980,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -998,7 +998,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1016,7 +1016,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1034,7 +1034,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1052,7 +1052,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1070,7 +1070,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1088,7 +1088,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1106,7 +1106,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1124,7 +1124,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1142,7 +1142,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1160,7 +1160,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1178,7 +1178,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1196,7 +1196,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1214,7 +1214,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1232,7 +1232,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1250,7 +1250,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1268,7 +1268,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1286,7 +1286,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1304,7 +1304,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1322,7 +1322,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1340,7 +1340,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1358,7 +1358,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1376,7 +1376,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1394,7 +1394,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1412,7 +1412,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1430,7 +1430,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1448,7 +1448,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1466,7 +1466,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1484,7 +1484,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1502,7 +1502,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1520,7 +1520,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1538,7 +1538,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1556,7 +1556,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1574,7 +1574,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1592,7 +1592,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1610,7 +1610,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1628,7 +1628,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1646,7 +1646,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1664,7 +1664,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1682,7 +1682,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1700,7 +1700,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1718,7 +1718,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1736,7 +1736,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1754,7 +1754,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1772,7 +1772,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1790,7 +1790,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1808,7 +1808,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1826,7 +1826,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1844,7 +1844,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1862,7 +1862,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1880,7 +1880,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1898,7 +1898,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1916,7 +1916,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1934,7 +1934,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1952,7 +1952,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1970,7 +1970,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -1988,7 +1988,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2006,7 +2006,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2024,7 +2024,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2042,7 +2042,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2060,7 +2060,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2078,7 +2078,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2096,7 +2096,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2114,7 +2114,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2132,7 +2132,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2150,7 +2150,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2168,7 +2168,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2186,7 +2186,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2204,7 +2204,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2222,7 +2222,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2240,7 +2240,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2258,7 +2258,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2276,7 +2276,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2294,7 +2294,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2312,7 +2312,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2330,7 +2330,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2348,7 +2348,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2366,7 +2366,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2384,7 +2384,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2402,7 +2402,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2420,7 +2420,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2438,7 +2438,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2456,7 +2456,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2474,7 +2474,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2492,7 +2492,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2510,7 +2510,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2528,7 +2528,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2546,7 +2546,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2564,7 +2564,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2582,7 +2582,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2600,7 +2600,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2618,7 +2618,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2636,7 +2636,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2654,7 +2654,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2672,7 +2672,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2690,7 +2690,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2708,7 +2708,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2726,7 +2726,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2744,7 +2744,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2762,7 +2762,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2780,7 +2780,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2798,7 +2798,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2816,7 +2816,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2834,7 +2834,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2852,7 +2852,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2870,7 +2870,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2888,7 +2888,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2906,7 +2906,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2924,7 +2924,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2942,7 +2942,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2960,7 +2960,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2978,7 +2978,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -2996,7 +2996,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3014,7 +3014,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3032,7 +3032,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3050,7 +3050,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3068,7 +3068,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3086,7 +3086,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3104,7 +3104,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3122,7 +3122,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3140,7 +3140,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3158,7 +3158,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3176,7 +3176,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3194,7 +3194,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3212,7 +3212,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3230,7 +3230,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3248,7 +3248,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3266,7 +3266,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3284,7 +3284,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3302,7 +3302,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3320,7 +3320,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3338,7 +3338,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3356,7 +3356,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3374,7 +3374,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3392,7 +3392,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3410,7 +3410,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3428,7 +3428,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3446,7 +3446,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3464,7 +3464,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3482,7 +3482,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3500,7 +3500,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3518,7 +3518,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3536,7 +3536,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3554,7 +3554,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3572,7 +3572,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3590,7 +3590,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3608,7 +3608,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3626,7 +3626,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3644,7 +3644,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3662,7 +3662,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3680,7 +3680,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3698,7 +3698,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3716,7 +3716,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3734,7 +3734,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3752,7 +3752,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3770,7 +3770,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3788,7 +3788,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3806,7 +3806,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3824,7 +3824,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3842,7 +3842,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3860,7 +3860,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3878,7 +3878,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3896,7 +3896,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3914,7 +3914,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3932,7 +3932,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3950,7 +3950,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3968,7 +3968,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -3986,7 +3986,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4004,7 +4004,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4022,7 +4022,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4040,7 +4040,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4058,7 +4058,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4076,7 +4076,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4094,7 +4094,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4112,7 +4112,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4130,7 +4130,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4148,7 +4148,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4166,7 +4166,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4184,7 +4184,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4202,7 +4202,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4220,7 +4220,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4238,7 +4238,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4256,7 +4256,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4274,7 +4274,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4292,7 +4292,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4310,7 +4310,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4328,7 +4328,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4346,7 +4346,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4364,7 +4364,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4382,7 +4382,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4400,7 +4400,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4418,7 +4418,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4436,7 +4436,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4454,7 +4454,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4472,7 +4472,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4490,7 +4490,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4508,7 +4508,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4526,7 +4526,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4544,7 +4544,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4562,7 +4562,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4580,7 +4580,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4598,7 +4598,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4616,7 +4616,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4634,7 +4634,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4652,7 +4652,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4670,7 +4670,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4688,7 +4688,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4706,7 +4706,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4724,7 +4724,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4742,7 +4742,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4760,7 +4760,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4778,7 +4778,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4796,7 +4796,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4814,7 +4814,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4832,7 +4832,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4850,7 +4850,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4868,7 +4868,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4886,7 +4886,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4904,7 +4904,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4922,7 +4922,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4940,7 +4940,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4958,7 +4958,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4976,7 +4976,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -4994,7 +4994,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5012,7 +5012,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5030,7 +5030,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5048,7 +5048,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5066,7 +5066,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5084,7 +5084,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5102,7 +5102,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5120,7 +5120,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5138,7 +5138,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5156,7 +5156,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5174,7 +5174,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5192,7 +5192,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5210,7 +5210,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5228,7 +5228,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5246,7 +5246,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5264,7 +5264,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5282,7 +5282,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5300,7 +5300,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5318,7 +5318,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5336,7 +5336,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5354,7 +5354,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5372,7 +5372,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5390,7 +5390,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5408,7 +5408,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5426,7 +5426,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5444,7 +5444,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5462,7 +5462,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5480,7 +5480,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5498,7 +5498,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5516,7 +5516,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5534,7 +5534,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5552,7 +5552,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5570,7 +5570,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5588,7 +5588,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5606,7 +5606,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5624,7 +5624,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5642,7 +5642,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5660,7 +5660,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5678,7 +5678,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5696,7 +5696,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5714,7 +5714,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5732,7 +5732,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5750,7 +5750,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5768,7 +5768,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5786,7 +5786,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5804,7 +5804,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5822,7 +5822,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5840,7 +5840,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5858,7 +5858,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5876,7 +5876,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5894,7 +5894,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5912,7 +5912,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5930,7 +5930,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5948,7 +5948,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5966,7 +5966,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -5984,7 +5984,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6002,7 +6002,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6020,7 +6020,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6038,7 +6038,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6056,7 +6056,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6074,7 +6074,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6092,7 +6092,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6110,7 +6110,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6128,7 +6128,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6146,7 +6146,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6164,7 +6164,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6182,7 +6182,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6200,7 +6200,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6218,7 +6218,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6236,7 +6236,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6254,7 +6254,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6272,7 +6272,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6290,7 +6290,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6308,7 +6308,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6326,7 +6326,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6344,7 +6344,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6362,7 +6362,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6380,7 +6380,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6398,7 +6398,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6416,7 +6416,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6434,7 +6434,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6452,7 +6452,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6470,7 +6470,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6488,7 +6488,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6506,7 +6506,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6524,7 +6524,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6542,7 +6542,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6560,7 +6560,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6578,7 +6578,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6596,7 +6596,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6614,7 +6614,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6632,7 +6632,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6650,7 +6650,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6668,7 +6668,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6686,7 +6686,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6704,7 +6704,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6722,7 +6722,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6740,7 +6740,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6758,7 +6758,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6776,7 +6776,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6794,7 +6794,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6812,7 +6812,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6830,7 +6830,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6848,7 +6848,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6866,7 +6866,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6884,7 +6884,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6902,7 +6902,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6920,7 +6920,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6938,7 +6938,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6956,7 +6956,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6974,7 +6974,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -6992,7 +6992,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7010,7 +7010,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7028,7 +7028,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7046,7 +7046,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7064,7 +7064,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7082,7 +7082,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7100,7 +7100,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7118,7 +7118,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7136,7 +7136,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7154,7 +7154,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7172,7 +7172,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7190,7 +7190,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7208,7 +7208,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7226,7 +7226,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7244,7 +7244,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7262,7 +7262,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7280,7 +7280,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7298,7 +7298,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7316,7 +7316,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7334,7 +7334,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7352,7 +7352,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7370,7 +7370,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7388,7 +7388,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7406,7 +7406,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7424,7 +7424,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7442,7 +7442,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7460,7 +7460,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7478,7 +7478,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7496,7 +7496,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7514,7 +7514,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7532,7 +7532,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7550,7 +7550,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7568,7 +7568,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7586,7 +7586,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7604,7 +7604,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7622,7 +7622,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7640,7 +7640,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7658,7 +7658,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7676,7 +7676,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7694,7 +7694,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
@@ -7712,7 +7712,7 @@ exports[`Brands.vue renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="c-mb-5 c-col-3 c-col-sm-2"
+          class="mb-5 col-3 col-sm-2"
         >
           <svg
             height="42"
diff --git a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
index fef187cd..6b0e3bf7 100644
--- a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
@@ -16,9 +16,9 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       CoreUI Icons
       
       <cbadge-stub
-        activeclass="c-active"
+        activeclass="active"
         event="click"
-        exactactiveclass="c-active"
+        exactactiveclass="active"
         routertag="a"
         tag="span"
         target="_self"
@@ -28,16 +28,16 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       </cbadge-stub>
        
       <div
-        class="c-card-header-actions"
+        class="card-header-actions"
       >
         <a
-          class="c-card-header-action"
+          class="card-header-action"
           href="https://github.com/coreui/coreui-icons"
           rel="noreferrer noopener"
           target="_blank"
         >
           <small
-            class="c-text-muted"
+            class="text-muted"
           >
             Github
           </small>
@@ -50,7 +50,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-text-center "
+        class="text-center "
       >
         <ccol-stub
           col="6"
@@ -60,7 +60,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-account-logout icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -76,7 +76,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-action-redo icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -92,7 +92,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-action-undo icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -108,7 +108,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-center icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -124,7 +124,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -140,7 +140,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -156,7 +156,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-bottom icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -172,7 +172,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -188,7 +188,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -204,7 +204,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-top icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -220,7 +220,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-ban icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -236,7 +236,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-basket-loaded icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -252,7 +252,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bell icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -268,7 +268,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bold icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -284,7 +284,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bookmark icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -300,7 +300,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-briefcase icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -316,7 +316,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-british-pound icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -332,7 +332,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-brush icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -348,7 +348,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-calculator icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -364,7 +364,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-calendar icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -380,7 +380,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -396,7 +396,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -412,7 +412,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-check c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-check icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -428,7 +428,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-bottom icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -444,7 +444,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -460,7 +460,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -476,7 +476,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-top icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -492,7 +492,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-circle-check icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -508,7 +508,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-circle-x icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -524,7 +524,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -540,7 +540,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud-download icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -556,7 +556,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud-upload icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -572,7 +572,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-code c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-code icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -588,7 +588,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cog icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -604,7 +604,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-comment-square icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -620,7 +620,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-credit-card icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -636,7 +636,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cursor icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -652,7 +652,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-dashboard icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -668,7 +668,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-delete icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -684,7 +684,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-dollar icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -700,7 +700,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-drop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -716,7 +716,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-closed icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -732,7 +732,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-letter icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -748,7 +748,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-open icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -764,7 +764,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-euro icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -780,7 +780,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-file c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-file icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -796,7 +796,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-globe icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -812,7 +812,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-graph icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -828,7 +828,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-home c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-home icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -844,7 +844,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-inbox icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -860,7 +860,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-info c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-info icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -876,7 +876,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-italic icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -892,7 +892,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-center icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -908,7 +908,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -924,7 +924,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -940,7 +940,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-laptop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -956,7 +956,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-layers icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -972,7 +972,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lightbulb icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -988,7 +988,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-list c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-list icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1004,7 +1004,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-location-pin icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1020,7 +1020,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lock-locked icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1036,7 +1036,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lock-unlocked icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1052,7 +1052,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-magnifying-glass icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1068,7 +1068,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-map c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-map icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1084,7 +1084,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-monitor icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1100,7 +1100,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-moon icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1116,7 +1116,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-note c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-note icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1132,7 +1132,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-options c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-options icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1148,7 +1148,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-paperclip icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1164,7 +1164,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-pencil icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1180,7 +1180,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-people c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-people icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1196,7 +1196,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-phone icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1212,7 +1212,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-pie-chart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1228,7 +1228,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-print c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-print icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1244,7 +1244,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-puzzle icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1260,7 +1260,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-rss icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1276,7 +1276,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-screen-desktop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1292,7 +1292,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-screen-smartphone icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1308,7 +1308,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-settings icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1324,7 +1324,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-share c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-share icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1340,7 +1340,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-shield icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1356,7 +1356,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sort-ascending icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1372,7 +1372,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sort-descending icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1388,7 +1388,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-speech icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1404,7 +1404,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-speedometer icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1420,7 +1420,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-star c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-star icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1436,7 +1436,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sun icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1452,7 +1452,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-tablet icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1468,7 +1468,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-tags icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1484,7 +1484,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-task c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-task icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1500,7 +1500,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-thumb-down icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1516,7 +1516,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-thumb-up icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1532,7 +1532,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-trash icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1548,7 +1548,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-underline icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1564,7 +1564,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1580,7 +1580,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-female icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1596,7 +1596,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-follow icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1612,7 +1612,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-unfollow icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1628,7 +1628,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-wrench icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1644,7 +1644,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-yen icons font-2xl d-block mt-4"
           />
            
           <div>
diff --git a/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
index 914c0935..79f0cdc9 100644
--- a/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
@@ -22,16 +22,16 @@ exports[`Flags.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-text-center"
+        class="text-center"
       >
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="12"
           tag="div"
         />
          
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -196,7 +196,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -217,7 +217,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -313,7 +313,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -342,7 +342,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1124,7 +1124,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1144,7 +1144,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1164,7 +1164,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1192,7 +1192,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1238,7 +1238,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1286,7 +1286,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1307,7 +1307,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1331,7 +1331,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1532,7 +1532,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1565,7 +1565,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1588,7 +1588,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1615,7 +1615,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1636,7 +1636,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1655,7 +1655,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1677,7 +1677,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1699,7 +1699,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1721,7 +1721,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1747,7 +1747,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1777,7 +1777,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1806,7 +1806,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1828,7 +1828,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1941,7 +1941,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -1992,7 +1992,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2683,7 +2683,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2743,7 +2743,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2771,7 +2771,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2875,7 +2875,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2903,7 +2903,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2925,7 +2925,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -2960,7 +2960,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3120,7 +3120,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3139,7 +3139,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3159,7 +3159,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3189,7 +3189,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3216,7 +3216,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3240,7 +3240,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3262,7 +3262,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3286,7 +3286,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3314,7 +3314,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3344,7 +3344,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3370,7 +3370,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3392,7 +3392,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3414,7 +3414,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3442,7 +3442,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3470,7 +3470,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3499,7 +3499,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3529,7 +3529,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3550,7 +3550,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3577,7 +3577,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3597,7 +3597,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3625,7 +3625,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3645,7 +3645,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3812,7 +3812,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3846,7 +3846,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -3866,7 +3866,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10626,7 +10626,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10779,7 +10779,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10801,7 +10801,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10854,7 +10854,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10884,7 +10884,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10907,7 +10907,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -10926,7 +10926,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11485,7 +11485,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11514,7 +11514,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11557,7 +11557,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11577,7 +11577,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11712,7 +11712,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11816,7 +11816,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11842,7 +11842,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11869,7 +11869,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11891,7 +11891,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11913,7 +11913,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -11933,7 +11933,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12080,7 +12080,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12099,7 +12099,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12123,7 +12123,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12153,7 +12153,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12195,7 +12195,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12216,7 +12216,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12236,7 +12236,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12260,7 +12260,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12281,7 +12281,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12328,7 +12328,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12347,7 +12347,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12376,7 +12376,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12398,7 +12398,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12420,7 +12420,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12457,7 +12457,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12673,7 +12673,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12892,7 +12892,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12946,7 +12946,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12974,7 +12974,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -12998,7 +12998,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13043,7 +13043,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13067,7 +13067,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13100,7 +13100,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13173,7 +13173,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13304,7 +13304,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13326,7 +13326,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13347,7 +13347,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13369,7 +13369,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13398,7 +13398,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13449,7 +13449,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13489,7 +13489,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13642,7 +13642,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13876,7 +13876,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13903,7 +13903,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13925,7 +13925,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13969,7 +13969,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -13992,7 +13992,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14023,7 +14023,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14049,7 +14049,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14087,7 +14087,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14117,7 +14117,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14193,7 +14193,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14244,7 +14244,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14275,7 +14275,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14304,7 +14304,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14334,7 +14334,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14373,7 +14373,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14401,7 +14401,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14479,7 +14479,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14517,7 +14517,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14544,7 +14544,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14574,7 +14574,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14597,7 +14597,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14655,7 +14655,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14692,7 +14692,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14721,7 +14721,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14744,7 +14744,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14766,7 +14766,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14786,7 +14786,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14807,7 +14807,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14835,7 +14835,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14854,7 +14854,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14875,7 +14875,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -14960,7 +14960,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15091,7 +15091,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15113,7 +15113,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15135,7 +15135,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15157,7 +15157,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15177,7 +15177,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15199,7 +15199,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15230,7 +15230,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15258,7 +15258,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15282,7 +15282,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15383,7 +15383,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15404,7 +15404,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15458,7 +15458,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15522,7 +15522,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15545,7 +15545,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15566,7 +15566,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15591,7 +15591,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -15988,7 +15988,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16018,7 +16018,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16054,7 +16054,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16085,7 +16085,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16107,7 +16107,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16128,7 +16128,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16152,7 +16152,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16173,7 +16173,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16317,7 +16317,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16339,7 +16339,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16361,7 +16361,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16390,7 +16390,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16417,7 +16417,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16458,7 +16458,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16514,7 +16514,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16644,7 +16644,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16673,7 +16673,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16932,7 +16932,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16966,7 +16966,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -16990,7 +16990,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17014,7 +17014,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17044,7 +17044,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17065,7 +17065,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17087,7 +17087,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17164,7 +17164,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17192,7 +17192,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17222,7 +17222,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17294,7 +17294,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17320,7 +17320,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17492,7 +17492,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17514,7 +17514,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17536,7 +17536,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17843,7 +17843,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17865,7 +17865,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17893,7 +17893,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17934,7 +17934,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17962,7 +17962,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -17991,7 +17991,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18019,7 +18019,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18050,7 +18050,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18078,7 +18078,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18167,7 +18167,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18200,7 +18200,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18222,7 +18222,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18246,7 +18246,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18268,7 +18268,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18374,7 +18374,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18397,7 +18397,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18423,7 +18423,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18444,7 +18444,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18467,7 +18467,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -18498,7 +18498,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19114,7 +19114,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19185,7 +19185,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19206,7 +19206,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19266,7 +19266,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19348,7 +19348,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19370,7 +19370,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19400,7 +19400,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19429,7 +19429,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19451,7 +19451,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19488,7 +19488,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19508,7 +19508,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19536,7 +19536,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19757,7 +19757,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19785,7 +19785,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19810,7 +19810,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19833,7 +19833,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19853,7 +19853,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19895,7 +19895,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19924,7 +19924,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19952,7 +19952,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -19973,7 +19973,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20018,7 +20018,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20048,7 +20048,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20079,7 +20079,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20104,7 +20104,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20147,7 +20147,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20192,7 +20192,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20686,7 +20686,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20709,7 +20709,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20750,7 +20750,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20793,7 +20793,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20935,7 +20935,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20961,7 +20961,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -20994,7 +20994,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21016,7 +21016,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21038,7 +21038,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21069,7 +21069,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21091,7 +21091,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21113,7 +21113,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21145,7 +21145,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
@@ -21187,7 +21187,7 @@ exports[`Flags.vue renders correctly 1`] = `
           </div>
         </ccol-stub>
         <ccol-stub
-          class="c-mb-5"
+          class="mb-5"
           col="3"
           sm="2"
           tag="div"
diff --git a/tests/unit/views/notifications/Alerts.spec.js b/tests/unit/views/notifications/Alerts.spec.js
index 5410e738..215163c9 100644
--- a/tests/unit/views/notifications/Alerts.spec.js
+++ b/tests/unit/views/notifications/Alerts.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Alerts.vue', () => {
   it('has a name', () => {
-    expect(Alerts.name).toMatch('alerts')
+    expect(Alerts.name).toBe('Alerts')
   })
   it('has a created hook', () => {
     expect(typeof Alerts.data).toMatch('function')
diff --git a/tests/unit/views/notifications/Badges.spec.js b/tests/unit/views/notifications/Badges.spec.js
index a25bd0b2..6ec8e125 100644
--- a/tests/unit/views/notifications/Badges.spec.js
+++ b/tests/unit/views/notifications/Badges.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Badges.vue', () => {
   it('has a name', () => {
-    expect(Badges.name).toMatch('badges')
+    expect(Badges.name).toBe('Badges')
   })
   it('is Badges', () => {
     const wrapper = shallowMount(Badges)
diff --git a/tests/unit/views/notifications/Modals.spec.js b/tests/unit/views/notifications/Modals.spec.js
index dca62498..3722c088 100644
--- a/tests/unit/views/notifications/Modals.spec.js
+++ b/tests/unit/views/notifications/Modals.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Modals.vue', () => {
   it('has a name', () => {
-    expect(Modals.name).toMatch('modals')
+    expect(Modals.name).toBe('Modals')
   })
   it('has a created hook', () => {
     expect(typeof Modals.data).toMatch('function')
diff --git a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
index 8bd7ae12..57fb9ac9 100644
--- a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
@@ -1,493 +1,487 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alerts.vue renders correctly 1`] = `
-<div
-  class="c-wrapper"
->
-  <div>
-    <crow-stub>
-      <ccol-stub
-        col="12"
-        md="6"
-        tag="div"
+<crow-stub>
+  <ccol-stub
+    col="12"
+    md="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Alert
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
-            >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Alert"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <p />
-               
-              <calert-stub
-                show="true"
-                variant="primary"
-              >
-                Primary Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="secondary"
-              >
-                Secondary Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="success"
-              >
-                Success Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="danger"
-              >
-                Danger Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="warning"
-              >
-                Warning Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="info"
-              >
-                Info Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="light"
-              >
-                Light Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="dark"
-              >
-                Dark Alert
-              </calert-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alert
-            
-            <small>
-               use 
-              <code>
-                .c-alert-link
-              </code>
-               to provide links
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <calert-stub
-                show="true"
-                variant="primary"
-              >
-                
-                Primary Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="secondary"
-              >
-                
-                Secondary Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="success"
-              >
-                
-                Success Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="danger"
-              >
-                
-                Danger Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="warning"
-              >
-                
-                Warning Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="info"
-              >
-                
-                Info Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="light"
-              >
-                
-                Light Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="dark"
-              >
-                
-                Dark Alert with
-                
-                <clink-stub
-                  activeclass="c-active"
-                  class="c-alert-link"
-                  event="click"
-                  exactactiveclass="c-active"
-                  href="#"
-                  routertag="a"
-                  tag="span"
-                  target="_self"
-                >
-                  an example link
-                </clink-stub>
-                
-                .
-              
-              </calert-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alerts 
-            <small>
-              with additional content
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <calert-stub
-              show="true"
-              variant="success"
-            >
-              <h4
-                class="c-alert-heading"
-              >
-                Well done!
-              </h4>
-               
-              <p>
-                
-                Aww yeah, you successfully read this important alert message.
-                This example text is going to run a bit longer so that you can see
-                how spacing within an alert works with this kind of content.
-              
-              </p>
-               
-              <hr />
-               
-              <p
-                class="c-mb-0"
-              >
-                
-                Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-              
-              </p>
-            </calert-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alerts
-            
-            <small>
-              dismissible
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <calert-stub
-              closebutton="true"
-              show="true"
-              variant="secondary"
-            >
-              
-              Dismissible Alert!
-            
-            </calert-stub>
-             
-            <calert-stub
-              closebutton="true"
-              fade="true"
-              show="true"
-              variant="secondary"
-            >
-              
-              Dismissible Alert with fade effect!
-            
-            </calert-stub>
-             
-            <calert-stub
-              class="c-alert-dismissible"
-              show="true"
-              variant="secondary"
-            />
-             
-            <cbutton-stub
-              activeclass="c-active"
-              class="c-m-1"
-              event="click"
-              exactactiveclass="c-active"
-              routertag="a"
-              target="_self"
-              type="button"
-              variant="info"
-            >
-              
-              Show dismissible alerts
-            
-            </cbutton-stub>
-          </ccardbody-stub>
-        </ccard-stub>
+        <i
+          class="fa fa-align-justify"
+        />
          
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
+        <strong>
+           Bootstrap Alert
+        </strong>
+         
+        <div
+          class="card-header-actions"
         >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Alert"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alerts
-            
-            <small>
-              auto dismissible
+            <small
+              class="text-muted"
+            >
+              docs
             </small>
-          </ccardheader-stub>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <p />
            
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
+          <calert-stub
+            show="true"
+            variant="primary"
           >
-            <div>
-              <calert-stub
-                closebutton="true"
-                fade="true"
-                show="10"
-                variant="warning"
-              >
-                
-                Alert will dismiss after
-                
-                <strong>
-                  10
-                </strong>
-                 seconds...
-              
-              </calert-stub>
-               
-              <calert-stub
-                closebutton="true"
-                show="10"
-                variant="info"
-              >
-                
-                Alert will dismiss after 10 seconds...
-                
-                <cprogress-stub
-                  height="4px"
-                  max="10"
-                  precision="0"
-                  value="10"
-                  variant="info"
-                />
-              </calert-stub>
-               
-              <cbutton-stub
-                activeclass="c-active"
-                class="c-m-1"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="info"
-              >
-                
-                Show alert with timer
-              
-              </cbutton-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-  </div>
-</div>
+            Primary Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="secondary"
+          >
+            Secondary Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="success"
+          >
+            Success Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="danger"
+          >
+            Danger Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="warning"
+          >
+            Warning Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="info"
+          >
+            Info Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="light"
+          >
+            Light Alert
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="dark"
+          >
+            Dark Alert
+          </calert-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    md="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alert
+        
+        <small>
+           use 
+          <code>
+            .alert-link
+          </code>
+           to provide links
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <calert-stub
+            show="true"
+            variant="primary"
+          >
+            
+            Primary Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="secondary"
+          >
+            
+            Secondary Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="success"
+          >
+            
+            Success Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="danger"
+          >
+            
+            Danger Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="warning"
+          >
+            
+            Warning Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="info"
+          >
+            
+            Info Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="light"
+          >
+            
+            Light Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="dark"
+          >
+            
+            Dark Alert with
+            
+            <clink-stub
+              activeclass="active"
+              class="alert-link"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="span"
+              target="_self"
+            >
+              an example link
+            </clink-stub>
+            
+            .
+          
+          </calert-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    md="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts 
+        <small>
+          with additional content
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <calert-stub
+          show="true"
+          variant="success"
+        >
+          <h4
+            class="alert-heading"
+          >
+            Well done!
+          </h4>
+           
+          <p>
+            
+            Aww yeah, you successfully read this important alert message.
+            This example text is going to run a bit longer so that you can see
+            how spacing within an alert works with this kind of content.
+          
+          </p>
+           
+          <hr />
+           
+          <p
+            class="mb-0"
+          >
+            
+            Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+          
+          </p>
+        </calert-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    md="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts
+        
+        <small>
+          dismissible
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <calert-stub
+          closebutton="true"
+          show="true"
+          variant="secondary"
+        >
+          
+          Dismissible Alert!
+        
+        </calert-stub>
+         
+        <calert-stub
+          closebutton="true"
+          fade="true"
+          show="true"
+          variant="secondary"
+        >
+          
+          Dismissible Alert with fade effect!
+        
+        </calert-stub>
+         
+        <calert-stub
+          class="alert-dismissible"
+          show="true"
+          variant="secondary"
+        />
+         
+        <cbutton-stub
+          activeclass="active"
+          class="m-1"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="info"
+        >
+          
+          Show dismissible alerts
+        
+        </cbutton-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts
+        
+        <small>
+          auto dismissible
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <calert-stub
+            closebutton="true"
+            fade="true"
+            show="10"
+            variant="warning"
+          >
+            
+            Alert will dismiss after
+            
+            <strong>
+              10
+            </strong>
+             seconds...
+          
+          </calert-stub>
+           
+          <calert-stub
+            closebutton="true"
+            show="10"
+            variant="info"
+          >
+            
+            Alert will dismiss after 10 seconds...
+            
+            <cprogress-stub
+              height="4px"
+              max="10"
+              precision="0"
+              value="10"
+              variant="info"
+            />
+          </calert-stub>
+           
+          <cbutton-stub
+            activeclass="active"
+            class="m-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            
+            Show alert with timer
+          
+          </cbutton-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+</crow-stub>
 `;
diff --git a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
index 4f236f30..2e82c71d 100644
--- a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
@@ -2,359 +2,353 @@
 
 exports[`Badges.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col-12 col-md-6"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
-        class="c-col-12 c-col-md-6"
+      <!---->
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Badge
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
-          <header
-            class="c-card-header"
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Badge"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Badge
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
+            <small
+              class="text-muted"
             >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Badge"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <h2>
-              Example heading 
-              <span
-                class="c-badge c-badge-primary"
-              >
-                New
-              </span>
-            </h2>
-             
-            <h3>
-              Example heading 
-              <span
-                class="c-badge c-badge-primary"
-              >
-                New
-              </span>
-            </h3>
-             
-            <h4>
-              Example heading 
-              <span
-                class="c-badge c-badge-primary"
-              >
-                New
-              </span>
-            </h4>
-             
-            <h5>
-              Example heading 
-              <span
-                class="c-badge c-badge-primary"
-              >
-                New
-              </span>
-            </h5>
-             
-            <h6>
-              Example heading 
-              <span
-                class="c-badge c-badge-primary"
-              >
-                New
-              </span>
-            </h6>
-          </div>
-           
-          <footer
-            class="c-card-footer"
-          >
-            <button
-              class="c-btn c-btn-primary"
-              type="button"
-            >
-              
-              Notifications
-              
-              <span
-                class="c-badge c-badge-light"
-                style="position: static;"
-              >
-                4
-              </span>
-            </button>
-          </footer>
-          <!---->
+              docs
+            </small>
+          </a>
         </div>
-      </div>
+      </header>
        
       <div
-        class="c-col-12 c-col-md-6"
+        class="card-body"
       >
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
+        <!---->
+        <!---->
+        <h2>
+          Example heading 
+          <span
+            class="badge badge-primary"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             Badge
-            
-            <small>
-              contextual variations
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <span
-              class="c-badge c-badge-primary"
-            >
-              Primary
-            </span>
-             
-            <span
-              class="c-badge c-badge-secondary"
-            >
-              Secondary
-            </span>
-             
-            <span
-              class="c-badge c-badge-success"
-            >
-              Success
-            </span>
-             
-            <span
-              class="c-badge c-badge-danger"
-            >
-              Danger
-            </span>
-             
-            <span
-              class="c-badge c-badge-warning"
-            >
-              Warning
-            </span>
-             
-            <span
-              class="c-badge c-badge-info"
-            >
-              Info
-            </span>
-             
-            <span
-              class="c-badge c-badge-light"
-            >
-              Light
-            </span>
-             
-            <span
-              class="c-badge c-badge-dark"
-            >
-              Dark
-            </span>
-          </div>
-          <!---->
-        </div>
+            New
+          </span>
+        </h2>
          
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
+        <h3>
+          Example heading 
+          <span
+            class="badge badge-primary"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             Badge
-            
-            <small>
-              pills
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
-          >
-            <!---->
-            <!---->
-            <span
-              class="c-badge c-badge-primary c-badge-pill"
-            >
-              Primary
-            </span>
-             
-            <span
-              class="c-badge c-badge-secondary c-badge-pill"
-            >
-              Secondary
-            </span>
-             
-            <span
-              class="c-badge c-badge-success c-badge-pill"
-            >
-              Success
-            </span>
-             
-            <span
-              class="c-badge c-badge-danger c-badge-pill"
-            >
-              Danger
-            </span>
-             
-            <span
-              class="c-badge c-badge-warning c-badge-pill"
-            >
-              Warning
-            </span>
-             
-            <span
-              class="c-badge c-badge-info c-badge-pill"
-            >
-              Info
-            </span>
-             
-            <span
-              class="c-badge c-badge-light c-badge-pill"
-            >
-              Light
-            </span>
-             
-            <span
-              class="c-badge c-badge-dark c-badge-pill"
-            >
-              Dark
-            </span>
-          </div>
-          <!---->
-        </div>
+            New
+          </span>
+        </h3>
          
-        <div
-          class="c-card"
-        >
-          <!---->
-          <header
-            class="c-card-header"
+        <h4>
+          Example heading 
+          <span
+            class="badge badge-primary"
           >
-            <i
-              class="fa fa-align-justify"
-            />
-             Badge
-            
-            <small>
-              actionable
-            </small>
-          </header>
-           
-          <div
-            class="c-card-body"
+            New
+          </span>
+        </h4>
+         
+        <h5>
+          Example heading 
+          <span
+            class="badge badge-primary"
           >
-            <!---->
-            <!---->
-            <a
-              class="c-badge c-badge-primary"
-              href="#"
-              target="_self"
-            >
-              Primary
-            </a>
-             
-            <a
-              class="c-badge c-badge-secondary"
-              href="#"
-              target="_self"
-            >
-              Secondary
-            </a>
-             
-            <a
-              class="c-badge c-badge-success"
-              href="#"
-              target="_self"
-            >
-              Success
-            </a>
-             
-            <a
-              class="c-badge c-badge-danger"
-              href="#"
-              target="_self"
-            >
-              Danger
-            </a>
-             
-            <a
-              class="c-badge c-badge-warning"
-              href="#"
-              target="_self"
-            >
-              Warning
-            </a>
-             
-            <a
-              class="c-badge c-badge-info"
-              href="#"
-              target="_self"
-            >
-              Info
-            </a>
-             
-            <a
-              class="c-badge c-badge-light"
-              href="#"
-              target="_self"
-            >
-              Light
-            </a>
-             
-            <a
-              class="c-badge c-badge-dark"
-              href="#"
-              target="_self"
-            >
-              Dark
-            </a>
-          </div>
-          <!---->
-        </div>
+            New
+          </span>
+        </h5>
+         
+        <h6>
+          Example heading 
+          <span
+            class="badge badge-primary"
+          >
+            New
+          </span>
+        </h6>
       </div>
+       
+      <footer
+        class="card-footer"
+      >
+        <button
+          class="btn btn-primary"
+          type="button"
+        >
+          
+          Notifications
+          
+          <span
+            class="badge badge-light"
+            style="position: static;"
+          >
+            4
+          </span>
+        </button>
+      </footer>
+      <!---->
+    </div>
+  </div>
+   
+  <div
+    class="col-12 col-md-6"
+  >
+    <div
+      class="card"
+    >
+      <!---->
+      <header
+        class="card-header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Badge
+        
+        <small>
+          contextual variations
+        </small>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <span
+          class="badge badge-primary"
+        >
+          Primary
+        </span>
+         
+        <span
+          class="badge badge-secondary"
+        >
+          Secondary
+        </span>
+         
+        <span
+          class="badge badge-success"
+        >
+          Success
+        </span>
+         
+        <span
+          class="badge badge-danger"
+        >
+          Danger
+        </span>
+         
+        <span
+          class="badge badge-warning"
+        >
+          Warning
+        </span>
+         
+        <span
+          class="badge badge-info"
+        >
+          Info
+        </span>
+         
+        <span
+          class="badge badge-light"
+        >
+          Light
+        </span>
+         
+        <span
+          class="badge badge-dark"
+        >
+          Dark
+        </span>
+      </div>
+      <!---->
+    </div>
+     
+    <div
+      class="card"
+    >
+      <!---->
+      <header
+        class="card-header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Badge
+        
+        <small>
+          pills
+        </small>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <span
+          class="badge badge-primary badge-pill"
+        >
+          Primary
+        </span>
+         
+        <span
+          class="badge badge-secondary badge-pill"
+        >
+          Secondary
+        </span>
+         
+        <span
+          class="badge badge-success badge-pill"
+        >
+          Success
+        </span>
+         
+        <span
+          class="badge badge-danger badge-pill"
+        >
+          Danger
+        </span>
+         
+        <span
+          class="badge badge-warning badge-pill"
+        >
+          Warning
+        </span>
+         
+        <span
+          class="badge badge-info badge-pill"
+        >
+          Info
+        </span>
+         
+        <span
+          class="badge badge-light badge-pill"
+        >
+          Light
+        </span>
+         
+        <span
+          class="badge badge-dark badge-pill"
+        >
+          Dark
+        </span>
+      </div>
+      <!---->
+    </div>
+     
+    <div
+      class="card"
+    >
+      <!---->
+      <header
+        class="card-header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Badge
+        
+        <small>
+          actionable
+        </small>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <!---->
+        <!---->
+        <a
+          class="badge badge-primary"
+          href="#"
+          target="_self"
+        >
+          Primary
+        </a>
+         
+        <a
+          class="badge badge-secondary"
+          href="#"
+          target="_self"
+        >
+          Secondary
+        </a>
+         
+        <a
+          class="badge badge-success"
+          href="#"
+          target="_self"
+        >
+          Success
+        </a>
+         
+        <a
+          class="badge badge-danger"
+          href="#"
+          target="_self"
+        >
+          Danger
+        </a>
+         
+        <a
+          class="badge badge-warning"
+          href="#"
+          target="_self"
+        >
+          Warning
+        </a>
+         
+        <a
+          class="badge badge-info"
+          href="#"
+          target="_self"
+        >
+          Info
+        </a>
+         
+        <a
+          class="badge badge-light"
+          href="#"
+          target="_self"
+        >
+          Light
+        </a>
+         
+        <a
+          class="badge badge-dark"
+          href="#"
+          target="_self"
+        >
+          Dark
+        </a>
+      </div>
+      <!---->
     </div>
   </div>
 </div>
diff --git a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
index 68ddaf32..15c0c1e9 100644
--- a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Modals.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="wrapper"
 >
   <div>
     <crow-stub>
@@ -24,7 +24,7 @@ exports[`Modals.vue renders correctly 1`] = `
              Bootstrap Modals
             
             <div
-              class="c-card-header-actions"
+              class="card-header-actions"
             >
               <a
                 class="card-header-action"
@@ -46,10 +46,10 @@ exports[`Modals.vue renders correctly 1`] = `
             titletag="h4"
           >
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -61,10 +61,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -76,10 +76,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -93,10 +93,10 @@ exports[`Modals.vue renders correctly 1`] = `
             <hr />
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -108,10 +108,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -123,10 +123,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -138,10 +138,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -153,10 +153,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -168,10 +168,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
-              class="c-mr-1"
+              activeclass="active"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
diff --git a/tests/unit/views/pages/Login.spec.js b/tests/unit/views/pages/Login.spec.js
index 510ec645..96f06735 100644
--- a/tests/unit/views/pages/Login.spec.js
+++ b/tests/unit/views/pages/Login.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Login.vue', () => {
   it('has a name', () => {
-    expect(Login.name).toMatch('Login')
+    expect(Login.name).toBe('Login')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Login)
diff --git a/tests/unit/views/pages/Page404.spec.js b/tests/unit/views/pages/Page404.spec.js
index 92e6905e..6de47bc8 100644
--- a/tests/unit/views/pages/Page404.spec.js
+++ b/tests/unit/views/pages/Page404.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Page404.vue', () => {
   it('has a name', () => {
-    expect(Page404.name).toMatch('Page404')
+    expect(Page404.name).toBe('Page404')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Page404)
diff --git a/tests/unit/views/pages/Page500.spec.js b/tests/unit/views/pages/Page500.spec.js
index 4670817c..d23d7090 100644
--- a/tests/unit/views/pages/Page500.spec.js
+++ b/tests/unit/views/pages/Page500.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Page500.vue', () => {
   it('has a name', () => {
-    expect(Page500.name).toMatch('Page500')
+    expect(Page500.name).toBe('Page500')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Page500)
diff --git a/tests/unit/views/pages/Register.spec.js b/tests/unit/views/pages/Register.spec.js
index ee5c1046..f5224b22 100644
--- a/tests/unit/views/pages/Register.spec.js
+++ b/tests/unit/views/pages/Register.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Register.vue', () => {
   it('has a name', () => {
-    expect(Register.name).toMatch('Register')
+    expect(Register.name).toBe('Register')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Register)
diff --git a/tests/unit/views/pages/__snapshots__/Login.spec.js.snap b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
index 960b5797..eba24b97 100644
--- a/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Login.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-d-flex c-align-items-center c-min-vh-100"
+  class="d-flex align-items-center min-vh-100"
 >
   <crow-stub
-    class="c-justify-content-center"
+    class="justify-content-center"
   >
     <ccol-stub
       md="8"
@@ -13,7 +13,7 @@ exports[`Login.vue renders correctly 1`] = `
     >
       <ccardgroup-stub>
         <ccard-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -27,7 +27,7 @@ exports[`Login.vue renders correctly 1`] = `
               </h1>
                
               <p
-                class="c-text-muted"
+                class="text-muted"
               >
                 Sign In to your account
               </p>
@@ -54,10 +54,10 @@ exports[`Login.vue renders correctly 1`] = `
                   tag="div"
                 >
                   <cbutton-stub
-                    activeclass="c-active"
-                    class="c-px-4"
+                    activeclass="active"
+                    class="px-4"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     routertag="a"
                     target="_self"
                     type="button"
@@ -68,15 +68,15 @@ exports[`Login.vue renders correctly 1`] = `
                 </ccol-stub>
                  
                 <ccol-stub
-                  class="c-text-right"
+                  class="text-right"
                   col="6"
                   tag="div"
                 >
                   <cbutton-stub
-                    activeclass="c-active"
-                    class="c-px-0"
+                    activeclass="active"
+                    class="px-0"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     routertag="a"
                     target="_self"
                     type="button"
@@ -92,7 +92,7 @@ exports[`Login.vue renders correctly 1`] = `
          
         <ccard-stub
           bodywrapper="true"
-          class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
+          class="text-white text-center bg-primary py-5 d-md-down-none"
           subtitletag="h6"
           titletag="h4"
         >
@@ -105,10 +105,10 @@ exports[`Login.vue renders correctly 1`] = `
           </p>
            
           <cbutton-stub
-            activeclass="c-active"
-            class="c-active c-mt-3"
+            activeclass="active"
+            class="active mt-3"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
diff --git a/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
index 289d2adb..5980935f 100644
--- a/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
@@ -2,42 +2,42 @@
 
 exports[`Page404.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-d-flex c-align-items-center c-min-vh-100"
+  class="d-flex align-items-center min-vh-100"
 >
   <crow-stub
-    class="c-w-100 c-justify-content-center"
+    class="w-100 justify-content-center"
   >
     <ccol-stub
       md="6"
       tag="div"
     >
       <div
-        class="c-w-100"
+        class="w-100"
       >
         <div
-          class="c-clearfix"
+          class="clearfix"
         >
           <h1
-            class="c-float-left c-display-3 c-mr-4"
+            class="float-left display-3 mr-4"
           >
             404
           </h1>
            
           <h4
-            class="c-pt-3"
+            class="pt-3"
           >
             Oops! You're lost.
           </h4>
            
           <p
-            class="c-text-muted"
+            class="text-muted"
           >
             The page you are looking for was not found.
           </p>
         </div>
          
         <cforminput-stub
-          class="c-mb-0"
+          class="mb-0"
           lazy="400"
           placeholder="What are you looking for?"
           prependhtml=<i class='cui-magnifying-glass'></i>
diff --git a/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
index 3d40b702..73218ae0 100644
--- a/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
@@ -2,39 +2,39 @@
 
 exports[`Page500.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-d-flex c-align-items-center c-min-vh-100"
+  class="d-flex align-items-center min-vh-100"
 >
   <crow-stub
-    class="c-w-100 c-justify-content-center"
+    class="w-100 justify-content-center"
   >
     <ccol-stub
       md="6"
       tag="div"
     >
       <div
-        class="c-clearfix"
+        class="clearfix"
       >
         <h1
-          class="c-float-left c-display-3 c-mr-4"
+          class="float-left display-3 mr-4"
         >
           500
         </h1>
          
         <h4
-          class="c-pt-3"
+          class="pt-3"
         >
           Houston, we have a problem!
         </h4>
          
         <p
-          class="c-text-muted"
+          class="text-muted"
         >
           The page you are looking for is temporarily unavailable.
         </p>
       </div>
        
       <cforminput-stub
-        class="c-mb-0"
+        class="mb-0"
         lazy="400"
         placeholder="What are you looking for?"
         prependhtml=<i class='cui-magnifying-glass'></i>
diff --git a/tests/unit/views/pages/__snapshots__/Register.spec.js.snap b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
index ac2309e7..c3695afa 100644
--- a/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Register.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-min-vh-100 c-d-flex c-align-items-center"
+  class="min-vh-100 d-flex align-items-center"
 >
   <crow-stub
-    class="c-w-100 c-justify-content-center"
+    class="w-100 justify-content-center"
   >
     <ccol-stub
       md="6"
@@ -13,12 +13,12 @@ exports[`Register.vue renders correctly 1`] = `
       tag="div"
     >
       <ccard-stub
-        class="c-mx-4"
+        class="mx-4"
         subtitletag="h6"
         titletag="h4"
       >
         <ccardbody-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -28,7 +28,7 @@ exports[`Register.vue renders correctly 1`] = `
             </h1>
              
             <p
-              class="c-text-muted"
+              class="text-muted"
             >
               Create your account
             </p>
@@ -59,7 +59,7 @@ exports[`Register.vue renders correctly 1`] = `
              
             <cforminput-stub
               autocomplete="new-password"
-              class="c-mb-4"
+              class="mb-4"
               lazy="400"
               placeholder="Repeat password"
               prependhtml=<i class='cui-lock-locked'></i>
@@ -67,10 +67,10 @@ exports[`Register.vue renders correctly 1`] = `
             />
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
               block="true"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -82,7 +82,7 @@ exports[`Register.vue renders correctly 1`] = `
         </ccardbody-stub>
          
         <ccardfooter-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -92,10 +92,10 @@ exports[`Register.vue renders correctly 1`] = `
               tag="div"
             >
               <cbutton-stub
-                activeclass="c-active"
+                activeclass="active"
                 block="true"
                 event="click"
-                exactactiveclass="c-active"
+                exactactiveclass="active"
                 routertag="a"
                 target="_self"
                 texthtml="Facebook"
@@ -109,10 +109,10 @@ exports[`Register.vue renders correctly 1`] = `
               tag="div"
             >
               <cbutton-stub
-                activeclass="c-active"
+                activeclass="active"
                 block="true"
                 event="click"
-                exactactiveclass="c-active"
+                exactactiveclass="active"
                 routertag="a"
                 target="_self"
                 texthtml="Twitter"
diff --git a/tests/unit/views/theme/Colors.spec.js b/tests/unit/views/theme/Colors.spec.js
index eaaefa8c..adea0979 100644
--- a/tests/unit/views/theme/Colors.spec.js
+++ b/tests/unit/views/theme/Colors.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Colors.vue', () => {
   it('has a name', () => {
-    expect(Colors.name).toMatch('colors')
+    expect(Colors.name).toBe('Colors')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Colors)
diff --git a/tests/unit/views/theme/Typography.spec.js b/tests/unit/views/theme/Typography.spec.js
index 12c059a7..52291826 100644
--- a/tests/unit/views/theme/Typography.spec.js
+++ b/tests/unit/views/theme/Typography.spec.js
@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Typography.vue', () => {
   it('has a name', () => {
-    expect(Typography.name).toMatch('typography')
+    expect(Typography.name).toBe('Typography')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Typography)
diff --git a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
index 0252a186..ba84b8f5 100644
--- a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
+++ b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
@@ -3,11 +3,11 @@
 exports[`Colors.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-card"
+    class="card"
   >
     <!---->
     <header
-      class="c-card-header"
+      class="card-header"
     >
       <i
         class="cui-drop"
@@ -17,18 +17,18 @@ exports[`Colors.vue renders correctly 1`] = `
     </header>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <!---->
       <!---->
       <div
-        class="c-row"
+        class="row"
       >
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-primary"
+            class="theme-color w-75 rounded mb-3 bg-primary"
             style="padding-top: 75%;"
           />
            
@@ -37,18 +37,18 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   #321fdb
                 </td>
@@ -56,13 +56,13 @@ exports[`Colors.vue renders correctly 1`] = `
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   rgb(50, 31, 219)
                 </td>
@@ -72,10 +72,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-secondary"
+            class="theme-color w-75 rounded mb-3 bg-secondary"
             style="padding-top: 75%;"
           />
            
@@ -84,34 +84,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #9da5b1
+                  #ced2d8
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(157, 165, 177)
+                  rgb(206, 210, 216)
                 </td>
               </tr>
             </tbody>
@@ -119,10 +119,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-success"
+            class="theme-color w-75 rounded mb-3 bg-success"
             style="padding-top: 75%;"
           />
            
@@ -131,18 +131,18 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   #2eb85c
                 </td>
@@ -150,13 +150,13 @@ exports[`Colors.vue renders correctly 1`] = `
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   rgb(46, 184, 92)
                 </td>
@@ -166,10 +166,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-danger"
+            class="theme-color w-75 rounded mb-3 bg-danger"
             style="padding-top: 75%;"
           />
            
@@ -178,18 +178,18 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   #e55353
                 </td>
@@ -197,13 +197,13 @@ exports[`Colors.vue renders correctly 1`] = `
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   rgb(229, 83, 83)
                 </td>
@@ -213,10 +213,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-warning"
+            class="theme-color w-75 rounded mb-3 bg-warning"
             style="padding-top: 75%;"
           />
            
@@ -225,18 +225,18 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   #f9b115
                 </td>
@@ -244,13 +244,13 @@ exports[`Colors.vue renders correctly 1`] = `
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   rgb(249, 177, 21)
                 </td>
@@ -260,10 +260,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-info"
+            class="theme-color w-75 rounded mb-3 bg-info"
             style="padding-top: 75%;"
           />
            
@@ -272,18 +272,18 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   #3399ff
                 </td>
@@ -291,13 +291,13 @@ exports[`Colors.vue renders correctly 1`] = `
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
                   rgb(51, 153, 255)
                 </td>
@@ -307,10 +307,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-light"
+            class="theme-color w-75 rounded mb-3 bg-light"
             style="padding-top: 75%;"
           />
            
@@ -319,34 +319,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #e9e9eb
+                  #ebedef
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(233, 233, 235)
+                  rgb(235, 237, 239)
                 </td>
               </tr>
             </tbody>
@@ -354,10 +354,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-dark"
+            class="theme-color w-75 rounded mb-3 bg-dark"
             style="padding-top: 75%;"
           />
            
@@ -366,34 +366,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #4d4e5c
+                  #636f83
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(77, 78, 92)
+                  rgb(99, 111, 131)
                 </td>
               </tr>
             </tbody>
@@ -405,11 +405,11 @@ exports[`Colors.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <!---->
     <header
-      class="c-card-header"
+      class="card-header"
     >
       <i
         class="cui-drop"
@@ -419,18 +419,18 @@ exports[`Colors.vue renders correctly 1`] = `
     </header>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <!---->
       <!---->
       <div
-        class="c-row"
+        class="row"
       >
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-100"
+            class="theme-color w-75 rounded mb-3 bg-gray-100"
             style="padding-top: 75%;"
           />
            
@@ -439,34 +439,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #e9e9eb
+                  #ebedef
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(233, 233, 235)
+                  rgb(235, 237, 239)
                 </td>
               </tr>
             </tbody>
@@ -474,10 +474,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-200"
+            class="theme-color w-75 rounded mb-3 bg-gray-200"
             style="padding-top: 75%;"
           />
            
@@ -486,34 +486,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #d3d3d6
+                  #d8dbe0
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(211, 211, 214)
+                  rgb(216, 219, 224)
                 </td>
               </tr>
             </tbody>
@@ -521,10 +521,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-300"
+            class="theme-color w-75 rounded mb-3 bg-gray-300"
             style="padding-top: 75%;"
           />
            
@@ -533,34 +533,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #bcbdc2
+                  #c4c9d0
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(188, 189, 194)
+                  rgb(196, 201, 208)
                 </td>
               </tr>
             </tbody>
@@ -568,10 +568,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-400"
+            class="theme-color w-75 rounded mb-3 bg-gray-400"
             style="padding-top: 75%;"
           />
            
@@ -580,34 +580,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #a6a7ad
+                  #b1b7c1
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(166, 167, 173)
+                  rgb(177, 183, 193)
                 </td>
               </tr>
             </tbody>
@@ -615,10 +615,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-500"
+            class="theme-color w-75 rounded mb-3 bg-gray-500"
             style="padding-top: 75%;"
           />
            
@@ -627,34 +627,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #909099
+                  #9da5b1
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(144, 144, 153)
+                  rgb(157, 165, 177)
                 </td>
               </tr>
             </tbody>
@@ -662,10 +662,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-600"
+            class="theme-color w-75 rounded mb-3 bg-gray-600"
             style="padding-top: 75%;"
           />
            
@@ -674,34 +674,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #7a7a85
+                  #8a93a2
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(122, 122, 133)
+                  rgb(138, 147, 162)
                 </td>
               </tr>
             </tbody>
@@ -709,10 +709,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-700"
+            class="theme-color w-75 rounded mb-3 bg-gray-700"
             style="padding-top: 75%;"
           />
            
@@ -721,34 +721,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #646470
+                  #768192
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(100, 100, 112)
+                  rgb(118, 129, 146)
                 </td>
               </tr>
             </tbody>
@@ -756,10 +756,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-800"
+            class="theme-color w-75 rounded mb-3 bg-gray-800"
             style="padding-top: 75%;"
           />
            
@@ -768,34 +768,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #4d4e5c
+                  #636f83
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(77, 78, 92)
+                  rgb(99, 111, 131)
                 </td>
               </tr>
             </tbody>
@@ -803,10 +803,10 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
          
         <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
+          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
         >
           <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-gray-900"
+            class="theme-color w-75 rounded mb-3 bg-gray-900"
             style="padding-top: 75%;"
           />
            
@@ -815,530 +815,34 @@ exports[`Colors.vue renders correctly 1`] = `
           </h6>
            
           <table
-            class="c-w-100"
+            class="w-100"
           >
             <tbody>
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   HEX:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  #373847
+                  #4f5d73
                 </td>
               </tr>
                
               <tr>
                 <td
-                  class="c-text-muted"
+                  class="text-muted"
                 >
                   RGB:
                 </td>
                  
                 <td
-                  class="c-font-weight-bold"
+                  class="font-weight-bold"
                 >
-                  rgb(55, 56, 71)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <!---->
-  </div>
-   
-  <div
-    class="c-card"
-  >
-    <!---->
-    <header
-      class="c-card-header"
-    >
-      <i
-        class="cui-drop"
-      />
-       Additional colors
-    
-    </header>
-     
-    <div
-      class="c-card-body"
-    >
-      <!---->
-      <!---->
-      <div
-        class="c-row"
-      >
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-blue"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Blue Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #20a8d8
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(32, 168, 216)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-indigo"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Indigo Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #6610f2
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(102, 16, 242)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-purple"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Purple Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #6f42c1
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(111, 66, 193)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-pink"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Pink Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #e83e8c
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(232, 62, 140)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-red"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Red Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #f86c6b
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(248, 108, 107)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-orange"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Orange Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #f8cb00
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(248, 203, 0)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-yellow"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Yellow Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #ffc107
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(255, 193, 7)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-green"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Green Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #4dbd74
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(77, 189, 116)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-teal"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Teal Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #20c997
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(32, 201, 151)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="c-mb-4 c-col-xs-12 c-col-sm-6 c-col-md-4 c-col-xl-2"
-        >
-          <div
-            class="c-theme-color c-w-75 c-rounded c-mb-3 c-bg-cyan"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Cyan Color
-          </h6>
-           
-          <table
-            class="c-w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  #17a2b8
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="c-text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="c-font-weight-bold"
-                >
-                  rgb(23, 162, 184)
+                  rgb(79, 93, 115)
                 </td>
               </tr>
             </tbody>
diff --git a/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap b/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
index 790e130f..ef9c48b8 100644
--- a/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
+++ b/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
@@ -3,10 +3,10 @@
 exports[`Typography.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Headings
@@ -14,7 +14,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         Documentation and examples for Bootstrap typography,
@@ -22,7 +22,7 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <table
-        class="c-table"
+        class="table"
       >
         <thead>
           <tr>
@@ -41,7 +41,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h1&gt;&lt;/h1&gt;
@@ -52,7 +52,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h1"
+                class="h1"
               >
                 h1. Bootstrap heading
               </span>
@@ -63,7 +63,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h2&gt;&lt;/h2&gt;
@@ -74,7 +74,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h2"
+                class="h2"
               >
                 h2. Bootstrap heading
               </span>
@@ -85,7 +85,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h3&gt;&lt;/h3&gt;
@@ -96,7 +96,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h3"
+                class="h3"
               >
                 h3. Bootstrap heading
               </span>
@@ -107,7 +107,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h4&gt;&lt;/h4&gt;
@@ -118,7 +118,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h4"
+                class="h4"
               >
                 h4. Bootstrap heading
               </span>
@@ -129,7 +129,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h5&gt;&lt;/h5&gt;
@@ -140,7 +140,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h5"
+                class="h5"
               >
                 h5. Bootstrap heading
               </span>
@@ -151,7 +151,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h6&gt;&lt;/h6&gt;
@@ -162,7 +162,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h6"
+                class="h6"
               >
                 h6. Bootstrap heading
               </span>
@@ -174,10 +174,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Headings
@@ -185,18 +185,18 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         <code
-          class="c-highlighter-rouge"
+          class="highlighter-rouge"
         >
           .h1
         </code>
          through
         
         <code
-          class="c-highlighter-rouge"
+          class="highlighter-rouge"
         >
           .h6
         </code>
@@ -207,40 +207,40 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <p
-          class="c-h1"
+          class="h1"
         >
           h1. Bootstrap heading
         </p>
          
         <p
-          class="c-h2"
+          class="h2"
         >
           h2. Bootstrap heading
         </p>
          
         <p
-          class="c-h3"
+          class="h3"
         >
           h3. Bootstrap heading
         </p>
          
         <p
-          class="c-h4"
+          class="h4"
         >
           h4. Bootstrap heading
         </p>
          
         <p
-          class="c-h5"
+          class="h5"
         >
           h5. Bootstrap heading
         </p>
          
         <p
-          class="c-h6"
+          class="h6"
         >
           h6. Bootstrap heading
         </p>
@@ -249,10 +249,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Display headings
@@ -260,7 +260,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -276,16 +276,16 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example c-bd-example-type"
+        class="bd-example bd-example-type"
       >
         <table
-          class="c-table"
+          class="table"
         >
           <tbody>
             <tr>
               <td>
                 <span
-                  class="c-display-1"
+                  class="display-1"
                 >
                   Display 1
                 </span>
@@ -295,7 +295,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-2"
+                  class="display-2"
                 >
                   Display 2
                 </span>
@@ -305,7 +305,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-3"
+                  class="display-3"
                 >
                   Display 3
                 </span>
@@ -315,7 +315,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-4"
+                  class="display-4"
                 >
                   Display 4
                 </span>
@@ -328,10 +328,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Inline text elements
@@ -339,7 +339,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -355,7 +355,7 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <p>
           You can use the mark tag to 
@@ -419,10 +419,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Description list alignment
@@ -430,7 +430,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -448,19 +448,19 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <dl
-          class="c-row"
+          class="row"
         >
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Description lists
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             A description list is perfect for defining terms.
@@ -468,13 +468,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Euismod
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             <p>
               Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
@@ -486,13 +486,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Malesuada porta
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             Etiam porta sem malesuada magna mollis euismod.
@@ -500,13 +500,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3 text-truncate"
+            class="col-sm-3 text-truncate"
           >
             Truncated term is truncated
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             Fusce dapibus, tellus ac cursus commodo, tortor mauris
@@ -515,25 +515,25 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Nesting
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             <dl
-              class="c-row"
+              class="row"
             >
               <dt
-                class="c-col-sm-4"
+                class="col-sm-4"
               >
                 Nested definition list
               </dt>
                
               <dd
-                class="c-col-sm-8"
+                class="col-sm-8"
               >
                 
                 Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
diff --git a/tests/unit/views/users/User.spec.js b/tests/unit/views/users/User.spec.js
index 78cebe96..14ebcda0 100644
--- a/tests/unit/views/users/User.spec.js
+++ b/tests/unit/views/users/User.spec.js
@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('User.vue', () => {
   it('has a name', () => {
-    expect(User.name).toMatch('User')
+    expect(User.name).toBe('User')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(User, {
diff --git a/tests/unit/views/users/Users.spec.js b/tests/unit/views/users/Users.spec.js
index 32301ea6..2e974c54 100644
--- a/tests/unit/views/users/Users.spec.js
+++ b/tests/unit/views/users/Users.spec.js
@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('Users.vue', () => {
   it('has a name', () => {
-    expect(Users.name).toMatch('Users')
+    expect(Users.name).toBe('Users')
   })
   it('has a created hook', () => {
     expect(typeof Users.data).toMatch('function')
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
index cd9c098e..305f71dc 100644
--- a/tests/unit/views/users/__snapshots__/User.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -40,9 +40,9 @@ exports[`User.vue renders correctly 1`] = `
         titletag="h4"
       >
         <cbutton-stub
-          activeclass="c-active"
+          activeclass="active"
           event="click"
-          exactactiveclass="c-active"
+          exactactiveclass="active"
           routertag="a"
           target="_self"
           type="button"
diff --git a/tests/unit/views/widgets/Widgets.spec.js b/tests/unit/views/widgets/Widgets.spec.js
index 596eae64..cb2a066c 100644
--- a/tests/unit/views/widgets/Widgets.spec.js
+++ b/tests/unit/views/widgets/Widgets.spec.js
@@ -9,7 +9,7 @@ Vue.use(CoreuiVue)
 
 describe('Widgets.vue', () => {
   it('has a name', () => {
-    expect(Widgets.name).toMatch('Widgets')
+    expect(Widgets.name).toBe('Widgets')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Widgets)
diff --git a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
index 8f04d66e..9b51695f 100644
--- a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
+++ b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
@@ -15,7 +15,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cprogress-stub
-          class="c-progress-xs c-my-3 c-mb-0"
+          class="progress-xs my-3 mb-0"
           max="100"
           precision="0"
           value="25"
@@ -295,7 +295,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="primary"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="settings"
           width="24"
         />
@@ -315,7 +315,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="info"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="laptop"
           width="24"
         />
@@ -335,7 +335,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="warning"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="moon"
           width="24"
         />
@@ -350,7 +350,7 @@ exports[`Widgets.vue renders correctly 1`] = `
   <widgetsbrand-stub />
    
   <ccardgroup-stub
-    class="c-mb-4"
+    class="mb-4"
   >
     <cwidgetprogressicon-stub
       header="87.500"
@@ -413,7 +413,7 @@ exports[`Widgets.vue renders correctly 1`] = `
   </ccardgroup-stub>
    
   <ccardgroup-stub
-    class="c-mb-4"
+    class="mb-4"
   >
     <cwidgetprogressicon-stub
       header="87.500"