diff --git a/package.json b/package.json
index 8a0d1531..8e560c5c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.1",
+  "version": "3.0.0-alpha",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -17,7 +17,7 @@
     "@coreui/coreui": "^2.1.6",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/vue": "github:coreui/coreui-vue#test",
+    "@coreui/vue": "github:coreui/coreui-vue#v3-bridge-alpha",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.3",
@@ -29,7 +29,7 @@
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
     "tooltip.js": "^1.3.1",
-    "vue": "^2.5.17",
+    "vue": "^2.6.6",
     "vue-chartjs": "^3.4.0",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
@@ -47,7 +47,7 @@
     "https-proxy-agent": "^2.2.1",
     "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.6"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/containers/DefaultAside.vue b/src/containers/DefaultAside.vue
index b60ead63..6c93c8ba 100644
--- a/src/containers/DefaultAside.vue
+++ b/src/containers/DefaultAside.vue
@@ -1,14 +1,14 @@
 <template>
-  <b-tabs>
-    <b-tab>
+  <CTabs>
+    <CTab active>
       <template slot="title">
-        <i class='icon-list'></i>
+        <i class="icon-list"></i>
       </template>
-      <b-list-group class="list-group-accent">
-        <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+      <CListGroup class="list-group-accent">
+        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
           Today
-        </b-list-group-item>
-        <b-list-group-item href="#" class="list-group-item-accent-warning list-group-item-divider">
+        </CListGroupItem>
+        <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
           <div class="avatar float-right">
             <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
           </div>
@@ -21,8 +21,8 @@
           <small class="text-muted">
             <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
           </small>
-        </b-list-group-item>
-        <b-list-group-item href="#" class="list-group-item-accent-info">
+        </CListGroupItem>
+        <CListGroupItem href="#" class="list-group-item-accent-info">
           <div class="avatar float-right">
             <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
           </div>
@@ -30,12 +30,12 @@
           </div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
           <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
-        </b-list-group-item>
+        </CListGroupItem>
         <hr class="transparent mx-3 my-0">
-        <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
           Tomorrow
-        </b-list-group-item>
-        <b-list-group-item href="#" class="list-group-item-accent-danger list-group-item-divider">
+        </CListGroupItem>
+        <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
           <div>New UI Project - <strong>deadline</strong>
           </div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
@@ -57,13 +57,13 @@
               <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
             </div>
           </div>
-        </b-list-group-item>
-        <b-list-group-item href="#" class="list-group-item-accent-success list-group-item-divider">
+        </CListGroupItem>
+        <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
           <div><strong>#10 Startups.Garden</strong> Meetup</div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
           <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
-        </b-list-group-item>
-        <b-list-group-item href="#" class="list-group-item-accent-primary list-group-item-divider">
+        </CListGroupItem>
+        <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
           <div><strong>Team meeting</strong></div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
           <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
@@ -90,10 +90,10 @@
               <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
             </div>
           </div>
-        </b-list-group-item>
-      </b-list-group>
-    </b-tab>
-    <b-tab>
+        </CListGroupItem>
+      </CListGroup>
+    </CTab>
+    <CTab>
       <template slot="title">
         <i class='icon-speech'></i>
       </template>
@@ -117,7 +117,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <c-badge variant="danger" class="avatar-status"></c-badge>
+              <CBadge variant="danger" class="avatar-status"></CBadge>
             </div>
           </div>
           <div>
@@ -132,7 +132,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <c-badge variant="info" class="avatar-status"></c-badge>
+              <CBadge variant="info" class="avatar-status"></CBadge>
             </div>
           </div>
           <div>
@@ -147,7 +147,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <c-badge variant="warning" class="avatar-status"></c-badge>
+              <CBadge variant="warning" class="avatar-status"></CBadge>
             </div>
           </div>
           <div>
@@ -162,7 +162,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <c-badge variant="dark" class="avatar-status"></c-badge>
+              <CBadge variant="dark" class="avatar-status"></CBadge>
             </div>
           </div>
           <div>
@@ -173,8 +173,8 @@
           <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
         </div>
       </div>
-    </b-tab>
-    <b-tab>
+    </CTab>
+    <CTab>
       <template slot="title">
         <i class='icon-settings'></i>
       </template>
@@ -183,7 +183,7 @@
         <div class="aside-options">
           <div class="clearfix mt-4">
             <small><b>Option 1</b></small>
-            <c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
+            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
           </div>
           <div>
             <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -192,7 +192,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 2</b></small>
-            <c-switch color="success" label variant="pill" size="sm" class="float-right" />
+            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
           </div>
           <div>
             <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -201,7 +201,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 3</b></small>
-            <c-switch color="success" label variant="pill" size="sm" class="float-right" disabled defaultChecked/>
+            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
           </div>
           <div>
             <small class="text-muted">Disabled option.</small>
@@ -210,7 +210,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 4</b></small>
-            <c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
+            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
           </div>
         </div>
         <hr>
@@ -218,34 +218,30 @@
         <div class="text-uppercase mb-1 mt-4">
           <small><b>CPU Usage</b></small>
         </div>
-        <b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
+        <CProgress  class="progress-xs" variant="info" :value="25"></CProgress>
         <small class="text-muted">348 Processes. 1/4 Cores.</small>
         <div class="text-uppercase mb-1 mt-2">
           <small><b>Memory Usage</b></small>
         </div>
-        <b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
+        <CProgress  class="progress-xs" variant="warning" :value="70"></CProgress>
         <small class="text-muted">11444GB/16384MB</small>
         <div class="text-uppercase mb-1 mt-2">
           <small><b>SSD 1 Usage</b></small>
         </div>
-        <b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
+        <CProgress  class="progress-xs" variant="danger" :value="95"></CProgress>
         <small class="text-muted">243GB/256GB</small>
         <div class="text-uppercase mb-1 mt-2">
           <small><b>SSD 2 Usage</b></small>
         </div>
-        <b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
+        <CProgress  class="progress-xs" variant="success" :value="10"></CProgress>
         <small class="text-muted">25GB/256GB</small>
       </div>
-    </b-tab>
-  </b-tabs>
+    </CTab>
+  </CTabs>
 </template>
 
 <script>
-import { Switch as cSwitch } from '@coreui/vue'
 export default {
   name: 'DefaultAside',
-  components: {
-    cSwitch
-  }
 }
 </script>
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index b01d8f80..c65a18eb 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -1,53 +1,53 @@
 <template>
   <div class="app">
-    <AppHeader fixed>
-      <SidebarToggler class="d-lg-none" display="md" mobile />
-      <b-link class="navbar-brand" to="#">
+    <CHeader fixed>
+      <CSidebarToggler class="d-lg-none" display="md" mobile />
+      <CLink class="navbar-brand" to="#">
         <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
         <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
-      </b-link>
-      <SidebarToggler class="d-md-down-none" display="lg" />
-      <b-navbar-nav class="d-md-down-none">
-        <b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
-        <b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
-        <b-nav-item class="px-3">Settings</b-nav-item>
-      </b-navbar-nav>
-      <b-navbar-nav class="ml-auto">
-        <b-nav-item class="d-md-down-none">
+      </CLink>
+      <CSidebarToggler class="d-md-down-none" display="lg" />
+      <CNavbarNav class="d-md-down-none">
+        <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
+        <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
+        <CNavItem class="px-3">Settings</CNavItem>
+      </CNavbarNav>
+      <CNavbarNav class="ml-auto">
+        <CNavItem class="d-md-down-none">
           <i class="icon-bell"></i>
-          <b-badge pill variant="danger">5</b-badge>
-        </b-nav-item>
-        <b-nav-item class="d-md-down-none">
+          <CBadge pill variant="danger">5</CBadge>
+        </CNavItem>
+        <CNavItem class="d-md-down-none">
           <i class="icon-list"></i>
-        </b-nav-item>
-        <b-nav-item class="d-md-down-none">
+        </CNavItem>
+        <CNavItem class="d-md-down-none">
           <i class="icon-location-pin"></i>
-        </b-nav-item>
+        </CNavItem>
         <DefaultHeaderDropdownAccnt/>
-      </b-navbar-nav>
-      <AsideToggler class="d-none d-lg-block" />
+      </CNavbarNav>
+      <CAsideToggler class="d-none d-lg-block" />
       <!--<AsideToggler class="d-lg-none" mobile />-->
-    </AppHeader>
+    </CHeader>
     <div class="app-body">
-      <AppSidebar fixed>
-        <SidebarHeader/>
-        <SidebarForm/>
-        <SidebarNav :navItems="computedNav"></SidebarNav>
-        <SidebarFooter/>
-        <SidebarMinimizer/>
-      </AppSidebar>
+      <CSidebar fixed>
+        <CSidebarHeader/>
+        <CSidebarForm/>
+        <CSidebarNav :navItems="computedNav"></CSidebarNav>
+        <CSidebarFooter/>
+        <CSidebarMinimizer/>
+      </CSidebar>
       <main class="main">
         <CBreadcrumbRouter/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
       </main>
-      <AppAside fixed>
+      <CAside fixed>
         <!--aside-->
         <DefaultAside/>
-      </AppAside>
+      </CAside>
     </div>
-    <TheFooter>
+    <CFooter>
       <!--footer-->
       <div>
         <a href="https://coreui.io">CoreUI</a>
@@ -57,32 +57,20 @@
         <span class="mr-1">Powered by</span>
         <a href="https://coreui.io">CoreUI for Vue</a>
       </div>
-    </TheFooter>
+    </CFooter>
   </div>
 </template>
 
 <script>
 import nav from '@/_nav'
-import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
 export default {
   name: 'full',
   components: {
-    AsideToggler,
-    AppHeader,
-    AppSidebar,
-    AppAside,
-    TheFooter,
     DefaultAside,
     DefaultHeaderDropdownAccnt,
-    SidebarForm,
-    SidebarFooter,
-    SidebarToggler,
-    SidebarHeader,
-    SidebarNav,
-    SidebarMinimizer
   },
   data () {
     return {
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index 32bbd12e..f269bf53 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -1,58 +1,50 @@
 <template>
-  <CDropdown right class="nav-item" toggleClasses="nav-link" menuClasses="hehe">
-    <img slot="button"
-      src="img/avatars/6.jpg"
-      class="img-avatar"
-      alt="admin@bootstrapmaster.com"
+  <CDropdown right
+             nav
+             no-caret
+             no-popper
+             addMenuClasses="dropdown-menu-right"
+  >
+    <img slot="buttonContent"
+         src="img/avatars/6.jpg"
+         class="img-avatar"
+         alt="admin@bootstrapmaster.com"
     />
-
-    <c-dropdown-header tag="div"  class="text-center"><strong>Account</strong></c-dropdown-header>
-    <c-dropdown-item><i class="fa fa-bell-o" /> Updates
-      <c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-envelope-o" /> Messages
-      <c-badge variant="success">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-tasks" /> Tasks
-      <c-badge variant="danger">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-comments" /> Comments
-      <c-badge variant="warning">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
-    <c-dropdown-header
+    <CDropdownHeader tag="div"  class="text-center"><strong>Account</strong></CDropdownHeader>
+    <CDropdownItem><i class="fa fa-bell-o" /> Updates
+      <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
+    <CDropdownItem><i class="fa fa-envelope-o" /> Messages
+      <CBadge variant="success">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
+    <CDropdownItem><i class="fa fa-tasks" /> Tasks
+      <CBadge variant="danger">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
+    <CDropdownItem><i class="fa fa-comments" /> Comments
+      <CBadge variant="warning">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
+    <CDropdownHeader
       tag="div"
       class="text-center">
       <strong>Settings</strong>
-    </c-dropdown-header>
-    <c-dropdown-item><i class="fa fa-user" /> Profile</c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-wrench" /> Settings</c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-usd" /> Payments
-      <c-badge variant="secondary">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-file" /> Projects
-      <c-badge variant="primary">{{ itemsCount }}</c-badge>
-    </c-dropdown-item>
+    </CDropdownHeader>
+    <CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
+    <CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
+    <CDropdownItem><i class="fa fa-usd" /> Payments
+      <CBadge variant="secondary">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
+    <CDropdownItem><i class="fa fa-file" /> Projects
+      <CBadge variant="primary">{{ itemsCount }}</CBadge>
+    </CDropdownItem>
     <CDropdownDivider/>
-    <c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
-    <c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
+    <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
+    <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
   </CDropdown>
 </template>
 
 <script>
-// import CDropdown from './CDropdown'
-// import CDropdownHeader from './CDropdownHeader'
-// import CDropdownDivider from './CDropdownDivider'
-// import CDropdownItem from './CDropdownItem'
-
-
 export default {
   name: 'DefaultHeaderDropdownAccnt',
-  // components: {
-  //   CDropdown,
-  //   CDropdownHeader,
-  //   CDropdownDivider,
-  //   CDropdownItem
-  // },
   data: () => {
     return { itemsCount: 42 }
   },
diff --git a/src/main.js b/src/main.js
index a81f23d7..e6ee229d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,10 +10,9 @@ import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
 //Import built package
-import CoreuiVue from '@coreui/vue'
+import CoreuiVue from '@coreui/vue/src'
 
 Vue.config.performance = true
-
 // todo
 // cssVars()
 Vue.use(BootstrapVue)
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index fa4800e6..71d35b25 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="animated fadeIn">
-    <b-card-group columns class="card-columns">
-      <b-card header="Line Chart">
-        <line-example/>
-      </b-card>
-      <b-card header="Bar Chart">
-        <bar-example/>
-      </b-card>
-      <b-card header="Doughnut Chart">
-        <doughnut-example/>
-      </b-card>
-      <b-card header="Radar Chart">
-        <radar-example/>
-      </b-card>
-      <b-card header="Pie Chart">
-        <pie-example/>
-      </b-card>
-      <b-card header="Polar Area Chart">
-        <polar-area-example/>
-      </b-card>
-      <b-card header="Simple line chart">
-        <c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+    <CCardGroup columns class="card-columns">
+      <CCard header="Line Chart">
+        <LineExample/>
+      </CCard>
+      <CCard header="Bar Chart">
+        <BarExample/>
+      </CCard>
+      <CCard header="Doughnut Chart">
+        <DoughnutExample/>
+      </CCard>
+      <CCard header="Radar Chart">
+        <RadarExample/>
+      </CCard>
+      <CCard header="Pie Chart">
+        <PieExample/>
+      </CCard>
+      <CCard header="Polar Area Chart">
+        <PolarAreaExample/>
+      </CCard>
+      <CCard header="Simple line chart">
+        <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                      label='Sales' borderColor='success'/>
-      </b-card>
-      <b-card header="Simple pointed chart">
-        <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+      </CCard>
+      <CCard header="Simple pointed chart">
+        <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                      :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                      style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
-      </b-card>
-      <b-card header="Simple bar chart">
-        <c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+      </CCard>
+      <CCard header="Simple bar chart">
+        <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                     label='Sales' color='danger'/>
-      </b-card>
-    </b-card-group>
+      </CCard>
+    </CCardGroup>
   </div>
 </template>
 <script>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 11af6bd9..2b72b23e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,187 +1,210 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col sm="6" lg="3">
-        <c-widget06 header="9.823" text="Members online">
-          <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
-                <i class="icon-settings"></i>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidget06 header="9.823" text="Members online">
+          <template slot="dropdown">
+            <CDropdown class="float-right"
+                       variant="transparent p-0"
+                       right
+                       button-content="<i class='icon-settings'></i>"
+                       tag="div"
+            >
+              <!-- <template slot="button-content">
+
+              </template> -->
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+          <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' label='Members' pointHoverColor='primary'/>
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="info" header="9.823" text="Members online">
-          <b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
-            <i slot="button-content"
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="info" header="9.823" text="Members online">
+          <CDropdown slot="dropdown"
+                     class="float-right"
+                     variant="transparent p-0"
+                     right
+                     no-caret
+                     button-content="<i class='icon-location-pin'></i>"
+                     tag="div"
+          >
+            <!-- <i slot="button-content"
                class="icon-location-pin"
-            ></i>
-            <b-dropdown-item>Action</b-dropdown-item>
-            <b-dropdown-item>Another action</b-dropdown-item>
-            <b-dropdown-item>Something else here...</b-dropdown-item>
-            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-          </b-dropdown>
+            ></i> -->
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
           <CSimplePointedChart class="px-3"
                                :data="[1, 18, 9, 17, 34, 22, 11]"
                                :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
                                style="height:70px"
                                label="Members"
-                               :options="{elements: {line: {tension: 0.00001}}}"
+                               :options="{ elements: { line: { tension: 0.00001 }}}"
                                pointHoverColor="info"
           />
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="warning" header="9.823" text="Members online">
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="warning" header="9.823" text="Members online">
           <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
-                <i class="icon-settings"></i>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+            <CDropdown class="float-right"
+                       variant="transparent p-0"
+                       right
+                       button-content="<i class='icon-settings'></i>"
+                       tag="div"
+             >
+
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
+          <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
                          :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="danger" header="9.823" text="Members online">
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="danger" header="9.823" text="Members online">
           <template slot="dropdown">
-            <b-dropdown class="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
+            <CDropdown class="float-right"
+                       variant="transparent p-0"
+                       right
+                       button-content="<i class='icon-settings'></i>"
+            >
+              <!-- <template slot="button-content">
                 <i class="icon-settings"></i>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+              </template> -->
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                         label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-        </c-widget06>
-      </b-col>
-    </b-row>
+        </CWidget06>
+      </CCol>
+    </CRow>
 
-    <b-card>
-      <b-row>
-        <b-col sm="5">
+    <CCard>
+      <CRow>
+        <CCol sm="5">
           <h4 id="traffic" class="card-title mb-0">Traffic</h4>
           <div class="small text-muted">November 2017</div>
-        </b-col>
-        <b-col sm="7" class="d-none d-md-block">
-          <b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
-          <b-button-toolbar class="float-right" aria-label="Toolbar with buttons group">
-            <b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
-              <b-form-radio class="mx-0" value="Day">Day</b-form-radio>
-              <b-form-radio class="mx-0" value="Month">Month</b-form-radio>
-              <b-form-radio class="mx-0" value="Year">Year</b-form-radio>
-            </b-form-radio-group>
-          </b-button-toolbar>
-        </b-col>
-      </b-row>
-      <main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
-      <div slot="footer">
-        <b-row class="text-center">
-          <b-col class="mb-sm-2 mb-0">
+        </CCol>
+        <CCol sm="7" class="d-none d-md-block">
+          <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
+          <CButtonGroup class="float-right mr-3">
+            <CButton variant="outline-secondary"
+                     v-for="(value, key) in ['Day', 'Month', 'Year']"
+                     :key="key"
+                     class="mx-0"
+                     :pressed="value === selected ? true : false"
+                     @click="selected = value"
+            >
+              {{value}}
+            </CButton>
+          </CButtonGroup>
+        </CCol>
+      </CRow>
+      <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
+      <CCardFooter slot="footer">
+        <CRow class="text-center">
+          <CCol md sm="12" class="mb-sm-2 mb-0">
             <div class="text-muted">Visits</div>
             <strong>29.703 Users (40%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0 d-md-down-none">
+            <CProgress  class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
             <div class="text-muted">Unique</div>
             <strong>24.093 Users (20%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0">
+            <CProgress  class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
             <div class="text-muted">Pageviews</div>
             <strong>78.706 Views (60%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0">
+            <CProgress  class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
             <div class="text-muted">New Users</div>
             <strong>22.123 Users (80%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0 d-md-down-none">
+            <CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
             <div class="text-muted">Bounce Rate</div>
             <strong>Average Rate (40.15%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
-          </b-col>
-        </b-row>
-      </div>
-    </b-card>
-    <b-row>
-      <b-col md="3" sm="6">
-        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+            <CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
+          </CCol>
+        </CRow>
+      </CCardFooter>
+    </CCard>
+    <CRow>
+      <CCol md="3" sm="6">
+        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+          <CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px' color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+          <CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+          <CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
+          <CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px' color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col md="12">
-        <b-card header="Traffic &amp; Sales">
-          <b-row>
-            <b-col sm="12" lg="6">
-              <b-row>
-                <b-col sm="6">
+        </CWidget04>
+       </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol md="12">
+        <CCard header="Traffic &amp; Sales">
+          <CRow>
+            <CCol sm="12" lg="6">
+              <CRow>
+                <CCol sm="6">
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
                     <div :style="{ top: '-10px'}">
-                      <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
+                      <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
+                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
                   </Callout>
-                </b-col>
-                <b-col sm="6">
+                </CCol>
+                <CCol sm="6">
                   <Callout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                     <div :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
+                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
                   </Callout>
-                </b-col>
-              </b-row>
+                </CCol>
+              </CRow>
               <hr class="mt-0">
               <div class="progress-group mb-4">
                 <div class="progress-group-prepend">
@@ -190,8 +213,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress class="progress-xs" variant="info" :value="34" height={} />
-                  <b-progress class="progress-xs" variant="danger" :value="78" height={} />
+                  <CProgress class="progress-xs" variant="info" :value="34"  />
+                  <CProgress class="progress-xs" variant="danger" :value="78"  />
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -201,8 +224,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="56" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="94" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -212,8 +235,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="12" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="67" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -223,8 +246,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="43" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="91" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -234,8 +257,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="22" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="73" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -245,8 +268,8 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="53" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="82" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="progress-group mb-4">
@@ -256,41 +279,41 @@
                   </span>
                 </div>
                 <div class="progress-group-bars">
-                  <b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
-                  <b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
+                  <CProgress  class="progress-xs" :value="9" variant="info"></CProgress>
+                  <CProgress  class="progress-xs" :value="69" variant="danger"></CProgress>
                 </div>
               </div>
               <div class="legend text-center">
                 <small>
-                  <sup><b-badge pill variant="info">&nbsp;</b-badge></sup>
+                  <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
                   New clients
                   &nbsp;&nbsp;
-                  <sup><b-badge pill variant="danger">&nbsp;</b-badge></sup>
+                  <sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
                   Recurring clients
                 </small>
               </div>
-            </b-col>
-            <b-col sm="12" lg="6">
-              <b-row>
-                <b-col sm="6">
+            </CCol>
+            <CCol sm="12" lg="6">
+              <CRow>
+                <CCol sm="6">
                   <Callout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
                     <div :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
+                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
                   </Callout>
-                </b-col>
-                <b-col sm="6">
+                </CCol>
+                <CCol sm="6">
                   <Callout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
                     <div :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
+                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
                   </Callout>
-                </b-col>
-              </b-row>
+                </CCol>
+              </CRow>
               <hr class="mt-0">
               <ul class="horizontal-bars type-2">
                 <div class="progress-group">
@@ -300,7 +323,7 @@
                     <span class="ml-auto font-weight-bold">43%</span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress>
+                    <CProgress  class="progress-xs" :value="43" variant="warning"></CProgress>
                   </div>
                 </div>
                 <div class="progress-group mb-5">
@@ -310,7 +333,7 @@
                     <span class="ml-auto font-weight-bold">37%</span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress>
+                    <CProgress  class="progress-xs" :value="37" variant="warning"></CProgress>
                   </div>
                 </div>
                 <div class="progress-group">
@@ -320,7 +343,7 @@
                     <span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
+                    <CProgress  class="progress-xs" :value="56" variant="success"></CProgress>
                   </div>
                 </div>
                 <div class="progress-group">
@@ -330,7 +353,7 @@
                     <span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
+                    <CProgress  class="progress-xs" :value="15" variant="success"></CProgress>
                   </div>
                 </div>
                 <div class="progress-group">
@@ -340,7 +363,7 @@
                     <span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
+                    <CProgress  class="progress-xs" :value="11" variant="success"></CProgress>
                   </div>
                 </div>
                 <div class="progress-group">
@@ -350,52 +373,85 @@
                     <span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
                   </div>
                   <div class="progress-group-bars">
-                    <b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
+                    <CProgress  class="progress-xs" :value="8" variant="success"></CProgress>
                   </div>
                 </div>
                 <div class="divider text-center">
-                  <b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
+                  <CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
                 </div>
               </ul>
-            </b-col>
-          </b-row>
+            </CCol>
+          </CRow>
           <br/>
-          <b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
-            <div slot="avatar" class="avatar" slot-scope="item">
-              <img :src="item.value.url" class="img-avatar" alt="">
-              <span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success',  'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
-            </div>
-            <div slot="user" slot-scope="item">
-              <div>{{item.value.name}}</div>
+          <CTable class="mb-0 table-outline"
+                   hover
+                   :items="tableItems"
+                   :fields="tableFields"
+                   head-variant="light"
+                   noSorting
+          >
+            <!-- <div slot="activity-header">
+              A tu nic
+            </div> -->
+            <td slot="avatar" class="text-center" slot-scope="{item}">
+              <div class="avatar">
+                <img :src="item.avatar.url" class="img-avatar" alt="">
+                <span class="avatar-status"
+                      :class="item.avatar.status ?
+                      `bg-${item.avatar.status}` :
+                      'bg-secondary'"
+                ></span>
+              </div>
+            </td>
+            <td slot="user" slot-scope="{item}">
+              <div>{{item.user.name}}</div>
               <div class="small text-muted">
                 <span>
-                  <template v-if="item.value.new">New</template>
+                  <template v-if="item.user.new">New</template>
                   <template v-else>Recurring</template>
-                </span> | Registered: {{item.value.registered}}
+                </span> | Registered: {{item.user.registered}}
               </div>
-            </div>
-            <i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
-            <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
-            <div slot="usage" slot-scope="item">
+            </td>
+            <td slot="country"
+                slot-scope="{item}"
+                class="text-center"
+            >
+              <i class="h4 mb-0"
+                 :class="flag(item.country.flag)"
+                 :title="item.country.flag"
+                 :id="item.country.flag"
+              ></i>
+            </td>
+            <!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
+            <td slot="usage" slot-scope="{item}">
               <div class="clearfix">
                 <div class="float-left">
-                  <strong>{{item.value.value}}%</strong>
+                  <strong>{{item.usage.value}}%</strong>
                 </div>
                 <div class="float-right">
-                  <small class="text-muted">{{item.value.period}}</small>
+                  <small class="text-muted">{{item.usage.period}}</small>
                 </div>
               </div>
-              <b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
-            </div>
-            <i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
-            <div slot="activity" slot-scope="item">
+              <CProgress  class="progress-xs" v-model="item.usage.value"
+
+              :variant="variant(item.usage.value)"></CProgress>
+            </td>
+            <td slot="payment"
+                slot-scope="{item}"
+                class="text-center"
+            >
+              <i :class="item.payment.icon"
+                 style="font-size:24px"
+               ></i>
+            </td>
+            <td slot="activity" slot-scope="{item}">
               <div class="small text-muted">Last login</div>
-              <strong>{{item.value}}</strong>
-            </div>
-          </b-table>
-        </b-card>
-      </b-col>
-    </b-row>
+              <strong>{{item.activity}}</strong>
+            </td>
+          </CTable>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
@@ -464,29 +520,14 @@ export default {
           activity: 'Last week'
         }
       ],
-      tableFields: {
-        avatar: {
-          label: '<i class="icon-people"></i>',
-          class: 'text-center'
-        },
-        user: {
-          label: 'User'
-        },
-        country: {
-          label: 'Country',
-          class: 'text-center'
-        },
-        usage: {
-          label: 'Usage'
-        },
-        payment: {
-          label: 'Payment method',
-          class: 'text-center'
-        },
-        activity: {
-          label: 'Activity'
-        }
-      }
+      tableFields: [
+        { key: 'avatar', label: '<i class="icon-people"></i>',},
+        { key: 'user' },
+        { key: 'country' },
+        { key: 'usage' },
+        { key: 'payment', label: 'Payment method' },
+        { key: 'activity' },
+      ]
     }
   },
   methods: {
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index bcf14d8a..9ffb2531 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -1,234 +1,234 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
-          <CProgress color="success" :value="25" class="progress-xs my-3 mb-0"/>
-        </c-widget01>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
+          <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
+        </CWidget01>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="info" :value="25"/>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" :value="25"/>
-      </b-col>
-      <b-col sm="6" lg="3">
-          <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+      <CCol sm="6" lg="3">
+          <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                     variant="danger" :value="25"/>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="success" inverse :value="25"/>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="info" inverse :value="25"/>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" inverse :value="25"/>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="danger" inverse :value="25"/>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col cols="12" sm="6" lg="4">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="4">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
-      </b-col>
-      <b-col cols="12" sm="6" lg="4">
-        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
-      </b-col>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="3">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
+      </CCol>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+      </CCol>
 
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col md="3" sm="6">
-        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
-       </b-col>
-       <b-col md="3" sm="6" class="codeContainer">
-        <c-widget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol md="3" sm="6">
+        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+       </CCol>
+       <CCol md="3" sm="6" class="codeContainer">
+        <CWidget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
           <i slot="icon" class="fa fa-battery-1"></i>
-        </c-widget04>
-       </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col md="3" sm="6">
-        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+        </CWidget04>
+       </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol md="3" sm="6">
+        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+          <CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px' color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+          <CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+          <CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-       <b-col md="3" sm="6">
-        <c-widget04 variant='google-plus'
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04 variant='google-plus'
                     rightHeader='894'
                     rightFooter='followers'
                     leftHeader='92' leftFooter='circles'>
-          <c-simple-line-chart chartId="google-plus"
+          <CSimpleLineChart chartId="google-plus"
                                :data='[35, 23, 56, 22, 97, 23, 64]'
                                label='Followers'
                                :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                                style='height:100px'
                                color='rgba(255,255,255,.1)'/>
-        </c-widget04>
-       </b-col>
-    </b-row><!--/.row-->
-    <b-card-group class="mb-4">
-      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
-    </b-card-group>
-    <b-card-group class="mb-4">
-      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
-      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      <c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
-      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
-    </b-card-group>
-    <b-row>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
+        </CWidget04>
+       </CCol>
+    </CRow><!--/.row-->
+    <CCardGroup class="mb-4">
+      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+    </CCardGroup>
+    <CCardGroup class="mb-4">
+      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
+      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+      <CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
+      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+    </CCardGroup>
+    <CRow>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
           <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
-        </c-widget05>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
-      </b-col>
-      <b-col sm="6" md="2">
-        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="6" lg="3">
-        <c-widget06 header="9.823" text="Members online">
+        </CWidget05>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidget06 header="9.823" text="Members online">
           <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
+            <CDropdownclass="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
               </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+          <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' label='Members' pointHoverColor='primary'/>
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="info" header="9.823" text="Members online">
-          <b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="info" header="9.823" text="Members online">
+          <CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
             <i slot="button-content"
                class="icon-location-pin"
             ></i>
-            <b-dropdown-item>Action</b-dropdown-item>
-            <b-dropdown-item>Another action</b-dropdown-item>
-            <b-dropdown-item>Something else here...</b-dropdown-item>
-            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-          </b-dropdown>
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
           <CSimplePointedChart class="px-3"
                                :data="[1, 18, 9, 17, 34, 22, 11]"
                                :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
@@ -237,124 +237,120 @@
                                :options="{elements: {line: {tension: 0.00001}}}"
                                pointHoverColor="info"
           />
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="warning" header="9.823" text="Members online">
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="warning" header="9.823" text="Members online">
           <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
+            <CDropdownclass="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
               </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
+          <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
                          :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-        </c-widget06>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget06 variant="danger" header="9.823" text="Members online">
+        </CWidget06>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget06 variant="danger" header="9.823" text="Members online">
           <template slot="dropdown">
-            <b-dropdown class="float-right" variant="transparent p-0" right>
+            <CDropdownclass="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
               </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdown>
           </template>
-          <c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                         label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-        </c-widget06>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="6" lg="3">
-        <c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidget06>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
           <CSimpleBarChart style="height:40px"
                            :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
                            label="Sales"
           />
-        </c-widget07>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </c-widget07>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </c-widget07>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <c-widget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </c-widget07>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="4" lg="2">
-        <c-widget08 header='title' text='1,123'>
-          <c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        </CWidget07>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidget07>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidget07>
+      </CCol>
+      <CCol sm="6" lg="3">
+        <CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidget07>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="4" lg="2">
+        <CWidget08 header='title' text='1,123'>
+          <CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='danger'/>
-        </c-widget08>
-      </b-col>
-      <b-col sm="4" lg="2">
-        <c-widget08 header='title' text='1,123'>
-          <c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        </CWidget08>
+      </CCol>
+      <CCol sm="4" lg="2">
+        <CWidget08 header='title' text='1,123'>
+          <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='primary'/>
-        </c-widget08>
-      </b-col>
-      <b-col sm="4" lg="2">
-        <c-widget08 header='title' text='1,123'>
+        </CWidget08>
+      </CCol>
+      <CCol sm="4" lg="2">
+        <CWidget08 header='title' text='1,123'>
                        <CSimpleLineChart style="height:40px"
                                         :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
                                         label="Sales"
                                         borderColor="success"
                        />
-        </c-widget08>
-      </b-col>
-      <b-col sm="4" lg="2">
-        <c-widget08  header='title' text='1,123'>
-          <c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        </CWidget08>
+      </CCol>
+      <CCol sm="4" lg="2">
+        <CWidget08  header='title' text='1,123'>
+          <CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='danger'/>
-        </c-widget08>
-      </b-col>
-      <b-col sm="4" lg="2">
-        <c-widget08  header='title' text='1,123'>
-          <c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        </CWidget08>
+      </CCol>
+      <CCol sm="4" lg="2">
+        <CWidget08  header='title' text='1,123'>
+          <CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='primary'/>
-        </c-widget08>
-      </b-col>
-      <b-col sm="4" lg="2">
-        <c-widget08  header='title' text='1,123'>
-          <c-simple-bar-chart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        </CWidget08>
+      </CCol>
+      <CCol sm="4" lg="2">
+        <CWidget08  header='title' text='1,123'>
+          <CSimpleBarChart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='success'/>
-        </c-widget08>
-      </b-col>
-    </b-row>
+        </CWidget08>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
 <script>
-// import CWidget06 from './CWidget06'
 export default {
   name: 'Widgets',
-  // components: {
-  //   CWidget06
-  // }
 }
 </script>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index f4df774e..964c8a87 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,42 +1,34 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols>
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
-            <CBreadcrumb :items="items"/>
+            </CCardHeader>
+            <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
             <CBreadcrumb :items="items2"/>
             <CBreadcrumb :items="items3"/>
-            <!-- <Breadcrumb :list="items3"/> -->
-
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
 
 <script>
-// import CBreadcrumb from './CBreadcrumb'
 export default {
   name: 'breadcrumbs',
-  // components: {
-  //   CBreadcrumb
-  // },
   data () {
     return {
       items: [{
-        text: 'Admin',
+        text: '<b>Admin</b>',
         href: '#'
       }, {
         text: 'Manage',
@@ -44,6 +36,8 @@ export default {
       }, {
         text: 'Library'
       }],
+
+
       items2: [{
         text: 'Go to dashboard',
         to: '/dashboard'
@@ -56,19 +50,21 @@ export default {
       },{
         text: 'Current page'
       }],
-      items3: ['sd', {
+
+
+      items3: [{
         text: 'Link',
         to: '#2',
         activeClass: 'bg-info p-1'
       }, {
         text: 'Active',
         to: '#3',
-        activeClass: 'bg-warning p-1'
+        activeClass: 'bg-warning p-1',
+        addLinkClasses: 'bg-info p-1'
       },{
         text: 'Classes',
         to: '#4',
         activeClass: 'bg-danger p-1',
-        current: false
       }]
     }
   }
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 4c9f5d31..137eb107 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -1,300 +1,259 @@
 <template>
   <div class="animated fadeIn">
-    <!-- <CContainer fluid>
-      <CRow>
-        <CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe">
-          hehe
-        </CColumn>
-      </CRow>
-    </CContainer> -->
-    <CNavbar toggleable="md" light variant="light">
-      <CNavbarToggle class="hehe" @click="test2 = !test2"/>
-      <CLink class="navbar-brand">NavBar</CLink>
-      <CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
-        <CNavbarNav pills class="navbar-nav">
-          <CNavItem>
-            hehehe1
-          </CNavItem>
-          <CNavItem class="nav-item">
-            hehehe1
-          </CNavItem>
-          <CNavItem class="nav-item">
-            hehehe2
-          </CNavItem>
-          <DefaultHeaderDropdownAccnt/>
-        </CNavbarNav>
-        <CNavbarNav class="ml-auto">
-          <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
-            <c-dropdown-item><i class="fa fa-file" /> Projects
-              <c-badge variant="primary">32</c-badge>
-            </c-dropdown-item>
-            <c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
-            <c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
-          </CDropdown>
-        </CNavbarNav>
-      </CCollapse>
-    </CNavbar>
-    <br>
-    <b-row>
-      <b-col sm="6" md="4">
-        <transition name="fade">
-          <c-card class="bg-secondary" no-body v-if="show" >
-            <CCardHeader slot="header">
-              Card with header actions
-              <div class="card-header-actions">
-                <c-link href="#" class="card-header-action btn-setting" >
-                  <i class="icon-settings"></i>
-                </c-link>
-                <c-link class="card-header-action btn-minimize"  v-c-collapse:collapse1="test" @click="test = !test" data-duration="600">
-                  <i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i>
-                </c-link>
-                <c-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <i class="icon-close"></i>
-                </c-link>
-              </div>
-            </CCardHeader>
-            <c-card-body id="collapse1">
-              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.
-            </c-card-body>
-          </c-card>
-        </transition>
-      </b-col>
-      <b-col sm="6" md="4">
-        <c-card>
-          <CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/>
-          <CCardHeader header="Card title"/>
-          <CCardBody  style="max-height:200px;overflow-y:auto">
-            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.
-            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.
-            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.
-            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.
-            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.
-            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.
-          </CCardBody>
-        </c-card>
-
-      </b-col>
-      <b-col sm="6" md="4">
-        <c-card footer="Card footer"
-                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."
-                header="<i class='fa fa-check'></i> Card with icon"/>
-      </b-col>
-      <b-col sm="6" md="4">
-        <CCard footer="Card footer">
-          <CCardHeader slot="header">
-            <i class='fa fa-check'></i> Card with icon
-          </CCardHeader>
-          <CCardBody slot="body"
-                     title="title"
-                     subtitle="subtitle"
-                     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."/>
+    <CRow>
+      <CCol sm="6" md="4">
+        <CCard header="Card title">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard footer="Card Footer">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="<i class='fa fa-check'></i> Card with icon">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card>
-          <div slot="header">
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard>
+          <CCardHeader slot="header">
             Card with switch
             <label class="switch switch-sm switch-text switch-info float-right mb-0">
               <input type="checkbox" class="switch-input">
               <span class="switch-label" data-on="On" data-off="Off"></span>
               <span class="switch-handle"></span>
             </label>
-          </div>
+          </CCardHeader>
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card>
-          <div slot="header">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard>
+          <CCardHeader slot="header">
             Card with label
-            <b-badge variant="success" class="float-right">Success</b-badge>
-          </div>
+            <CBadge variant="success" class="float-right">Success</CBadge>
+          </CCardHeader>
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card>
-          <div slot="header">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard>
+          <CCardHeader slot="header">
             Card with label
-            <b-badge pill variant="danger" class="float-right">42</b-badge>
-          </div>
+            <CBadge pill variant="danger" class="float-right">42</CBadge>
+          </CCardHeader>
           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.
-        </b-card>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline primary" border-variant="primary">
+        </CCard>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline primary" border-variant="primary">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline secondary" border-variant="secondary">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline secondary" border-variant="secondary">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline success" border-variant="success">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline success" border-variant="success">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline info" border-variant="info">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline info" border-variant="info">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline warning" border-variant="warning">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline warning" border-variant="warning">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card outline danger" border-variant="danger">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card outline danger" border-variant="danger">
           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.
-        </b-card>
-      </b-col>
-    </b-row><!--/.row-->
+        </CCard>
+      </CCol>
+    </CRow><!--/.row-->
 
-    <b-row>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-primary" header="Card with primary accent">
+    <CRow>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-primary" header="Card with primary accent">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-secondary" header="Card with secondary accent">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-secondary" header="Card with secondary accent">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-success" header="Card with success accent">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-success" header="Card with success accent">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-info" header="Card with info accent">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-info" header="Card with info accent">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-warning" header="Card with warning accent">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-warning" header="Card with warning accent">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="card-accent-danger" header="Card with danger accent">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="card-accent-danger" header="Card with danger accent">
           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.
-        </b-card>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col sm="6" md="4">
-        <b-card class="bg-primary text-center">
+        </CCard>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol sm="6" md="4">
+        <CCard class="bg-primary text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="bg-success text-center">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="bg-success text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="bg-info text-center">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="bg-info text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="bg-warning text-center">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="bg-warning text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="bg-danger text-center">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="bg-danger text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card class="bg-secondary text-center">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard class="bg-secondary text-center">
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
             </footer>
           </blockquote>
-        </b-card>
-      </b-col>
-    </b-row><!--/.row-->
-    <b-row>
-      <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-primary">
+        </CCard>
+      </CCol>
+    </CRow><!--/.row-->
+    <CRow>
+      <CCol sm="6" md="4">
+        <CCard header="Card title" class="bg-primary">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-success">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card title" class="bg-success">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-info">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card title" class="bg-info">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-warning">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card title" class="bg-warning">
           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.
-        </b-card>
-      </b-col>
-      <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-danger">
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard header="Card title" class="bg-danger">
           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.
-        </b-card>
-      </b-col>
-    </b-row><!--/.row-->
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <transition name="fade">
+          <CCard class="bg-secondary" no-body v-if="show" >
+            <CCardHeader slot="header">
+              Card with header actions
+              <div class="card-header-actions">
+                <CLink href="#" class="card-header-action btn-setting" >
+                  <i class="icon-settings"></i>
+                </CLink>
+                <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
+                  <i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
+                </CLink>
+                <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
+                  <i class="icon-close"></i>
+                </CLink>
+              </div>
+            </CCardHeader>
+            <CCollapse slot="body" :show="isCollapsed" :duration="400">
+              <CCardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CCardBody>
+            </CCollapse>
+          </CCard>
+        </transition>
+      </CCol>
+    </CRow>
+    <!-- <CRow>
+      <CCol sm="6" md="4">
+        <CCard noWrapper>
+          <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
+          <CCardHeader header="Card title"/>
+          <CCardBody style="max-height:200px;overflow-y:auto">
+            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.
+            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.
+            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.
+            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.
+            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.
+            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.
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow> -->
   </div>
 </template>
 
 <script>
-import DefaultHeaderDropdownAccnt from'../../containers/DefaultHeaderDropdownAccnt'
 
 export default {
   name: 'cards',
-  components: {
-    DefaultHeaderDropdownAccnt
-  },
   data: function () {
     return {
       show: true,
-      showCollapse: true,
-      test: true,
-      test2: false,
-      form: 1,
-      smh: 'sdfsdf'
+      isCollapsed: true
     }
   }
 }
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 202c0dff..12489985 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,97 +1,46 @@
-<template>
+<template functional>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col md="12" lg="9" >
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
+      <CRow>
+        <CCol md="12" lg="9" >
+          <CCard>
+            <CCardHeader slot="header">
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Carousel</strong>
               <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                <a
+                  href="https://bootstrap-vue.js.org/docs/components/carousel"
+                  class="card-header-action"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
-            <div>
-              <b-carousel id="carousel1"
-                          style="text-shadow: 1px 1px 2px #333;"
-                          controls
-                          indicators
-                          background="#ababab"
-                          :interval="4000"
-                          img-width="1024"
-                          img-height="480"
-                          v-model="slide"
-                          @sliding-start="onSlideStart"
-                          @sliding-end="onSlideEnd"
-              >
-
-                <!-- Text slides with image -->
-                <b-carousel-slide caption="First slide"
-                                  text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-                                  img-src="https://lorempixel.com/1024/480/technics/2/"
-                ></b-carousel-slide>
-
-                <!-- Slides with custom text -->
-                <b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
-                  <h1>Hello world!</h1>
-                </b-carousel-slide>
-
-                <!-- Slides with image only -->
-                <b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
-                </b-carousel-slide>
-
-                <!-- Slides with img slot -->
-                <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
-                <b-carousel-slide>
-                  <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
-                       src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
-                </b-carousel-slide>
-
-                <!-- Slide with blank fluid image to maintain slide aspect ratio -->
-                <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-                    eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
-                    ut lacus vel interdum.
-                  </p>
-                </b-carousel-slide>
-
-              </b-carousel>
-
-              <p class="mt-4">
-                Slide #: {{ slide }}<br>
-                Sliding: {{ sliding }}
-              </p>
-
-            </div>
-          </b-card>
-        </b-col>
-      </b-row>
+            </CCardHeader>
+            <CCarousel>
+              <CCarouselItem
+                caption="First Slide"
+                imgSrc="https://lorempixel.com/1024/480/technics/2/"
+                text="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              />
+              <CCarouselItem
+                active
+                imgSrc="https://lorempixel.com/1024/480/technics/4/"
+              />
+              <CCarouselItem
+                imgSrc="https://lorempixel.com/1024/480/technics/8/"
+              />
+            </CCarousel>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'carousels',
-  data () {
-    return {
-      slide: 0,
-      sliding: null
-    }
-  },
-  methods: {
-    onSlideStart (slide) {
-      console.log('onSlideStart', slide)
-      this.sliding = true
-    },
-    onSlideEnd (slide) {
-      console.log('onSlideEnd', slide)
-      this.sliding = false
-    }
-  }
+  name: 'carousels'
 }
 </script>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 277d2959..7de09f2d 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,176 +1,163 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
-              <div class="card-header-actions">
+              <div class="Fcard-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
-              <b-collapse id="collapse1" class="mt-2">
-                <b-card>
+              <CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
+              <CCollapse id="collapse1" class="mt-2">
+                <CCard>
                   <p class="card-text">Collapse contents Here</p>
-                  <b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
-                  <b-collapse id=collapse1_inner class="mt-2">
-                    <b-card>Hello!</b-card>
-                  </b-collapse>
-                </b-card>
-              </b-collapse>
+                  <CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
+                  <CCollapse id=collapse1_inner class="mt-2">
+                    <CCard>Hello!</CCard>
+                  </CCollapse>
+                </CCard>
+              </CCollapse>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
-            </div>
+            </CCardHeader>
             <div>
               <!-- Using modifiers -->
-              <b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
+              <CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
 
               <!-- Using value -->
-              <b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
+              <CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
 
               <!-- element to collapse -->
-              <b-collapse id="collapse2">
-                <b-card>
+              <CCollapse id="collapse2">
+                <CCard>
                   I am collapsible content!
-                </b-card>
-              </b-collapse>
+                </CCard>
+              </CCollapse>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
-              <b-collapse visible id="collapse3">
-                <b-card>
+              <CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
+              <CCollapse visible id="collapse3">
+                <CCard>
                   I should start open!
-                </b-card>
-              </b-collapse>
+                </CCard>
+              </CCollapse>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-btn @click="showCollapse = !showCollapse"
+              <CButton @click="showCollapse = !showCollapse"
                      :class="showCollapse ? 'collapsed' : null"
                      aria-controls="collapse4"
                      :aria-expanded="showCollapse ? 'true' : 'false'">
                 Toggle Collapse
-              </b-btn>
-              <b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
-                <b-card>
+              </CButton>
+              <CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
+                <CCard>
                   I should start open!
-                </b-card>
-              </b-collapse>
+                </CCard>
+              </CCollapse>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
-            </div>
+            </CCardHeader>
             <div>
-              <!-- Single button triggers two b-collapse components -->
-              <b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
+              <!-- Single button triggers two CCollapse components -->
+              <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
 
               <!-- elements to collapse -->
-              <b-collapse id="collapseA" class="mt-2">
-                <b-card>
+              <CCollapse id="collapseA" class="mt-2">
+                <CCard>
                   I am collapsable content A!
-                </b-card>
-              </b-collapse>
-              <b-collapse id="collapseB" class="mt-2">
-                <b-card>
+                </CCard>
+              </CCollapse>
+              <CCollapse id="collapseB" class="mt-2">
+                <CCard>
                   I am collapsable content B!
-                </b-card>
-              </b-collapse>
+                </CCard>
+              </CCollapse>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
-            </div>
+            </CCardHeader>
             <div role="tablist">
-              <b-card no-body class="mb-1">
-                <b-card-header header-tag="header" class="p-1" role="tab">
-                  <b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
-                </b-card-header>
-                <b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
-                  <b-card-body>
+              <CCard noWrapper class="mb-1">
+                <CCardHeader slot="header"  class="p-1" role="tab">
+                  <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
+                </CCardHeader>
+                <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
+                  <CCardBody slot="body">
                     <p class="card-text">
                       I start opened because <code>visible</code> is <code>true</code>
                     </p>
                     <p class="card-text">
                       {{ text }}
                     </p>
-                  </b-card-body>
-                </b-collapse>
-              </b-card>
-              <b-card no-body class="mb-1">
-                <b-card-header header-tag="header" class="p-1" role="tab">
-                  <b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
-                </b-card-header>
-                <b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
-                  <b-card-body>
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
+              <CCard noWrapper class="mb-1">
+                <CCardHeader slot="header"  class="p-1" role="tab">
+                  <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
+                </CCardHeader>
+                <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
+                  <CCardBody slot="body">
                     <p class="card-text">
                       {{ text }}
                     </p>
-                  </b-card-body>
-                </b-collapse>
-              </b-card>
-              <b-card no-body class="mb-1">
-                <b-card-header header-tag="header" class="p-1" role="tab">
-                  <b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
-                </b-card-header>
-                <b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
-                  <b-card-body>
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
+              <CCard noWrapper class="mb-1">
+                <CCardHeader slot="header"  class="p-1" role="tab">
+                  <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
+                </CCardHeader>
+                <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
+                  <CCardBody slot="body">
                     <p class="card-text">
                       {{ text }}
                     </p>
-                  </b-card-body>
-                </b-collapse>
-              </b-card>
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
             </div>
-          </b-card>
-        </b-col>
-
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 95d44bbc..97ccf009 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -1,1035 +1,763 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col sm="6">
-        <b-card>
-          <div slot="header">
+    <CRow>
+      <CCol sm="6">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Credit Card </strong> <small>Form</small>
-          </div>
-          <b-row>
-            <b-col sm="12">
-              <b-form-group>
-                <label for="name">Name</label>
-                <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col sm="12">
-              <b-form-group>
-                <label for="ccnumber">Credit Card Number</label>
-                <b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col sm="4">
-              <b-form-group>
-                <label for="month1">Month</label>
-                <b-form-select id="month1"
-                  :plain="true"
-                  :options="[1,2,3,4,5,6,7,8,9,10,11,12]">
-                </b-form-select>
-              </b-form-group>
-            </b-col>
-            <b-col sm="4">
-              <b-form-group>
-                <label for="year1">Year</label>
-                <b-form-select id="year1"
-                  :plain="true"
-                  :options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]">
-                </b-form-select>
-              </b-form-group>
-            </b-col>
-            <b-col sm="4">
-              <b-form-group>
-                <label for="cvv">CVV/CVC</label>
-                <b-form-input type="text" id="cvv" placeholder="123"></b-form-input>
-              </b-form-group>
-            </b-col>
-          </b-row>
-        </b-card>
-      </b-col>
-      <b-col sm="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CRow>
+            <CCol sm="12">
+              <CFormInput
+                label="Name"
+                placeholder="Enter your name"
+              />
+            </CCol>
+          </CRow>
+          <CRow>
+            <CCol sm="12">
+              <CFormInput
+                label="Credit Card Number"
+                placeholder="0000 0000 0000 0000"
+              />
+            </CCol>
+          </CRow>
+          <CRow>
+            <CCol sm="4">
+              <CFormSelect
+                label="Month"
+                :options="[1,2,3,4,5,6,7,8,9,10,11,12]"
+              />
+            </CCol>
+            <CCol sm="4">
+              <CFormSelect
+                label="Year"
+                :options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
+              />
+            </CCol>
+            <CCol sm="4">
+              <CFormInput
+                label="CVV/CVC"
+                placeholder="123"
+              />
+            </CCol>
+          </CRow>
+        </CCard>
+      </CCol>
+      <CCol sm="6">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Company </strong><small>Form</small>
-          </div>
-          <b-form-group>
-            <label for="company">Company</label>
-            <b-form-input type="text" id="company" placeholder="Enter your company name"></b-form-input>
-          </b-form-group>
-          <b-form-group>
-            <label for="vat">VAT</label>
-            <b-form-input type="text" id="vat" placeholder="PL1234567890"></b-form-input>
-          </b-form-group>
-          <b-form-group>
-            <label for="street">Street</label>
-            <b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input>
-          </b-form-group>
-          <b-row>
-            <b-col sm="8">
-              <b-form-group>
-                <label for="city">City</label>
-                <b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input>
-              </b-form-group>
-            </b-col>
-            <b-col sm="4">
-              <b-form-group>
-                <label for="postal-code">Postal Code</label>
-                <b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-form-group>
-            <label for="country">Country</label>
-            <b-form-input type="text" id="country" placeholder="Country name"></b-form-input>
-          </b-form-group>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CFormInput
+            label="Company"
+            placeholder="Enter your company name"
+          />
+          <CFormInput
+            label="VAT"
+            placeholder="PL1234567890"
+          />
+          <CFormInput
+            label="Street"
+            placeholder="Enter street name"
+          />
+          <CRow>
+            <CCol sm="8">
+              <CFormInput
+                label="City"
+                placeholder="Enter your city"
+              />
+            </CCol>
+            <CCol sm="4">
+              <CFormInput
+                label="Postal code"
+                placeholder="Postal code"
+              />
+            </CCol>
+          </CRow>
+          <CFormInput
+            label="Country"
+            placeholder="Country name"
+          />
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Basic Form</strong> Elements
-          </div>
-          <b-form>
-          <b-form-group
-            description="Let us know your full name."
-            label="Enter your name"
-            label-for="basicName"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicName" type="text" autocomplete="name"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            label="Static"
-            label-for="basicStatic"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input plaintext id="basicStatic" type="text" value="Username"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            description="This is a help text"
-            label="Text Input"
-            label-for="basicText"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicText" type="text" placeholder="Text"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            label="Date" label-for="date"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input type="date" id="date"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            description="Please enter your email"
-            label="Email Input"
-            label-for="basicEmail"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicEmail" type="email" placeholder="Enter your email" autocomplete="email"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            description="Please enter a complex password"
-            label="Password Input"
-            label-for="basicPassword"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicPassword" type="password" placeholder="Enter your password" autocomplete="current-password"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            label="Disabled Input"
-            label-for="basicInputDisabled"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicInputDisabled" type="text" :disabled="true" placeholder="Disabled"></b-form-input>
-          </b-form-group>
-          <b-form-group
-            label="Textarea"
-            label-for="basicTextarea"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-input id="basicTextarea" :textarea="true" :rows="9" placeholder="Content.."></b-form-input>
-          </b-form-group>
-          <b-form-group
-            label="Select"
-            label-for="basicSelect"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-select id="basicSelect"
-              :plain="true"
-              :options="['Please select','Option 1', 'Option 2', 'Option 3']"
-              value="Please select">
-            </b-form-select>
-          </b-form-group>
-          <b-form-group
-            label="Select large"
-            label-for="basicSelectLg"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-select id="basicSelectLg"
+          </CCardHeader>
+          <CForm>
+            <CFormInput
+              description="Let us know your full name."
+              label="Enter your name"
+              horizontal
+              autocomplete="name"
+            />
+            <CFormInput
+              label="Static"
+              value="Username"
+              horizontal
+              plaintext
+            />
+            <CFormInput
+              label="Text input"
+              description="This is a help text"
+              placeholder="Text"
+              horizontal
+            />
+            <CFormInput
+              label="Date"
+              type="date"
+              horizontal
+            />
+            <CFormInput
+              label="Email input"
+              description="Please enter your email"
+              placeholder="Enter your email"
+              type="email"
+              horizontal
+              autocomplete="email"
+            />
+            <CFormInput
+              label="Password Input"
+              description="Please enter a complex password"
+              placeholder="Enter your password"
+              type="password"
+              horizontal
+              autocomplete="current-password"
+            />
+            <CFormInput
+              label="Disabled Input"
+              placeholder="Disabled"
+              horizontal
+              disabled
+            />
+            <CFormInput
+              label="Textarea"
+              placeholder="Content..."
+              horizontal
+              textarea="true"
+              rows="9"
+            />
+            <CFormSelect
+              label="Select"
+              horizontal
+              :options="options"
+              placeholder="Please select"
+            />
+            <CFormSelect
+              label="Select"
               size="lg"
-              :plain="true"
-              :options="['Please select','Option 1', 'Option 2', 'Option 3']"
-              value="Please select">
-            </b-form-select>
-          </b-form-group>
-          <b-form-group
-            label="Select small"
-            label-for="basicSelectSm"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-select id="basicSelectSm"
+              horizontal
+              :options="options"
+              placeholder="Please select"
+            />
+            <CFormSelect
+              label="Select"
               size="sm"
-              :plain="true"
-              :options="['Please select','Option 1', 'Option 2', 'Option 3']"
-              value="Please select">
-            </b-form-select>
-          </b-form-group>
-          <b-form-group
-            label="Disabled select"
-            label-for="basicSelectDisabled"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-select id="basicSelectDisabled"
-              :plain="true"
-              :options="['Please select','Option 1', 'Option 2', 'Option 3']"
-              :disabled="true"
-              value="Please select">
-            </b-form-select>
-          </b-form-group>
-          <b-form-group
-            label="Select"
-            label-for="basicMultiSelect"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-select id="basicMultiSelect"
-              :plain="true"
-              :multiple="true"
-              :options="[
-                {
-                  text: 'Please select some item',
-                  value: null
-                },
-                {
-                  text: 'This is First option',
-                  value: 'a'
-                }, {
-                  text: 'Default Selected Option',
-                  value: 'b'
-                }, {
-                  text: 'This is another option',
-                  value: 'c'
-                }, {
-                  text: 'This one is disabled',
-                  value: 'd',
-                  disabled: true
-                }]"
-              :value="[null,'c']">
-            </b-form-select>
-          </b-form-group>
-          <b-form-group
-            label="Radios"
-            label-for="basicRadios"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-radio-group id="basicRadios"
-              :plain="true"
-              :options="[
-                {text: 'Option 1 ',value: '1'},
-                {text: 'Option 2 ',value: '2'},
-                {text: 'Option 3 ',value: '3'}
-              ]"
-              checked="2"
-              stacked>
-            </b-form-radio-group>
-          </b-form-group>
-          <b-form-group
-            label="Inline radios"
-            label-for="basicInlineRadios"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-radio-group id="basicInlineRadios"
-              :plain="true"
-              :options="[
-                {text: 'Option 1 ',value: '1'},
-                {text: 'Option 2 ',value: '2'},
-                {text: 'Option 3 ',value: '3'}
-              ]"
-              :checked="3">
-            </b-form-radio-group>
-          </b-form-group>
-
-          <b-form-group
-            label="Checkboxes"
-            label-for="basicCheckboxes"
-            :label-cols="3"
-            horizontal>
-            <b-form-checkbox-group stacked id="basicCheckboxes" name="Checkboxes" :plain="true" :checked="[2,3]">
-              <b-form-checkbox value="1">Option 1</b-form-checkbox>
-              <b-form-checkbox value="2">Option 2</b-form-checkbox>
-              <b-form-checkbox value="3">Option 3</b-form-checkbox>
-            </b-form-checkbox-group>
-          </b-form-group>
-          <b-form-group
-            label="Inline checkboxes"
-            label-for="basicInlineCheckboxes"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-checkbox-group id="basicInlineCheckboxes" name="InlineCheckboxes" :plain="true" :checked="[1,3]">
-              <b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox>
-              <b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox>
-              <b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox>
-            </b-form-checkbox-group>
-          </b-form-group>
-          <!--custom controls - radios/checkboxes - temporary fix-->
-          <b-form-group
-            label="Radios - custom"
-            label-for="basicRadiosCustom"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-radio-group
-              id="basicRadiosCustom"
-              value="1"
-              stacked>
-              <div class="custom-control custom-radio">
-                <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" value="1">
-                <label class="custom-control-label" for="customRadio1">Option 1</label>
-              </div>
-              <div class="custom-control custom-radio">
-                <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" value="2" checked>
-                <label class="custom-control-label" for="customRadio2">Option 2</label>
-              </div>
-              <div class="custom-control custom-radio">
-                <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" value="3">
-                <label class="custom-control-label" for="customRadio3">Option 3</label>
+              horizontal
+              :options="options"
+              placeholder="Please select"
+            />
+            <CFormSelect
+              label="Select"
+              horizontal
+              :options="options"
+              placeholder="Please select"
+              disabled
+            />
+            <template v-for="(name, key) in checkboxNames">
+              <div class="form-row form-group" :key="name">
+                <CCol sm="3">
+                  {{name}}
+                </CCol>
+                <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
+                  <CFormCheckbox
+                    v-for="option in options"
+                    :key="option"
+                    :label="option"
+                    :type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
+                    :value="option"
+                    :custom="key > 3"
+                    :name="`Option 1${key}`"
+                    :checked="[0,1,4,5].includes(key) ?
+                      `Option 1` : Math.random() > 0.6"
+                    :class="key % 2 === 1 ? 'form-check-inline' : ''"
+                  />
+                </CCol>
               </div>
-            </b-form-radio-group>
-          </b-form-group>
-          <b-form-group
-            label="Inline radios - custom"
-            label-for="basicCustomRadios1"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-radio-group
-              id="basicCustomRadios1"
-              name="customRadioInline1">
-              <div class="custom-control custom-radio custom-control-inline">
-                <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" value="1">
-                <label class="custom-control-label" for="customRadioInline1">Option 1</label>
-              </div>
-              <div class="custom-control custom-radio custom-control-inline">
-                <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input" value="2" checked>
-                <label class="custom-control-label" for="customRadioInline2">Option 2</label>
-              </div>
-              <div class="custom-control custom-radio custom-control-inline">
-                <input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input" value="3">
-                <label class="custom-control-label" for="customRadioInline3">Option 3</label>
-              </div>
-            </b-form-radio-group>
-          </b-form-group>
-          <b-form-group
-            label="Checkboxes - custom"
-            label-for="basicCustomCheckboxes"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-checkbox-group stacked id="basicCustomCheckboxes">
-              <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" id="customChk1" value="1" checked>
-                <label class="custom-control-label" for="customChk1">Option 1</label>
-              </div>
-              <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" id="customChk2" value="2">
-                <label class="custom-control-label" for="customChk2">Option 2</label>
-              </div>
-              <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" id="customChk3" value="3">
-                <label class="custom-control-label" for="customChk3">Option 3</label>
-              </div>
-            </b-form-checkbox-group>
-          </b-form-group>
-          <b-form-group
-            label="Inline checkboxes - custom"
-            label-for="basicInlineCustomCheckboxes"
-            :label-cols="3"
-            :horizontal="true">
-            <b-form-checkbox-group id="basicInlineCustomCheckboxes">
-              <div class="custom-control custom-checkbox custom-control-inline">
-                <input type="checkbox" class="custom-control-input" id="customInChk1" value="1">
-                <label class="custom-control-label" for="customInChk1">Option 1</label>
-              </div>
-              <div class="custom-control custom-checkbox custom-control-inline">
-                <input type="checkbox" class="custom-control-input" id="customInChk2" value="2" checked>
-                <label class="custom-control-label" for="customInChk2">Option 2</label>
-              </div>
-              <div class="custom-control custom-checkbox custom-control-inline">
-                <input type="checkbox" class="custom-control-input" id="customInChk3" value="3">
-                <label class="custom-control-label" for="customInChk3">Option 3</label>
-              </div>
-            </b-form-checkbox-group>
-          </b-form-group>
-          <b-form-group
-            label="File input"
-            label-for="fileInput"
-            :label-cols="3"
-            :horizontal="true">
-              <b-form-file id="fileInput" :plain="true"></b-form-file>
-          </b-form-group>
-          <b-form-group
-            label="Multiple file input"
-            label-for="fileInputMulti"
-            :label-cols="3"
-            :horizontal="true">
-              <b-form-file id="fileInputMulti" :plain="true" :multiple="true"></b-form-file>
-          </b-form-group>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-          </b-form>
-        </b-card>
-        <b-card>
-          <div slot="header">
+            </template>
+            <CFormFile
+              label="File input"
+              horizontal
+            />
+            <CFormFile
+              label="Multiple file input"
+              horizontal
+              multiple
+            />
+          </CForm>
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Inline</strong> Form
-          </div>
+          </CCardHeader>
+
           <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
-          <b-form inline>
-            <label class="mr-sm-2" for="inlineInput1">Name: </label>
-            <b-input id="inlineInput1" type="text" placeholder="Jane Doe"></b-input>
-            <label class="mx-sm-2" for="inlineInput2">Email: </label>
-            <b-input id="inlineInput2" type="email" placeholder="jane.doe@example.com" autocomplete="email"></b-input>
-          </b-form>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col md="6">
-        <b-card>
-          <div slot="header">
+          <CForm inline>
+            <CFormInput
+              class="mr-2"
+              label="<small>Name:&nbsp;</small>"
+              placeholder="Jane Doe"
+            />
+            <CFormInput
+              label="<small>Email:&nbsp;</small>"
+              placeholder="jane.doe@example.com"
+              autocomplete="email"
+            />
+          </CForm>
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Horizontal</strong> Form
-          </div>
-          <b-form>
-            <b-form-group
-              label="Email"
-              label-for="horizEmail"
+          </CCardHeader>
+          <CForm>
+            <CFormInput
+              type="email"
               description="Please enter your email."
-              :label-cols="3"
-              :horizontal="true">
-              <b-form-input id="horizEmail" type="email" placeholder="Enter Email.." autocomplete="username email"></b-form-input>
-            </b-form-group>
-            <b-form-group
-              label="Password"
-              label-for="horizPass"
+              autocomplete="email"
+              label="Email"
+              horizontal
+              placeholder="Enter Email..."
+            />
+            <CFormInput
+              type="password"
               description="Please enter your password."
-              :label-cols="3"
-              :horizontal="true">
-              <b-form-input id="horizPass" type="password" placeholder="Enter Password.." autocomplete="current-password"></b-form-input>
-            </b-form-group>
-            <div slot="footer">
-              <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-              <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-            </div>
-          </b-form>
-        </b-card>
-        <b-card>
-          <div slot="header">
+              autocomplete="current-password"
+              label="Password"
+              horizontal
+              placeholder="Enter Password..."
+            />
+            <CCardFooter slot="footer">
+              <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+              <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            </CCardFooter>
+          </CForm>
+        </CCard>
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Normal</strong> Form
-          </div>
-          <b-form novalidate>
-            <b-form-group validated
+          </CCardHeader>
+          <CForm novalidate>
+            <CFormInput
+              type="email"
+              description="Please enter your email."
+              autocomplete="email"
               label="Email"
-              label-for="normalEmail"
-              description="Please enter your email.">
-              <b-form-input id="normalEmail" type="email" placeholder="Enter Email.." required autocomplete="email"></b-form-input>
-            </b-form-group>
-            <b-form-group validated
+              placeholder="Enter Email..."
+              required
+              was-validated
+            />
+            <CFormInput
+              type="password"
+              description="Please enter your password."
+              autocomplete="current-password"
               label="Password"
-              label-for="normalPass"
-              description="Please enter your password.">
-              <b-form-input id="normalPass" type="password" placeholder="Enter Password.." required autocomplete="current-password"></b-form-input>
-            </b-form-group>
-            <div slot="footer">
-              <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-              <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-            </div>
-          </b-form>
-        </b-card>
-        <b-card no-body :no-block="true">
-          <div slot="header">
+              placeholder="Enter Password..."
+              required
+              was-validated
+            />
+            <CCardFooter slot="footer">
+              <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+              <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            </CCardFooter>
+          </CForm>
+        </CCard>
+        <CCard :no-block="true">
+          <CCardHeader slot="header">
             Input <strong>Grid</strong>
-          </div>
-          <b-card-body>
-            <b-row class="form-group">
-              <b-col sm="3">
-                <b-form-input type="text" placeholder=".col-sm-3"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="4">
-                <b-form-input type="text" placeholder=".col-sm-4"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="5">
-                <b-form-input type="text" placeholder=".col-sm-5"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="6">
-                <b-form-input type="text" placeholder=".col-sm-6"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="7">
-                <b-form-input type="text" placeholder=".col-sm-7"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="8">
-                <b-form-input type="text" placeholder=".col-sm-8"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="9">
-                <b-form-input type="text" placeholder=".col-sm-9"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="10">
-                <b-form-input type="text" placeholder=".col-sm-10"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="11">
-                <b-form-input type="text" placeholder=".col-sm-11"></b-form-input>
-              </b-col>
-            </b-row>
-            <b-row class="form-group">
-              <b-col sm="12">
-                <b-form-input type="text" placeholder=".col-sm-12"></b-form-input>
-              </b-col>
-            </b-row>
-          </b-card-body>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CRow class="form-group">
+            <CCol sm="3">
+              <CFormInput class="mb-0" placeholder=".col-sm-3"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="4">
+              <CFormInput class="mb-0" placeholder=".col-sm-4"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="5">
+              <CFormInput class="mb-0" placeholder=".col-sm-5"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="6">
+              <CFormInput class="mb-0" placeholder=".col-sm-6"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="7">
+              <CFormInput class="mb-0" placeholder=".col-sm-7"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="8">
+              <CFormInput class="mb-0" placeholder=".col-sm-8"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="9">
+              <CFormInput class="mb-0" placeholder=".col-sm-9"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="10">
+              <CFormInput class="mb-0" placeholder=".col-sm-10"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="11">
+              <CFormInput class="mb-0" placeholder=".col-sm-11"/>
+            </CCol>
+          </CRow>
+          <CRow class="form-group">
+            <CCol sm="12">
+              <CFormInput class="mb-0" placeholder=".col-sm-12"/>
+            </CCol>
+          </CRow>
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+        <CCard>
+          <CCardHeader slot="header">
             Input <strong>Sizes</strong>
-          </div>
-          <b-form-group
+          </CCardHeader>
+          <CFormInput
             label="Small input"
-            label-for="smInput"
-            label-size="sm"
-            :label-cols="5"
-            :horizontal="true">
-            <b-form-input id="smInput" type="text" size="sm" placeholder="size='sm'"></b-form-input>
-          </b-form-group>
-          <b-form-group
+            size="sm"
+            horizontal
+            placeholder="size='sm'"
+          />
+          <CFormInput
             label="Default input"
-            label-for="defaultInput"
-            :label-cols="5"
-            :horizontal="true">
-            <b-form-input  id="defaultInput" type="text" placeholder="normal"></b-form-input>
-          </b-form-group>
-          <b-form-group
+            horizontal
+            placeholder="normal"
+          />
+          <CFormInput
             label="Large input"
-            label-for="lgInput"
-            label-size="lg"
-            :label-cols="5"
-            :horizontal="true">
-            <b-form-input id="lgInput" type="text" size="lg" placeholder="size='lg'"></b-form-input>
-          </b-form-group>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="12" md="6">
-        <b-card no-body :no-block="true">
-          <div slot="header">
-            <strong>Validation feedback</strong> Form
-          </div>
-          <b-card-body>
-            <b-form>
-              <b-form-group validated>
-                <label class="col-form-label" for="inputIsValid">Input is valid</label>
-                <input type="text" class="form-control is-valid" id="inputIsValid">
-                <b-form-valid-feedback>
-                  Input is valid.
-                </b-form-valid-feedback>
-              </b-form-group>
-              <b-form-group>
-                <label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
-                <input type="text" class="form-control is-invalid" id="inputIsInvalid">
-                <b-form-invalid-feedback>
-                  Please provide a valid information.
-                </b-form-invalid-feedback>
-              </b-form-group>
-            </b-form>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col sm="12" md="6">
-        <b-card no-body :no-block="true">
-          <div slot="header">
-            <strong>Validation feedback</strong> Form
-          </div>
-          <b-card-body>
-            <b-form validated novalidate>
-              <b-form-group label-for="inputSuccess2" label="Non-required input">
-                <b-form-input type="text" class="form-control-success" id="inputSuccess2"></b-form-input>
-                <b-form-valid-feedback>
-                  Input is not required.
-                </b-form-valid-feedback>
-              </b-form-group>
-              <b-form-group label-for="inputError2" label="Required input">
-                <b-form-input type="text" class="form-control-warning" id="inputError2" required></b-form-input>
-                <b-form-valid-feedback>
-                  Input provided.
-                </b-form-valid-feedback>
-                <b-form-invalid-feedback>
-                  Please provide a required input.
-                </b-form-invalid-feedback>
-              </b-form-group>
-            </b-form>
-          </b-card-body>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
+            size="lg"
+            horizontal
+            placeholder="size='lg'"
+          />
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+
+      <CCol sm="12" md="6">
+        <CCard noWrapper :no-block="true">
+          <CCardHeader slot="header">
+            <strong>Basic Validation</strong> Form
+          </CCardHeader>
+          <CCardBody slot="body">
+            <CForm validated novalidate>
+              <CFormInput
+                label="Input is valid"
+                valid-feedback="Input is not required."
+              />
+              <CFormInput
+                label="Input is invalid"
+                required
+                valid-feedback="Thank you :)"
+                invalid-feedback="Please provide a required input."
+              />
+            </CForm>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="12" md="6">
+        <CCard header="<strong>Custom Validation</strong> Form">
+          <CForm>
+            <CFormInput
+              label="Input is valid"
+              valid-feedback="Input is valid."
+              invalid-feedback="Please provide at least 4 characters."
+              value="Valid value"
+              :isValid="validator"
+            />
+            <CFormInput
+              label="Input is invalid"
+              valid-feedback="Thank you :)"
+              invalid-feedback="Please provide at least 4 characters."
+              :isValid="validator"
+            />
+          </CForm>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Icon/Text</strong> Groups
-          </div>
-          <b-form-group>
-            <b-input-group>
-              <b-input-group-prepend>
-                <b-input-group-text><i class="fa fa-user"></i></b-input-group-text>
-              </b-input-group-prepend>
-              <b-form-input type="text" placeholder="Username"></b-form-input>
-            </b-input-group>
-          </b-form-group>
-          <b-form-group>
-            <b-input-group>
-              <b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
-              <b-input-group-append><b-input-group-text><i class="fa fa-envelope-o"></i></b-input-group-text></b-input-group-append>
-            </b-input-group>
-          </b-form-group>
-          <b-form-group>
-            <b-input-group>
-              <b-input-group-prepend>
-                <b-input-group-text><i class="fa fa-euro"></i></b-input-group-text>
-              </b-input-group-prepend>
-              <b-form-input type="text" placeholder="ex. $1.000.000"></b-form-input>
-              <b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
-            </b-input-group>
-          </b-form-group>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
-            <strong>Buttons</strong> Groups
-          </div>
-          <b-form-group>
-            <b-input-group>
-              <!-- Attach Left button -->
-              <b-input-group-prepend>
-                <b-button variant="primary">
-                  <i class="fa fa-search"></i> Search
-                </b-button>
-              </b-input-group-prepend>
-              <b-form-input type="text" placeholder="Username"></b-form-input>
-            </b-input-group>
-          </b-form-group>
-          <b-form-group>
-            <b-input-group>
-              <b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
-              <!-- Attach Right button -->
-              <b-input-group-append>
-                <b-button variant="primary">Submit</b-button>
-              </b-input-group-append>
-            </b-input-group>
-          </b-form-group>
-          <b-form-group>
-            <b-input-group>
-              <!-- Attach Left button -->
-              <b-input-group-prepend>
-                <b-button variant="primary"><i class="fa fa-facebook"></i></b-button>
-              </b-input-group-prepend>
-              <b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
-              <!-- Attach Left button -->
-              <b-input-group-append>
-                <b-button variant="primary"><i class="fa fa-twitter"></i></b-button>
-              </b-input-group-append>
-            </b-input-group>
-          </b-form-group>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
-            <strong>Dropdowns</strong> Groups
-          </div>
-          <b-form-group>
-              <b-input-group>
-                <!-- Attach Left button -->
-                <b-input-group-prepend>
-                  <b-dropdown text="Action" variant="primary">
-                    <b-dropdown-item>Action</b-dropdown-item>
-                    <b-dropdown-item>Another action</b-dropdown-item>
-                    <b-dropdown-item>Something else here...</b-dropdown-item>
-                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-                  </b-dropdown>
-                </b-input-group-prepend>
-                <b-form-input placeholder="Username"></b-form-input>
-              </b-input-group>
-          </b-form-group>
-          <b-form-group>
-              <b-input-group>
-                <b-form-input placeholder="Email"></b-form-input>
-                <!-- Attach Right button -->
-                <b-input-group-append>
-                  <b-dropdown text="Action" variant="primary" right>
-                    <b-dropdown-item>Action</b-dropdown-item>
-                    <b-dropdown-item>Another action</b-dropdown-item>
-                    <b-dropdown-item>Something else here...</b-dropdown-item>
-                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-                  </b-dropdown>
-                </b-input-group-append>
-              </b-input-group>
-          </b-form-group>
-          <b-form-group>
-              <b-input-group>
-                <!-- Attach Left button -->
-                <b-input-group-prepend>
-                  <b-dropdown text="Split" variant="primary" split>
-                    <b-dropdown-item href="#">Action</b-dropdown-item>
-                    <b-dropdown-item href="#">Another action</b-dropdown-item>
-                    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
-                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-                  </b-dropdown>
-                </b-input-group-prepend>
-                <b-form-input placeholder="..."></b-form-input>
-                <!-- Attach Right button -->
-                <b-input-group-append>
-                  <b-dropdown text="Action" variant="primary" right>
-                    <b-dropdown-item>Action</b-dropdown-item>
-                    <b-dropdown-item>Another action</b-dropdown-item>
-                    <b-dropdown-item>Something else here...</b-dropdown-item>
-                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-                  </b-dropdown>
-                </b-input-group-append>
-              </b-input-group>
-          </b-form-group>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
-            <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
-          </div>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CFormInput
+            placeholder="Username"
+            prepend="<i class='fa fa-user'></i>"
+          />
+          <CFormInput
+            type="email"
+            placeholder="Email"
+            autocomplete="email"
+            append="<i class='fa fa-envelope-o'></i>"
+          />
+          <CFormInput
+            prepend="<i class='fa fa-euro'></i>"
+            placeholder="ex. $1.000.000"
+            append=".00"
+          />
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol sm="4" >
+        <CCard header="<strong>Buttons</strong> Groups">
+          <CFormInput placeholder="Username">
+            <template #prepend>
+              <CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
+            </template>
+          </CFormInput>
+          <CFormInput
+            type="email"
+            placeholder="Email"
+            autocomplete="email"
+          >
+            <template #append>
+              <CButton type="submit" variant="primary">Submit</CButton>
+            </template>
+          </CFormInput>
+          <CFormInput
+            type="email"
+            placeholder="Email"
+            autocomplete="email"
+          >
+            <template #prepend>
+              <CButton variant="primary"><i class="fa fa-facebook"></i></CButton>
+            </template>
+            <template #append>
+              <CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
+            </template>
+          </CFormInput>
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard header="<strong>Dropdowns</strong> Groups">
+          <CFormInput placeholder="Username">
+            <template #prepend>
+              <CDropdown
+                button-content="Action"
+                variant="primary"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdown>
+            </template>
+          </CFormInput>
+          <CFormInput
+            type="email"
+            placeholder="Email"
+            autocomplete="email"
+          >
+            <template #append>
+              <CDropdown
+                button-content="Action"
+                variant="primary"
+                right
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdown>
+            </template>
+          </CFormInput>
+          <CFormInput placeholder="...">
+
+            <template #prepend>
+              <CDropdown
+                button-content="Split"
+                variant="primary"
+                split
+              >
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdown>
+            </template>
+
+            <template #append>
+              <CDropdown
+                button-content="Action"
+                variant="primary"
+                right
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdown>
+            </template>
+
+          </CFormInput>
+
+
+          <CCardFooter slot="footer">
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
-          </div>
-          <b-row class="form-group">
-            <b-col md="8">
-              <b-form-input type="text" placeholder=".col-md-8"></b-form-input>
-            </b-col>
-            <b-col md="4">
-              <b-form-input type="text" placeholder=".col-md-4"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col md="7">
-              <b-form-input type="text" placeholder=".col-md-7"></b-form-input>
-            </b-col>
-            <b-col md="5">
-              <b-form-input type="text" placeholder=".col-md-5"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col md="6">
-              <b-form-input type="text" placeholder=".col-md-6"></b-form-input>
-            </b-col>
-            <b-col md="6">
-              <b-form-input type="text" placeholder=".col-md-6"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col md="5">
-              <b-form-input type="text" placeholder=".col-md-5"></b-form-input>
-            </b-col>
-            <b-col md="7">
-              <b-form-input type="text" placeholder=".col-md-7"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col md="4">
-              <b-form-input type="text" placeholder=".col-md-4"></b-form-input>
-            </b-col>
-            <b-col md="8">
-              <b-form-input type="text" placeholder=".col-md-8"></b-form-input>
-            </b-col>
-          </b-row>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary">Action</b-button>
-            <b-button type="button" size="sm" variant="danger">Action</b-button>
-            <b-button type="button" class="btn btn-sm btn-warning">Action</b-button>
-            <b-button type="button" class="btn btn-sm btn-info">Action</b-button>
-            <b-button type="button" size="sm" variant="success">Action</b-button>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CRow
+            class="form-group"
+            v-for="(number, key) in [4,5,6,7,8]"
+            :key="key"
+          >
+            <CCol :cols="12 - number">
+              <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
+            </CCol>
+            <CCol :cols="number">
+              <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
+            </CCol>
+          </CRow>
+          <CCardFooter slot="footer">
+            <CButton size="sm" variant="primary">Action</CButton>
+            <CButton size="sm" variant="danger">Action</CButton>
+            <CButton size="sm" variant="warning">Action</CButton>
+            <CButton size="sm" variant="info">Action</CButton>
+            <CButton size="sm" variant="success">Action</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Input Grid for small devices! <small> <code>.col-*</code></small>
-          </div>
-          <b-row class="form-group">
-            <b-col cols="4">
-              <b-form-input type="text" placeholder=".col-4"></b-form-input>
-            </b-col>
-            <b-col cols="8">
-              <b-form-input type="text" placeholder=".col-8"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col cols="5">
-              <b-form-input type="text" placeholder=".col-5"></b-form-input>
-            </b-col>
-            <b-col cols="7">
-              <b-form-input type="text" placeholder=".col-7"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col cols="6">
-              <b-form-input type="text" placeholder=".col-6"></b-form-input>
-            </b-col>
-            <b-col cols="6">
-              <b-form-input type="text" placeholder=".col-6"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col cols="7">
-              <b-form-input type="text" placeholder=".col-5"></b-form-input>
-            </b-col>
-            <b-col cols="5">
-              <b-form-input type="text" placeholder=".col-5"></b-form-input>
-            </b-col>
-          </b-row>
-          <b-row class="form-group">
-            <b-col cols="8">
-              <b-form-input type="text" placeholder=".col-8"></b-form-input>
-            </b-col>
-            <b-col cols="4">
-              <b-form-input type="text" placeholder=".col-4"></b-form-input>
-            </b-col>
-          </b-row>
-          <div slot="footer">
-            <b-button type="submit" size="sm" variant="primary">Action</b-button>
-            <b-button type="button" size="sm" variant="danger">Action</b-button>
-            <b-button type="button" class="btn btn-sm btn-warning">Action</b-button>
-            <b-button type="button" class="btn btn-sm btn-info">Action</b-button>
-            <b-button type="button" size="sm" variant="success">Action</b-button>
-          </div>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CRow
+            class="form-group"
+            v-for="(number, key) in [4,5,6,7,8]"
+            :key="key"
+          >
+            <CCol :cols="number">
+              <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
+            </CCol>
+            <CCol :cols="12 - number">
+              <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
+            </CCol>
+          </CRow>
+          <CCardFooter slot="footer">
+            <CButton size="sm" variant="primary">Action</CButton>
+            <CButton size="sm" variant="danger">Action</CButton>
+            <CButton size="sm" variant="warning">Action</CButton>
+            <CButton size="sm" variant="info">Action</CButton>
+            <CButton size="sm" variant="success">Action</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader slot="header">
             Example Form
-          </div>
-          <b-form>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend><b-input-group-text>Username</b-input-group-text></b-input-group-prepend>
-                <b-form-input type="text"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend><b-input-group-text>Email</b-input-group-text></b-input-group-prepend>
-                <b-form-input type="email" autocomplete="email"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend><b-input-group-text>Password</b-input-group-text></b-input-group-prepend>
-                <b-form-input type="password" autocomplete="current-password"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
+          </CCardHeader>
+          <CForm>
+            <CFormInput
+              prepend="Username"
+              append="<i class='fa fa-user'></i>"
+            />
+            <CFormInput
+              prepend="Email"
+              type="email"
+              autocomplete="email"
+              append="<i class='fa fa-envelope'></i>"
+            />
+            <CFormInput
+              prepend="Password"
+              type="password"
+              autocomplete="current-password"
+              append="<i class='fa fa-asterisk'></i>"
+            />
             <div class="form-group form-actions">
-              <b-button type="submit" size="sm" variant="primary">Submit</b-button>
+              <CButton type="submit" size="sm" variant="primary">Submit</CButton>
             </div>
-          </b-form>
-        </b-card>
-      </b-col>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
+          </CForm>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader slot="header">
             Example Form
-          </div>
-          <b-form>
-            <b-form-group>
-              <b-input-group>
-                <b-form-input type="text" placeholder="Username"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-form-input type="password" placeholder="Password" autocomplete="current-password"></b-form-input>
-                <b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
-              </b-input-group>
-            </b-form-group>
+          </CCardHeader>
+          <CForm>
+            <CFormInput
+              placeholder="Username"
+              append="<i class='fa fa-user'></i>"
+            />
+            <CFormInput
+              placeholder="Email"
+              type="email"
+              autocomplete="email"
+              append="<i class='fa fa-envelope'></i>"
+            />
+            <CFormInput
+              placeholder="Password"
+              type="password"
+              autocomplete="current-password"
+              append="<i class='fa fa-asterisk'></i>"
+            />
             <div class="form-group form-actions">
-              <b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
+              <CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
             </div>
-          </b-form>
-        </b-card>
-      </b-col>
-      <b-col sm="4">
-        <b-card>
-          <div slot="header">
+          </CForm>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader slot="header">
             Example Form
-          </div>
-          <b-form>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-input-group-text><i class="fa fa-user"></i></b-input-group-text>
-                </b-input-group-prepend>
-                <b-form-input type="text" placeholder="Username"></b-form-input>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text>
-                </b-input-group-prepend>
-                <b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
-              </b-input-group>
-            </b-form-group>
-            <b-form-group>
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text>
-                </b-input-group-prepend>
-                <b-form-input type="password" placeholder="Password" autocomplete="current-password"></b-form-input>
-              </b-input-group>
-            </b-form-group>
+          </CCardHeader>
+          <CForm>
+            <CFormInput
+              placeholder="Username"
+              prepend="<i class='fa fa-user'></i>"
+            />
+            <CFormInput
+              placeholder="Email"
+              type="email"
+              autocomplete="email"
+              prepend="<i class='fa fa-envelope'></i>"
+            />
+            <CFormInput
+              placeholder="Password"
+              type="password"
+              autocomplete="current-password"
+              prepend="<i class='fa fa-asterisk'></i>"
+            />
             <div class="form-group form-actions">
-              <b-button type="submit" size="sm" variant="success">Submit</b-button>
+              <CButton type="submit" size="sm" variant="success">Submit</CButton>
             </div>
-          </b-form>
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col lg="12">
+          </CForm>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol lg="12">
         <transition name="fade">
-          <b-card no-body v-if="show">
-            <div slot="header">
+          <CCard
+            v-if="show"
+            no-wrapper
+          >
+            <CCardHeader slot="header">
               <i class="fa fa-edit"></i> Form Elements
               <div class="card-header-actions">
-                <b-link href="#" class="card-header-action btn-setting">
+                <CLink href="#" class="card-header-action btn-setting">
                   <i class="icon-settings"></i>
-                </b-link>
-                <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
-                  <i class="icon-arrow-up"></i>
-                </b-link>
-                <b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
+                </CLink>
+                <CLink
+                  class="card-header-action btn-minimize"
+                  @click="formElements=!formElements"
+                >
+                  <i :class="`icon-arrow-${formElements ? 'down' : 'up'}`"></i>
+                </CLink>
+                <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
                   <i class="icon-close"></i>
-                </b-link>
+                </CLink>
               </div>
-            </div>
-            <b-collapse id="collapse1" visible>
-              <b-card-body>
-                <b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
-                  <b-input-group>
-                    <b-input-group-prepend>
-                      <b-input-group-text>@</b-input-group-text>
-                    </b-input-group-prepend>
-                    <b-form-input id="elementsEmail" type="email" autocomplete="email"></b-form-input>
-                  </b-input-group>
-                </b-form-group>
-                <b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
-                  <b-input-group>
-                    <b-form-input id="elementsAppend" type="text"></b-form-input>
-                    <b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
-                  </b-input-group>
-                </b-form-group>
-                <b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
-                  <b-input-group>
-                    <b-input-group-prepend>
-                      <b-input-group-text>$</b-input-group-text>
-                    </b-input-group-prepend>
-                    <b-form-input id="elementsPrependAppend" type="text"></b-form-input>
-                    <b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
-                  </b-input-group>
-                </b-form-group>
-                <b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
-                  <b-input-group>
-                    <b-form-input id="elementsAppendButton" type="text"></b-form-input>
-                    <b-input-group-append>
-                      <b-button variant="primary">Go!</b-button>
-                    </b-input-group-append>
-                  </b-input-group>
-                </b-form-group>
-                <b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
-                  <b-input-group>
-                    <b-form-input id="elementsTwoButtons" type="text"></b-form-input>
-                    <b-input-group-append>
-                      <b-button variant="primary">Search</b-button>
-                      <b-button variant="danger">Options</b-button>
-                    </b-input-group-append>
-                  </b-input-group>
-                </b-form-group>
+            </CCardHeader>
+            <CCollapse
+              slot="body"
+              :show="formElements"
+            >
+              <CCardBody>
+                <CFormInput
+                  label="Prepended text"
+                  prepend="@"
+                  description="Here's some help text"
+                  type="email"
+                  autocomplete="email"
+                />
+                <CFormInput
+                  label="Appended text"
+                  append=".00"
+                  description="Here's some help text"
+                />
+                <CFormInput
+                  label="Appended text"
+                  prepend="$"
+                  append=".00"
+                  description="Here's some help text"
+                />
+                <CFormInput
+                  label="Append with button"
+                  description="Here's some help text"
+                >
+                  <template v-slot:append>
+                    <CButton variant="primary">Go!</CButton>
+                  </template>
+                </CFormInput>
+                <CFormInput label="Two-buttons append">
+                  <template v-slot:append>
+                    <CButton variant="primary">Search</CButton>
+                    <CButton variant="danger">Options</CButton>
+                  </template>
+                </CFormInput>
                 <div class="form-actions">
-                  <b-button type="submit" variant="primary">Save changes</b-button>
-                  <b-button type="button" variant="secondary"   @click="testt">Cancel</b-button>
+                  <CButton type="submit" variant="primary">Save changes</CButton>
+                  <CButton variant="secondary">Cancel</CButton>
                 </div>
-              </b-card-body>
-            </b-collapse>
-          </b-card>
+              </CCardBody>
+            </CCollapse>
+          </CCard>
         </transition>
-        <b-card>
-        <CForm :id="id">
+        <CCard>
+        <!-- <CForm :id="id">
           <input type="text" :value="cInput"/>
           <CFormInput type="email"
                       label="CFormInput"
@@ -1077,7 +805,7 @@
                          :cols="12"
                          v-model="cInput"
           >
-            <b-button slot="prepend" class="btn btn-success">asd</b-button>
+            <CButton slot="prepend" class="btn btn-success">asd</CButton>
           </CFormTextarea>
           <br>
           <CFormSelect label="Input label"
@@ -1103,7 +831,7 @@
                       addWrapperClasses="hehe22"
                       v-model="selected"
           >
-            <b-button slot="prepends" class="btn btn-success">dssdf</b-button>
+            <CButton slot="prepends" class="btn btn-success">dssdf</CButton>
           </CFormSelect>
           {{String(selected)}}
           <CFormFile label="Input label"
@@ -1171,33 +899,23 @@
         <CSpinner grow/>
         <CSpinner small />
         <CSpinner small grow/>
-        <CSpinner grow tag="span"/>
+        <CSpinner grow tag="span"/> -->
 
-        </b-card>
-      </b-col>
-    </b-row>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
 <script>
-// import CForm from './CForm'
-// import CFormInput from './CFormInput'
-// import CFormFile from './CFormFile'
-// import CFormSelect from './CFormSelect'
-// import CFormCheckbox from './CFormCheckbox'
-// import CFormTextarea from './CFormTextarea'
-// import CSpinner from './CSpinner'
-
 export default {
   name: 'forms',
-  // components: { CForm, CFormInput, CFormFile, CFormSelect,
-  //    CFormCheckbox, CFormTextarea, CSpinner},
   data () {
     return {
       selected: [], // Must be an array reference!
       show: true,
       id: 'sdfjosdf22',
-      cInput: false,
+      cInput: '',
       smh: 'shnsad',
       trueValue:'someTrueValue',
       falseValue:'someFalseValue',
@@ -1205,6 +923,13 @@ export default {
       selected: 'first',
       isValid: '',
       testkkk: 2,
+      horizontal: { label:'col-3', input:'col-9' },
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      formElements: true,
+      checkboxNames: ['Radios', 'Inline Radios',
+                      'Checkboxes', 'Inline Checkboxes',
+                      'Radios - custom', 'Inline Radios - custom',
+                      'Checkboxes - custom', 'Inline Checkboxes - custom']
     }
   },
   updated () {
@@ -1217,7 +942,7 @@ export default {
       this.cInput += 100
     },
     validator (val) {
-      return val ? val.length > 4 : null
+      return val ? val.length >= 4 : false
     }
   }
 }
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index ed7d495d..e9318691 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -1,38 +1,33 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col>
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <c-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
+              <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
                 <p>For more information visit website</p>
-                <b-btn variant="primary" href="#">More Info</b-btn>
-              </c-jumbotron>
+                <CButton variant="primary" href="#">More Info</CButton>
+              </CJumbotron>
             </div>
-          </b-card>
-        </b-col>
-        <b-col>
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol>
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>with slots</small>
-            </div>
+            </CCardHeader>
             <div>
-              <c-jumbotron header="Bootstrap 4" lead="">
-
+              <CJumbotron header="Bootstrap 4" lead="">
                 <p slot="lead" class="lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
@@ -42,24 +37,22 @@
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
                 </p>
-                <b-btn variant="primary" href="#">Do Something</b-btn>
-                <b-btn variant="success" href="#">Do Something Else</b-btn>
-              </c-jumbotron>
+                <CButton variant="primary" href="#">Do Something</CButton>
+                <CButton variant="success" href="#">Do Something Else</CButton>
+              </CJumbotron>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>variants</small>
-            </div>
+            </CCardHeader>
             <div>
-              <c-jumbotron variant="info"
+              <CJumbotron variant="info"
                            text-variant="white"
                            border-variant="dark"
                            header="Bootstrap 4">
@@ -73,11 +66,11 @@
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
                 </p>
-              </c-jumbotron>
+              </CJumbotron>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index b9bd5d03..21b0c892 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,31 +1,29 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <!-- <b-row>
-        <b-col>
-          <b-card>
+      <!-- <CRow>
+        <CCol>
+          <CCard>
           <CMedia asideClasses="m-5 align-self-end" asideRight>
             <img slot="aside" src="img/avatars/6.jpg">
             <div class="text-center">
               ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
             </div>
           </CMedia>
-          </b-card>
-        </b-col>
-      </b-row> -->
-      <b-row>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow> -->
+      <CRow>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -33,15 +31,13 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
@@ -49,17 +45,15 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem disabled>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -67,72 +61,66 @@
               <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
               <CListGroupItem href="#" active>Link with active state</CListGroupItem>
               <CListGroupItem href="#">Action links are easy</CListGroupItem>
               <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem tag="button">Button item</CListGroupItem>
               <CListGroupItem tag="button">I am a button</CListGroupItem>
               <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
               <CListGroupItem tag="button">This is a button too</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem class="d-flex justify-content-between align-items-center">
                 Cras justo odio
-                <b-badge variant="primary" pill>14</b-badge>
+                <CBadge variant="primary" pill>14</CBadge>
               </CListGroupItem>
               <CListGroupItem class="d-flex justify-content-between align-items-center">
                 Dapibus ac facilisis in
-                <b-badge variant="primary" pill>2</b-badge>
+                <CBadge variant="primary" pill>2</CBadge>
               </CListGroupItem>
               <CListGroupItem class="d-flex justify-content-between align-items-center">
                 Morbi leo risus
-                <b-badge variant="primary" pill>1</b-badge>
+                <CBadge variant="primary" pill>1</CBadge>
               </CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
-            </div>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>variants</small>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem>This is a default list group item</CListGroupItem>
               <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
@@ -144,15 +132,15 @@
               <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
               <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
-            </div>
+          </CCard>
+        </CCol>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>variants active</small>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem href="#">This is a default list group item</CListGroupItem>
               <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
@@ -164,19 +152,17 @@
               <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
               <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
-            </div>
-            <b-card-group deck>
-              <b-card header="<b>Card with list group</b>">
+            </CCardHeader>
+            <CCardGroup deck>
+              <CCard header="<b>Card with list group</b>">
                 <CListGroup>
                   <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                   <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
@@ -188,32 +174,30 @@
                   consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
                   ad sit ipsum anim Lorem.
                 </p>
-              </b-card>
-              <b-card no-body header="<b>Card with flush list group</b>">
+              </CCard>
+              <CCard noWrapper header="<b>Card with flush list group</b>">
                 <CListGroup flush>
                   <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                   <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                   <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
                 </CListGroup>
-                <b-card-body>
+                <CCardBody slot="body">
                   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.
-                </b-card-body>
-              </b-card>
-            </b-card-group>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+                </CCardBody>
+              </CCard>
+            </CCardGroup>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
-            </div>
+            </CCardHeader>
             <CListGroup>
               <CListGroupItem href="#" active class="flex-column align-items-start">
                 <div class="d-flex w-100 justify-content-between">
@@ -249,9 +233,9 @@
                 <small class="text-muted">Donec id elit non mi porta.</small>
               </CListGroupItem>
             </CListGroup>
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index d384432e..06bf9fe8 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -1,176 +1,197 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      <!-- <CCard>
+        <CNavbar toggleable="md" light variant="light">
+          <CNavbarToggle class="hehe" @click="test2 = !test2"/>
+          <CLink class="navbar-brand">NavBar</CLink>
+          <CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
+            <CNavbarNav pills class="navbar-nav">
+              <CNavItem>
+                hehehe1
+              </CNavItem>
+              <CNavItem class="nav-item">
+                hehehe1
+              </CNavItem>
+              <CNavItem class="nav-item">
+                hehehe2
+              </CNavItem>
+              <DefaultHeaderDropdownAccnt/>
+            </CNavbarNav>
+            <CNavbarNav class="ml-auto">
+              <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
+                <CDropdownItem><i class="fa fa-file" /> Projects
+                  <CBadge variant="primary">32</CBadge>
+                </CDropdownItem>
+                <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
+                <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
+              </CDropdown>
+            </CNavbarNav>
+          </CCollapse>
+        </CNavbar>
+      </CCard> -->
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
-        </div>
-        <b-navbar toggleable="md" type="dark" variant="info">
-
-          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
-
-          <b-navbar-brand href="#">NavBar</b-navbar-brand>
-
-          <b-collapse is-nav id="nav_collapse">
-
-            <b-navbar-nav>
-              <b-nav-item href="#">Link</b-nav-item>
-              <b-nav-item href="#" disabled>Disabled</b-nav-item>
-            </b-navbar-nav>
+        </CCardHeader>
+        <CNavbar toggleable="md" type="dark" variant="info">
+          <CNavbarToggle @click="show=!show"/>
+          <CNavbarBrand href="#">NavBar</CNavbarBrand>
+          <CCollapse :show="show"
+                     navbar
+          >
+            <CNavbarNav>
+              <CNavItem href="#">Link</CNavItem>
+              <CNavItem href="#" disabled>Disabled</CNavItem>
+            </CNavbarNav>
 
             <!-- Right aligned nav items -->
-            <b-navbar-nav class="ml-auto">
-
-              <b-nav-form>
-                <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
-                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-              </b-nav-form>
-
-              <!-- <c-nav-item-dropdown text="Lang">
-                <template slot="button-content">
-                  <img
-                    src="img/avatars/6.jpg"
-                    class="img-avatar"
-                    alt="admin@bootstrapmaster.com" />
-                </template>
-                <template slot="dropdown">
-                  <a href="#" class='dropdown-item'>EN</a>
-                  <a href="#" class='dropdown-item'>ES</a>
-                  <a href="#" class='dropdown-item'>RU</a>
-                  <a href="#" class='dropdown-item'>FA</a>
-                </template>
-              </c-nav-item-dropdown> -->
+            <CNavbarNav class="ml-auto">
+              <CForm inline>
+                <CFormInput
+                  class="mr-sm-2"
+                  placeholder="Search"
+                  size="sm"
+                />
+                <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
+              </CForm>
 
-              <b-nav-item-dropdown right>
-                <!-- Using button-content slot -->
-                <template slot="button-content">
-                  <em>User</em>
-                </template>
-                <b-dropdown-item href="#">Profile</b-dropdown-item>
-                <b-dropdown-item href="#">Signout</b-dropdown-item>
-              </b-nav-item-dropdown>
-            </b-navbar-nav>
+              <CDropdown button-content="Lang"
+                         nav
+                         placement="bottom-end"
+              >
+                  <CDropdownItem>EN</CDropdownItem>
+                  <CDropdownItem>ES</CDropdownItem>
+                  <CDropdownItem>RU</CDropdownItem>
+                  <CDropdownItem>FA</CDropdownItem>
+              </CDropdown>
 
-          </b-collapse>
-        </b-navbar>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+              <CDropdown nav
+                         button-content="<em>User</em>"
+                         placement="bottom-end"
+              >
+                <CDropdownItem>Profile</CDropdownItem>
+                <CDropdownItem>Signout</CDropdownItem>
+              </CDropdown>
+            </CNavbarNav>
+          </CCollapse>
+        </CNavbar>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>brand</small>
-        </div>
+        </CCardHeader>
         <div>
           <!-- Image and text -->
-          <b-navbar variant="faded" type="light">
-            <b-navbar-brand tag="h1" href="#">
+          <CNavbar variant="faded" light>
+            <CNavbarBrand href="#">
               <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
               BootstrapVue
-            </b-navbar-brand>
-          </b-navbar>
+            </CNavbarBrand>
+          </CNavbar>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>text</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-navbar toggleable type="light" variant="light">
-            <b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
-            <b-navbar-brand>BootstrapVue</b-navbar-brand>
-            <b-collapse is-nav id="nav_text_collapse">
-              <b-navbar-nav>
-                <b-nav-text>Navbar text</b-nav-text>
-              </b-navbar-nav>
-            </b-collapse>
-          </b-navbar>
+          <CNavbar toggleable="sm" light variant="light">
+            <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
+            <CNavbarBrand>BootstrapVue</CNavbarBrand>
+            <CCollapse :show="navbarText" navbar>
+              <CNavbarNav>
+                <span class="navbar-text">Navbar text</span>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>dropdown</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-navbar type="dark" variant="primary" toggleable>
-            <b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
-            <b-collapse is-nav id="nav_dropdown_collapse">
-              <b-navbar-nav>
-                <b-nav-item href="#">Home</b-nav-item>
-                <b-nav-item href="#">Link</b-nav-item>
+          <CNavbar type="dark" variant="primary">
+            <!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
+            <CCollapse :show="navbarDropdown" navbar> -->
+              <CNavbarNav>
+                <CNavItem href="#">Home</CNavItem>
+                <CNavItem href="#">Link</CNavItem>
                 <!-- Navbar dropdowns -->
-                <b-nav-item-dropdown text="Lang" right>
-                  <b-dropdown-item href="#">EN</b-dropdown-item>
-                  <b-dropdown-item href="#">ES</b-dropdown-item>
-                  <b-dropdown-item href="#">RU</b-dropdown-item>
-                  <b-dropdown-item href="#">FA</b-dropdown-item>
-                </b-nav-item-dropdown>
-                <b-nav-item-dropdown text="User" right>
-                  <b-dropdown-item href="#">Account</b-dropdown-item>
-                  <b-dropdown-item href="#">Settings</b-dropdown-item>
-                </b-nav-item-dropdown>
-              </b-navbar-nav>
-            </b-collapse>
-          </b-navbar>
+                <CDropdown button-content="Lang" right nav>
+                  <CDropdownItem>EN</CDropdownItem>
+                  <CDropdownItem>ES</CDropdownItem>
+                  <CDropdownItem>RU</CDropdownItem>
+                  <CDropdownItem>FA</CDropdownItem>
+                </CDropdown>
+                <CDropdown button-content="User" right nav>
+                  <CDropdownItem>Account</CDropdownItem>
+                  <CDropdownItem>Settings</CDropdownItem>
+                </CDropdown>
+              </CNavbarNav>
+            <!-- </CCollapse> -->
+          </CNavbar>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>form</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-navbar type="light" variant="light">
-            <b-nav-form>
-              <b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
-              <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
-            </b-nav-form>
-          </b-navbar>
+          <CNavbar type="light" variant="light">
+            <CForm inline>
+              <CFormInput
+                class="mr-sm-2"
+                placeholder="Search"
+                size="sm"
+              />
+              <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
+            </CForm>
+          </CNavbar>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>input group</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-navbar type="light" variant="light">
-            <b-nav-form>
-              <b-input-group left="@">
-                <b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
-              </b-input-group>
-            </b-nav-form>
-          </b-navbar>
+          <CNavbar type="light" variant="light">
+            <CForm inline>
+              <CFormInput
+                class="mr-sm-2"
+                placeholder="Username"
+              />
+            </CForm>
+          </CNavbar>
         </div>
-      </b-card>
+      </CCard>
     </div>
   </div>
 </template>
-
 <script>
-// import CNavItemDropdown from './CNavItemDropdown'
-
+import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
 export default {
   name: 'navbars',
-  // components:{
-  //   CNavItemDropdown
-  // }
+  components: {
+    DefaultHeaderDropdownAccnt
+  },
+  data () {
+    return {
+      show: false,
+      navbarText: false,
+      navbarDropdown: false,
+    }
+  }
 }
 </script>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 37270549..db6715a7 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,164 +1,153 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
+        </CCardHeader>
+        <div>
+          <CNav>
+            <CNavItem active>Active</CNavItem>
+            <CNavItem title="Link"/>
+            <CNavItem>Another Link</CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
+        </CCardHeader>
         <div>
-          <c-nav>
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-nav-item>Another Link</c-nav-item>
-            <c-nav-item disabled>Disabled</c-nav-item>
-          </c-nav>
+          <CNav>
+            <CNavItem active>
+              <i class="icon-basket-loaded"></i>
+            </CNavItem>
+            <CNavItem>
+              Link
+            </CNavItem>
+            <CNavItem>
+              Another Link
+            </CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
-        </div>
+        </CCardHeader>
         <div>
-            <c-nav tabs v-model="item" tab-content>
-              <!-- <c-nav-item index="hehe2">Active</c-nav-item> -->
-              <c-nav-item id="hehe">
-                <i class="icon-basket-loaded"></i> Active
-                <div slot="tab">hehe</div>
-              </c-nav-item>
-              <c-nav-item>
-                Link
-
-              </c-nav-item>
-              <c-nav-item>
-                Another Link
-                <div slot="tab">hehe3</div>
-              </c-nav-item>
-              <c-nav-item disabled>Disabled</c-nav-item>
-
-            </c-nav>
-          <!-- <CTab fade :activeItem="item">
-            <CTabItem id="hehe2">text1</CTabItem>
-            <CTabItem>text1</CTabItem>
-            <CTabItem>text2</CTabItem>
-            <CTabItem @click="smh = 1">text3</CTabItem>
-            <CTabItem>text4</CTabItem>
-          </CTab> -->
+          <CNav tabs>
+            <CNavItem active>
+              Active
+            </CNavItem>
+            <CNavItem>
+              Link
+            </CNavItem>
+            <CNavItem>
+              Another Link
+            </CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
-
-
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header" @click="item++">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header" @click="item++">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
+        </CCardHeader>
+        <div>
+          <CNav pills>
+            <CNavItem active>Active</CNavItem>
+            <CNavItem>Link</CNavItem>
+            <CNavItem>Another Link</CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
-        <div @click="item--">
-          <c-nav pills>
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-nav-item>Another Link</c-nav-item>
-            <c-nav-item disabled>Disabled</c-nav-item>
-          </c-nav>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
-        </div>
+        </CCardHeader>
         <div>
-          <c-nav fill tabs>
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-nav-item>Link with a long name </c-nav-item>
-            <c-nav-item disabled>Disabled</c-nav-item>
-          </c-nav>
+          <CNav fill tabs>
+            <CNavItem active>Active</CNavItem>
+            <CNavItem>Link</CNavItem>
+            <CNavItem>Link with a long name </CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
-        </div>
-        <div>
-          <c-nav justified tabs>
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-nav-item>Link with a long name </c-nav-item>
-            <c-nav-item disabled>Disabled</c-nav-item>
-          </c-nav>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
-        </div>
+        </CCardHeader>
         <div>
-          <c-nav pills>
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-dropdown id="nav7_ddown" text="Dropdown" right>
-              <a class="nav-link dropdown-toggle" slot="button">Dropdown</a>
-              <c-dropdown-item>one</c-dropdown-item>
-              <c-dropdown-item>two</c-dropdown-item>
-              <c-dropdown-divider></c-dropdown-divider>
-              <c-dropdown-item>three</c-dropdown-item>
-            </c-dropdown>
-          </c-nav>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
+          <CNav justified tabs>
+            <CNavItem active>Active</CNavItem>
+            <CNavItem>Link</CNavItem>
+            <CNavItem>Link with a long name </CNavItem>
+            <CNavItem disabled>Disabled</CNavItem>
+          </CNav>
         </div>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>dropdown support</small>
+        </CCardHeader>
         <div>
-          <c-nav vertical class="w-25">
-            <c-nav-item active>Active</c-nav-item>
-            <c-nav-item>Link</c-nav-item>
-            <c-nav-item>Another Link</c-nav-item>
-            <c-nav-item disabled>Disabled</c-nav-item>
-          </c-nav>
+          <CNav pills>
+            <CNavItem active>Active</CNavItem>
+            <CNavItem>Link</CNavItem>
+            <CDropdown id="nav7_ddown"
+                       nav
+                       placement="bottom-end"
+                       button-content="Dropdown"
+            >
+              <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
+              <CDropdownItem>one</CDropdownItem>
+              <CDropdownItem>two</CDropdownItem>
+              <CDropdownDivider/>
+              <CDropdownItem>three</CDropdownItem>
+            </CDropdown>
+          </CNav>
         </div>
-      </b-card>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>vertical variation</small>
+        </CCardHeader>
+        <CRow>
+          <CCol cols="3" class="m-0">
+            <CNav vertical pills >
+              <CNavItem active>Active</CNavItem>
+              <CNavItem>Link</CNavItem>
+              <CNavItem>Another Link</CNavItem>
+              <CNavItem disabled>Disabled</CNavItem>
+            </CNav>
+          </CCol>
+        </CRow>
+      </CCard>
     </div>
   </div>
 </template>
 
 <script>
-// import CNav from './CNav'
-// import CNavItem from './CNavItem'
-// import CTab from './CTab'
-// import CTabItem from './CTabItem'
-
-
 export default {
   name: 'navs',
   data () {
     return {
       item: 2
     }
-  },
-  // components: {
-  //   CNav,
-  //   CNavItem,
-  //   CTab,
-  //   CTabItem
-  // }
+  }
 }
 </script>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 12308c02..c72eefa3 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,121 +1,70 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
-        </div>
+        </CCardHeader>
         <div>
-          <h6>CPagination</h6>
-            <CPagination v-model="currentPage2"
-                         :itemsNumber="1111"
-                         @change="hehe"
-                         size="lg"
-                         align="center"
-                         :limit="6"
-                         :noDots="false"
-                         :noDoubleArrows="false"
-                         :noArrows="false"
-            />
-          <br>
-
           <h6>Default</h6>
-          <b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
-          </b-pagination>
+          <CPagination v-model="currentPage" :pages="10"/>
           <br>
 
           <h6>Small</h6>
-          <b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
-          </b-pagination>
+          <CPagination size="sm" v-model="currentPage" :pages="10"/>
           <br>
 
           <div class="d-sm-down-none">
             <h6>Large</h6>
-            <b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
-            </b-pagination>
+            <CPagination size="lg" v-model="currentPage" :pages="10"/>
             <br>
           </div>
 
           <div>currentPage: {{currentPage}}</div>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>alignment</small>
-        </div>
+        </CCardHeader>
         <div>
           <h6>Left alignment (default)</h6>
-          <b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
-          </b-pagination>
+          <CPagination v-model="currentPage" :pages="10"/>
           <br>
 
           <h6>Center alignment</h6>
-          <b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
-          </b-pagination>
+          <CPagination align="center" :pages="10" v-model="currentPage"/>
           <br>
 
           <h6>Right (end) alignment</h6>
-          <b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
-          </b-pagination>
+          <CPagination align="end" v-model="currentPage" :pages="10"/>
           <br>
 
           <div>currentPage: {{currentPage}}</div>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
-          <small>navigation</small>
-        </div>
-        <div>
-          <h6>Default</h6>
-          <b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
-
-          <h6 class="mt-4">With link generator function</h6>
-          <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
-          <br>
-
-          <div class="mt-4">currentPage: {{currentPage}}</div>
-        </div>
-      </b-card>
+      </CCard>
     </div>
   </div>
 </template>
 
 <script>
-// import CPagination from './CPagination'
-
 export default {
   name: 'paginations',
-  // components: {
-  //   CPagination
-  // },
   data () {
     return {
       currentPage: 3,
-      currentPage2: 3
     }
   },
-  methods: {
-    linkGen (pageNum) {
-      return '#page/' + pageNum + '/foobar'
-    },
-    hehe (val) {
-      // console.log(this.currentPage)
-    }
-
-  }
+  // methods: {
+  //   linkGen (pageNum) {
+  //     return '#page/' + pageNum + '/foobar'
+  //   },
+  // }
 }
 </script>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 17db010e..9ed1ef58 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,178 +1,178 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
-        </div>
-        <b-row>
-          <b-col cols="6">
+        </CCardHeader>
+        <CRow>
+          <CCol cols="6">
             <div class="my-3 text-center">
-              <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
+              <CButton
+                v-c-popover.hover="{
+                  header: 'Popover header',
+                  content: 'I am popover content!'
+                }"
+              >
                 Hover Me
-              </b-btn>
+              </CButton>
             </div>
-          </b-col>
-          <b-col cols="6">
+          </CCol>
+          <CCol cols="6">
             <div class="my-3 text-center">
-              <b-btn id="popoverButton-open" variant="primary">Button</b-btn>
-
-              <b-popover show target="popoverButton-open" title="Popover">
-                I start <strong>open</strong>
-              </b-popover>
+              <CButton
+                variant="primary"
+                v-c-popover.hover.active="{
+                  header: 'Popover!',
+                  content: 'I start <strong>open</strong>'
+                }"
+              >
+                Button
+              </CButton>
             </div>
-          </b-col>
-        </b-row>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+          </CCol>
+        </CRow>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>placement</small>
-        </div>
+        </CCardHeader>
         <div class="my-3">
-          <b-row>
-            <b-col md="4" class="py-4 text-center"
-                   v-for="placement in placements" :key="placement">
-              <b-btn :id="'exPopover1-'+placement" variant="primary">
+          <CRow>
+            <CCol
+              md="4"
+              class="py-4 text-center"
+              v-for="placement in placements"
+              :key="placement"
+            >
+              <CButton
+                variant="primary"
+                v-c-popover.hover.focus="{
+                  header: 'Popover!',
+                  content: `Placement ${placement}`,
+                  placement
+                }"
+              >
                 {{ placement }}
-              </b-btn>
-              <b-popover :target="'exPopover1-'+placement"
-                         :placement="placement"
-                         title="Popover!"
-                         triggers="hover focus"
-                         :content="`Placement ${placement}`">
-              </b-popover>
-            </b-col>
-          </b-row>
+              </CButton>
+            </CCol>
+          </CRow>
         </div>
-      </b-card>
-      <b-card class="d-sm-down-none"
-              header-tag="header"
-              footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <!-- <CCard class="d-sm-down-none">
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>via properties or slots</small>
-        </div>
-        <b-row>
-          <b-col md="6" class="py-4 text-center">
-            <b-btn id="exPopover2" variant="primary">Using properties</b-btn>
+        </CCardHeader>
+        <CRow>
+          <CCol md="6" class="py-4 text-center">
+            <CButton id="exPopover2" variant="primary">Using properties</CButton>
             <b-popover target="exPopover2"
                        title="Prop Examples"
                        triggers="hover focus"
                        content="Embedding content using properties is easy">
             </b-popover>
-          </b-col>
-          <b-col md="6" class="py-4 text-center">
-            <b-btn id="exPopover3" variant="primary">Using slots</b-btn>
+          </CCol>
+          <CCol md="6" class="py-4 text-center">
+            <CButton id="exPopover3" variant="primary">Using slots</CButton>
             <b-popover target="exPopover3" triggers="hover focus">
               <template slot="title">Content via Slots</template>
               Embedding content <span class="text-danger">using slots</span>
               affords you <em>greater <strong>control.</strong></em> and
               basic HTML support.
             </b-popover>
-          </b-col>
-        </b-row>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+          </CCol>
+        </CRow>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>show</small>
-        </div>
+        </CCardHeader>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
-            <b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
+            <CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
           </div>
           <div class="p-2">
-            <b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
+            <CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
 
             <b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
               Hello <strong>World!</strong>
             </b-popover>
           </div>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>open/close events</small>
-        </div>
+        </CCardHeader>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
-            <b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
+            <CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
           </div>
           <div class="p-2">
-            <b-btn class="px-1" @click="onOpen">Open</b-btn>
-            <b-btn class="px-1" @click="onClose">Close</b-btn>
+            <CButton class="px-1" @click="onOpen">Open</CButton>
+            <CButton class="px-1" @click="onClose">Close</CButton>
           </div>
 
           <b-popover ref="popover1" target="popoverButton-event" title="Popover">
             Hello <strong>World!</strong>
           </b-popover>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>enable/disable events</small>
-        </div>
+        </CCardHeader>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
-            <b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
+            <CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
           </div>
           <div class="p-2">
-            <b-btn class="px-1" @click="onEnable">Enable</b-btn>
-            <b-btn class="px-1" @click="onDisable">Disable</b-btn>
+            <CButton class="px-1" @click="onEnable">Enable</CButton>
+            <CButton class="px-1" @click="onDisable">Disable</CButton>
           </div>
 
           <b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
             Hello <strong>World!</strong>
           </b-popover>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard> -->
+      <!-- <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
-        </div>
-        <b-row>
-          <b-col md="3" class="py-3 text-center">
-            <b-btn v-b-popover.hover.top="'I am Top'"
+        </CCardHeader>
+        <CRow>
+          <CCol md="3" class="py-3 text-center">
+            <CButton v-b-popover.hover.top="'I am Top'"
                    title="Popover!"
-                   variant="primary">Top</b-btn>
-          </b-col>
-          <b-col md="3" class="py-3 text-center">
-            <b-btn v-b-popover.hover.left="'I am Left'"
+                   variant="primary">Top</CButton>
+          </CCol>
+          <CCol md="3" class="py-3 text-center">
+            <CButton v-b-popover.hover.left="'I am Left'"
                    title="Popover!"
-                   variant="primary">Left</b-btn>
-          </b-col>
-          <b-col md="3" class="py-3 text-center">
-            <b-btn v-b-popover.hover.right="'I am Right'"
+                   variant="primary">Left</CButton>
+          </CCol>
+          <CCol md="3" class="py-3 text-center">
+            <CButton v-b-popover.hover.right="'I am Right'"
                    title="Popover!"
-                   variant="primary">Right</b-btn>
-          </b-col>
-          <b-col md="3" class="py-3 text-center">
-            <b-btn v-b-popover.hover.bottom="'I am Bottom'"
+                   variant="primary">Right</CButton>
+          </CCol>
+          <CCol md="3" class="py-3 text-center">
+            <CButton v-b-popover.hover.bottom="'I am Bottom'"
                    title="Popover!"
-                   variant="primary">Bottom</b-btn>
-          </b-col>
-        </b-row>
-      </b-card>
+                   variant="primary">Bottom</CButton>
+          </CCol>
+        </CRow>
+      </CCard> -->
     </div>
   </div>
 </template>
@@ -183,12 +183,13 @@ export default {
   data () {
     return {
       placements: [
-        'topright', 'top', 'topleft',
-        'bottomright', 'bottom', 'bottomleft',
-        'righttop', 'right', 'lefttop',
-        'rightbottom', 'left', 'leftbottom'
+        'top-start', 'top', 'top-end',
+        'bottom-start', 'bottom', 'bottom-end',
+        'right-start', 'right', 'right-end',
+        'left-start', 'left', 'left-end'
       ],
-      show: false
+      show: false,
+      counter: 0
     }
   },
   methods: {
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index f5ad395c..72330647 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -1,155 +1,139 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
-        </div>
+        </CCardHeader>
         <div>
-          <c-progress :value="counter" :max="max" show-progress animated></c-progress>
+          <CProgress :value="counter" :max="max" show-progress animated></CProgress>
           <CProgress class="mt-1" :max="max" show-value>
-            <CProgressBar :value="counter*(6/10)" color="success"/>
-            <CProgressBar :value="counter*(2.5/10)" color="warning"/>
-            <CProgressBar :value="counter*(1.5/10)" color="danger"/>
+            <CProgressBar :value="counter*(6/10)" variant="success"/>
+            <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
+            <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
           </CProgress>
-          <b-btn class="mt-4" @click="clicked">Click me</b-btn>
+          <CButton class="mt-4" @click="clicked">Click me</CButton>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
-        </div>
+        </CCardHeader>
         <div>
           <h6>No label</h6>
-          <b-progress :value="value" :max="max2" class="mb-3"></b-progress>
+          <CProgress :value="value" :max="max2" class="mb-3"></CProgress>
           <h6>Value label</h6>
-          <b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
+          <CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
           <h6>Progress label</h6>
-          <b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
+          <CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
           <h6>Value label with precision</h6>
-          <b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
+          <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
           <h6>Progress label with precision</h6>
-          <b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
+          <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
-        </div>
+        </CCardHeader>
         <div>
           <h6>Default width</h6>
-          <b-progress :value="value3" class="mb-3"></b-progress>
+          <CProgress :value="value3" class="mb-3"></CProgress>
           <h6>Custom widths</h6>
-          <b-progress :value="value3" class="w-75 mb-2"></b-progress>
-          <b-progress :value="value3" class="w-50 mb-2"></b-progress>
-          <b-progress :value="value3" class="w-25"></b-progress>
+          <CProgress :value="value3" class="w-75 mb-2"></CProgress>
+          <CProgress :value="value3" class="w-50 mb-2"></CProgress>
+          <CProgress :value="value3" class="w-25"></CProgress>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
-        </div>
+        </CCardHeader>
         <div>
           <h6>Default height</h6>
-          <b-progress :value="value3" show-progress class="mb-3"></b-progress>
+          <CProgress :value="value3" show-progress class="mb-3"></CProgress>
           <h6>Custom heights</h6>
-          <b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
-          <b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
-          <b-progress height="2px" :value="value3"></b-progress>
+          <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
+          <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
+          <CProgress height="2px" :value="value3"></CProgress>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
-        </div>
+        </CCardHeader>
         <div>
           <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
             <div class="col-sm-2">{{ bar.variant }}:</div>
             <div class="col-sm-10 pt-1">
-              <b-progress :value="bar.value"
+              <CProgress :value="bar.value"
                           :variant="bar.variant"
                           :key="bar.variant"
-              ></b-progress>
+              ></CProgress>
             </div>
           </div>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
-          <b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
-          <b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
-          <b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
-          <b-button variant="secondary" @click="striped = !striped">
+          <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
+          <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
+          <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
+          <CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
+          <CButton variant="secondary" @click="striped = !striped">
             {{ striped ? 'Remove' : 'Add'}} Striped
-          </b-button>
+          </CButton>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
-          <b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
-          <b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
-          <b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
-          <b-button variant="secondary" @click="animate = !animate">
+          <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
+          <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
+          <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
+          <CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
+          <CButton variant="secondary" @click="animate = !animate">
             {{ animate ? 'Stop' : 'Start'}} Animation
-          </b-button>
+          </CButton>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
-        </div>
+        </CCardHeader>
         <div>
-          <b-progress :max="max3" class="mb-3">
-            <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
-            <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-            <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
-          </b-progress>
-          <b-progress show-progress :max="max3" class="mb-3">
-            <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
-            <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-            <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
-          </b-progress>
-          <b-progress show-value striped :max="max3" class="mb-3">
-            <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
-            <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-            <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
-          </b-progress>
-          <b-progress :max="max3" class="mb-3">
-            <b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
-            <b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
-            <b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
-          </b-progress>
+          <CProgress :max="max3" class="mb-3">
+            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          </CProgress>
+          <CProgress show-progress :max="max3" class="mb-3">
+            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          </CProgress>
+          <CProgress show-value striped :max="max3" class="mb-3">
+            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+          </CProgress>
+          <CProgress :max="max3" class="mb-3">
+            <CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
+          </CProgress>
         </div>
-      </b-card>
+      </CCard>
     </div>
   </div>
 </template>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 9aca6c68..a16d6aa4 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -5,16 +5,16 @@
     <p>myFlag2: {{myFlag2}}</p>
     <CSwitch v-model="myFlag1"/>
     <CSwitch v-model="myFlag2" checked @change="test" /> -->
-    <b-row>
-      <b-col xs="12" md="6">
-        <b-card v-if="true">
-          <div slot="header">
+    <CRow>
+      <CCol xs="12" md="6">
+        <CCard v-if="true">
+          <CCardHeader slot="header">
             <h5>
                Radio switches
-              <b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
-              <b-badge variant="danger" class="float-right">NEW</b-badge>
+              <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
+              <CBadge variant="danger" class="float-right">NEW</CBadge>
             </h5>
-          </div>
+          </CCardHeader>
           <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
           <CSwitch class="mx-1"
                    :key="key"
@@ -28,16 +28,16 @@
                    :value="variant"
                    v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
           />
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch default
-            <b-badge variant="primary">{{checker}}</b-badge>
-          </div>
+            <CBadge variant="primary">{{checker}}</CBadge>
+          </CCardHeader>
           <CSwitch class="mx-1"
             variant="primary"
             checked
@@ -62,396 +62,412 @@
                    v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
           />
           <CSwitch class="mx-1" variant="primary" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch pills
-          </div>
-          <c-switch class="mx-1" variant="primary" checked  shape="pill"/>
-          <c-switch class="mx-1" variant="secondary" checked  shape="pill" />
-          <c-switch class="mx-1" variant="success" checked  shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked  shape="pill" />
-          <c-switch class="mx-1" variant="info" checked  shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked  shape="pill" />
-          <c-switch class="mx-1" variant="light" checked  shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked  shape="pill" />
-          <c-switch class="mx-1" variant="primary" disabled  shape="pill" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked  shape="pill"/>
+          <CSwitch class="mx-1" variant="secondary" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked  shape="pill" />
+          <CSwitch class="mx-1" variant="primary" disabled  shape="pill" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch
-          </div>
-          <c-switch class="mx-1" variant="primary" checked   shape="3d" />
-          <c-switch class="mx-1" variant="secondary" checked   shape="3d" />
-          <c-switch class="mx-1" variant="success" checked   shape="3d" />
-          <c-switch class="mx-1" variant="warning" checked   shape="3d" />
-          <c-switch class="mx-1" variant="info" checked   shape="3d" />
-          <c-switch class="mx-1" variant="danger" checked   shape="3d" />
-          <c-switch class="mx-1" variant="light" checked   shape="3d" />
-          <c-switch class="mx-1" variant="dark" checked   shape="3d" />
-          <c-switch class="mx-1" variant="primary" disabled   shape="3d" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="success" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="warning" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="info" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="danger" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="light" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="dark" checked   shape="3d" />
+          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch <small><code>disabled</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="success" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="info" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="light" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
-          <c-switch class="mx-1" variant="primary" disabled shape="3d" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
+          <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch <small><code>outline="alt"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch <small><code>label</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-          <c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
+          <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch <small><code>outline="alt"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             3d Switch <small><code>outline="alt"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline />
-          <c-switch class="mx-1" variant="secondary" checked outline />
-          <c-switch class="mx-1" variant="success" checked outline />
-          <c-switch class="mx-1" variant="warning" checked outline />
-          <c-switch class="mx-1" variant="info" checked outline />
-          <c-switch class="mx-1" variant="danger" checked outline />
-          <c-switch class="mx-1" variant="light" checked outline />
-          <c-switch class="mx-1" variant="dark" checked outline />
-          <c-switch class="mx-1" variant="primary" outline disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline />
+          <CSwitch class="mx-1" variant="secondary" checked outline />
+          <CSwitch class="mx-1" variant="success" checked outline />
+          <CSwitch class="mx-1" variant="warning" checked outline />
+          <CSwitch class="mx-1" variant="info" checked outline />
+          <CSwitch class="mx-1" variant="danger" checked outline />
+          <CSwitch class="mx-1" variant="light" checked outline />
+          <CSwitch class="mx-1" variant="dark" checked outline />
+          <CSwitch class="mx-1" variant="primary" outline disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>outline  shape="pill"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline  shape="pill"/>
-          <c-switch class="mx-1" variant="secondary" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="success" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="info" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="light" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked outline  shape="pill" />
-          <c-switch class="mx-1" variant="primary" outline  shape="pill" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline  shape="pill"/>
+          <CSwitch class="mx-1" variant="secondary" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked outline  shape="pill" />
+          <CSwitch class="mx-1" variant="primary" outline  shape="pill" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>outline="alt"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" />
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" />
-          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>outline="alt"  shape="pill"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked />
-          <c-switch class="mx-1" variant="secondary" checked />
-          <c-switch class="mx-1" variant="success" checked />
-          <c-switch class="mx-1" variant="warning" checked />
-          <c-switch class="mx-1" variant="info" checked />
-          <c-switch class="mx-1" variant="danger" checked />
-          <c-switch class="mx-1" variant="light" checked />
-          <c-switch class="mx-1" variant="dark" checked />
-          <c-switch class="mx-1" variant="primary" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked />
+          <CSwitch class="mx-1" variant="secondary" checked />
+          <CSwitch class="mx-1" variant="success" checked />
+          <CSwitch class="mx-1" variant="warning" checked />
+          <CSwitch class="mx-1" variant="info" checked />
+          <CSwitch class="mx-1" variant="danger" checked />
+          <CSwitch class="mx-1" variant="light" checked />
+          <CSwitch class="mx-1" variant="dark" checked />
+          <CSwitch class="mx-1" variant="primary" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label  shape="pill"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked shape="pill" />
-          <c-switch class="mx-1" variant="secondary" checked shape="pill" />
-          <c-switch class="mx-1" variant="success" checked shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked shape="pill" />
-          <c-switch class="mx-1" variant="info" checked shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked shape="pill" />
-          <c-switch class="mx-1" variant="light" checked shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked shape="pill" />
-          <c-switch class="mx-1" variant="primary" shape="pill" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked shape="pill" />
+          <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked shape="pill" />
+          <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline />
-          <c-switch class="mx-1" variant="secondary" checked outline />
-          <c-switch class="mx-1" variant="success" checked outline />
-          <c-switch class="mx-1" variant="warning" checked outline />
-          <c-switch class="mx-1" variant="info" checked outline />
-          <c-switch class="mx-1" variant="danger" checked outline />
-          <c-switch class="mx-1" variant="light" checked outline />
-          <c-switch class="mx-1" variant="dark" checked outline />
-          <c-switch class="mx-1" variant="primary" outline disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline />
+          <CSwitch class="mx-1" variant="secondary" checked outline />
+          <CSwitch class="mx-1" variant="success" checked outline />
+          <CSwitch class="mx-1" variant="warning" checked outline />
+          <CSwitch class="mx-1" variant="info" checked outline />
+          <CSwitch class="mx-1" variant="danger" checked outline />
+          <CSwitch class="mx-1" variant="light" checked outline />
+          <CSwitch class="mx-1" variant="dark" checked outline />
+          <CSwitch class="mx-1" variant="primary" outline disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="success" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="info" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="light" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked outline shape="pill" />
-          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
+          <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" />
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" />
-          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
-        </b-card>
-      </b-col>
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+        </CCard>
+      </CCol>
 
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
-          <c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
-        </b-card>shape
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
+          <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+        </CCard>shape
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label  shape="pill"</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
             Switch <small><code>label outline</code></small>
-          </div>
-          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
-        </b-card>
-      </b-col>
+          </CCardHeader>
+          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+        </CCard>
+      </CCol>
 
-      <b-col md="12">
-        <b-card no-body>
-          <div slot="header">
+      <CCol md="12">
+        <CCard noWrapper>
+          <CCardHeader slot="header">
             Sizes
-          </div>
-          <b-card-body class="p-0">
-            <b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
-              <template slot="example" slot-scope="data">
-                <c-switch :variant="data.value.variant" :color="data.value.color" :size="data.value.size" :checked="data.value.checked"/>
+          </CCardHeader>
+          <CCardBody slot="body" class="p-0">
+            <CTable
+              hover
+              striped
+              class="table-align-middle mb-0"
+              :items="items"
+              :fields="fields"
+              noSorting
+            >
+              <template #example="{item}">
+                <td>
+                  <CSwitch
+                    :shape="item.example.shape"
+                    :variant="item.example.variant"
+                    :size="item.example.size"
+                    :checked="item.example.checked"
+                  />
+                </td>
               </template>
-              <template slot="size_prop" slot-scope="data">
-                <span v-html="data.item.size_prop"></span>
+              <template #size_prop="{item}">
+                <td>
+                  <span v-html="item.size_prop"></span>
+                </td>
               </template>
-            </b-table>
-          </b-card-body>
-        </b-card>
-      </b-col>
-    </b-row>
+            </CTable>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
@@ -476,9 +492,9 @@ export default {
         {key: 'size_prop', label: 'Size prop'}
       ],
       items: [
-        {size: 'Large', example: {variant: '3d', color: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
-        {size: 'Normal', example: {variant: '3d', color: 'primary', size: '', checked: true}, size_prop: '-'},
-        {size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
+        {size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
+        {size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
+        {size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
       ],
       checker: 'yes',
       radio: 'primary',
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 7980d995..77b8a347 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,98 +1,48 @@
 <template>
-  <b-card :header="caption">
-    <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
-      <template slot="status" slot-scope="data">
-        <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+  <CCard :header="caption">
+    <CTable
+      :hover="hover"
+      :striped="striped"
+      :bordered="bordered"
+      :small="small"
+      :fixed="fixed"
+      :items="items"
+      :fields="fields"
+      :per-page="small ? 10 : 5"
+      :dark="dark"
+      noSorting
+    >
+      <template v-slot:status="{item}">
+        <td>
+          <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
+        </td>
       </template>
-    </b-table>
-    <nav>
-      <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
-    </nav>
-  </b-card>
+    </CTable>
+  </CCard>
 </template>
 
 <script>
-/**
-   * Randomize array element order in-place.
-   * Using Durstenfeld shuffle algorithm.
-   */
-const shuffleArray = (array) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    let j = Math.floor(Math.random() * (i + 1))
-    let temp = array[i]
-    array[i] = array[j]
-    array[j] = temp
-  }
-  return array
-}
-
+import items from '../users/UsersData'
 export default {
-  name: 'c-table',
+  name: 'TableWrapper',
   props: {
+    items: Array,
+    fields: {
+      type: Array,
+      default () {
+        return ['username', 'registered', 'role', 'status']
+      }
+    },
     caption: {
       type: String,
       default: 'Table'
     },
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    striped: {
-      type: Boolean,
-      default: false
-    },
-    bordered: {
-      type: Boolean,
-      default: false
-    },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: () => {
-    return {
-      items: shuffleArray([
-        {username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-        {username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
-      ]),
-      fields: [
-        {key: 'username'},
-        {key: 'registered'},
-        {key: 'role'},
-        {key: 'status'}
-      ],
-      currentPage: 1,
-      perPage: 5,
-      totalRows: 0
-    }
+    hover: Boolean,
+    striped: Boolean,
+    bordered: Boolean,
+    small: Boolean,
+    fixed: Boolean,
+    dark: Boolean
   },
   methods: {
     getBadge (status) {
@@ -101,9 +51,6 @@ export default {
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    getRowCount (items) {
-      return items.length
-    }
   }
 }
 </script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index e25fb642..0e09b660 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col sm="12">
-        <b-card header="test1 ">
+    <CRow>
+      <CCol sm="12">
+        <CCard header="test1 ">
+
+          <!-- <CTable :items="items.slice(0)"
+                  noSorting
+                  striped
+          /> -->
+
           <CTable :items="items.slice(0)"
                    :fields="fields"
                    :activePage="page"
@@ -14,7 +20,7 @@
                    smalls
                    noPagination
                    @row-clicked2="(item, index) => toggleDetails(index)"
-                   loading
+                   loadings
                    hover
                    striped
                    optionsRow="onlyFilter2"
@@ -39,20 +45,21 @@
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
               </td>
-              <!-- <td slot="show_details" slot-scope="{item, index}">
+              <td slot="show_details" slot-scope="{item, index}">
                 <button class="btn btn-primary" @click="toggleDetails(index)">
                   {{details.includes(index) ? 'Hide' : 'Show'}}
                 </button>
-              </td> -->
-              <!-- <td slot="index-col"
+              </td>
+              <td slot="index-col"
                   slot-scope="{index}"
                   @click="toggleDetails(index)"
                   style="cursor:pointer"
+                  class="text-center"
               >
                 <i class="icons font-lg d-block cui-chevron-right"
                   style="transition: transform 0.4s"
                   :style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
-              </td> -->
+              </td>
               <CCollapse :show="details.includes(index)"
                          slot="details"
                          slot-scope="{item, index}">
@@ -67,55 +74,94 @@
                        align="center"
                        size="lg"
           />
-        </b-card>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="12">
-        <b-card header="test2">
-          <CTable :items="items.slice(0)"
-                   :fields="fields"
-                   :perPage="5"
-                   indexCol="onlyIndexes2"
-                   filterRow
-                   optionsRow="onlyFilter2"
-                   :paginationProps="{align:'center', size:'lg'}"
-                   noPagination
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="12">
+        <CCard header="test2">
+          <CTable
+            :items="items.slice(0)"
+            :fields="fields"
+            :perPage="5"
+            indexCol="onlyCleaner"
+            filterRow
+            optionsRow="onlyFilter"
+            :paginationProps="{align:'center', size:'lg'}"
           >
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
               </td>
           </CTable>
-        </b-card>
-      </b-col>
-    </b-row>
+        </CCard>
+      </CCol>
+    </CRow>
 
 
-    <b-row @click="test">
-      <b-col lg="6">
-        <old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
-      </b-col><!--/.col-->
+    <CRow>
+      <CCol lg="6">
+        <CTableWrapper
+          :items="getItems()"
+          caption="<i class='fa fa-align-justify'></i> Simple Table"
+        />
+      </CCol><!--/.col-->
 
-      <b-col lg="6">
-        <old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
-      </b-col><!--/.col-->
-    </b-row><!--/.row-->
+      <CCol lg="6">
+        <CTableWrapper
+          :items="getItems()"
+          striped
+          caption="<i class='fa fa-align-justify'></i> Striped Table"
+        />
+      </CCol><!--/.col-->
+    </CRow><!--/.row-->
 
-    <b-row>
-      <b-col lg="6">
-        <old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
-      </b-col><!--/.col-->
+    <CRow>
+      <CCol lg="6">
+        <CTableWrapper
+          :items="getItems()"
+          small
+          caption="<i class='fa fa-align-justify'></i> Condensed Table"
+        />
+      </CCol><!--/.col-->
 
-      <b-col lg="6">
-        <old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
-      </b-col><!--/.col-->
-    </b-row><!--/.row-->
+      <CCol lg="6">
+        <CTableWrapper
+          :items="getItems()"
+          fixed
+          bordered
+          caption="<i class='fa fa-align-justify'></i> Bordered Table"
+        />
+      </CCol><!--/.col-->
+    </CRow><!--/.row-->
 
-    <b-row>
-      <b-col sm="12">
-        <old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
-      </b-col>
-    </b-row>
+    <CRow>
+      <CCol sm="12">
+        <CTableWrapper
+          :items="getItems()"
+          hover
+          striped
+          bordered
+          small
+          fixed
+          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+        />
+      </CCol>
+    </CRow>
+
+    <CRow>
+      <CCol sm="12">
+        <CTableWrapper
+          :items="getItems()"
+          hover
+          striped
+          bordered
+          small
+          fixed
+          dark
+          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+        />
+      </CCol>
+    </CRow>
 
 
   </div>
@@ -123,7 +169,7 @@
 </template>
 
 <script>
-import oldTable from './Table.vue'
+import CTableWrapper from './Table.vue'
 
 // const fields = ['username', 'registered', 'role']
 const fields = [
@@ -134,17 +180,17 @@ const fields = [
   // { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
-  {number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
+  {number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
   {number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
   {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
   {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
   {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -156,14 +202,14 @@ const items = [
   {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
   {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
   {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
 
 export default {
   name: 'tables',
-  components: { oldTable },
+  components: { CTableWrapper },
   data () {
     return {
       items: items,
@@ -182,22 +228,29 @@ export default {
             : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    test () {
-      this.$refs.table.changeSort('username')
-      this.$refs.table.filter = 't'
-      // console.log(this.items)
-    },
-    test3 (item, index) {
-      alert(index + ' - ' + item.username)
-      // console.log()
+    // test () {
+    //   this.$refs.table.changeSort('username')
+    //   this.$refs.table.filter = 't'
+    //   // console.log(this.items)
+    // },
+    shuffleArray (array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1))
+        let temp = array[i]
+        array[i] = array[j]
+        array[j] = temp
+      }
+      return array
     },
     log(val) {
       console.log(val)
     },
     toggleDetails (index) {
-      // console.log('hehe')
       const position = this.details.indexOf(index)
       position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
+    },
+    getItems () {
+      return this.shuffleArray(this.items.slice(0))
     }
   }
   // computed: {
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 380263c9..d50a2705 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -1,122 +1,162 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col xs="12" lg="6">
-        <b-card>
-          <div slot="header">
+    <CRow>
+      <CCol xs="12" lg="6">
+        <CCard>
+          <CCardHeader slot="header">
             Tabs
-          </div>
-          <b-tabs>
-            <b-tab title="Home" active>
-              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+          </CCardHeader>
+          <CTabs addTabClasses="mt-1">
+            <CTab title="Home" active>
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
               et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
               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.
-            </b-tab>
-            <b-tab title="Profile" >
-              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+            </CTab>
+            <CTab title="Profile" >
+              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.
-            </b-tab>
-            <b-tab title="Disabled" disabled>
-              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+            </CTab>
+            <CTab title="Disabled" disabled>
+              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.
-            </b-tab>
-          </b-tabs>
-        </b-card>
-      </b-col>
-      <b-col xs="12" lg="6">
-        <b-card>
-          <div slot="header">
+            </CTab>
+          </CTabs>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="6">
+        <CCard>
+          <CCardHeader slot="header">
+            Tabs
+          </CCardHeader>
+          <CTabs
+            pills
+            addNavClasses="mb-3"
+          >
+            <CTab title="Home" active>
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              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>
+            <CTab title="Profile" >
+              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>
+            <CTab title="Disabled" disabled>
+              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>
+          </CTabs>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="6">
+        <CCard>
+          <CCardHeader slot="header">
             Tabs with icons
-          </div>
-          <b-tabs>
-            <b-tab active>
+          </CCardHeader>
+          <CTabs addTabClasses="mt-1">
+            <CTab active>
               <template slot="title">
                 <i class="icon-calculator"></i>
               </template>
-              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-basket-loaded"></i>
               </template>
-              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-pie-chart"></i>
               </template>
-              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-          </b-tabs>
-        </b-card>
-      </b-col>
-      <b-col xs="12" lg="6">
-        <b-card>
-          <div slot="header">
+            </CTab>
+          </CTabs>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="6">
+        <CCard>
+          <CCardHeader slot="header">
             Tabs with icons
-          </div>
-          <b-tabs v-model="tabIndex[0]">
-            <b-tab active>
+          </CCardHeader>
+          <CTabs
+            addTabClasses="mt-1"
+            card
+          >
+            <CTab active>
               <template slot="title">
                 <i class="icon-calculator"></i> {{tabs[0]}}
               </template>
-              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-basket-loaded"></i> {{tabs[1]}}
               </template>
-              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-pie-chart"></i> {{tabs[2]}}
               </template>
-              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              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.
-            </b-tab>
-          </b-tabs>
-        </b-card>
-      </b-col>
-      <b-col xs="12" lg="6">
-        <b-card>
-          <div slot="header">
+            </CTab>
+          </CTabs>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="6">
+        <CCard>
+          <CCardHeader slot="header">
             Tabs vertical
-          </div>
-          <b-card no-body>
-          <b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
-            <b-tab active>
+          </CCardHeader>
+          <CTabs
+            card
+            pills
+            vertical="4"
+            v-model="tabIndex[1]"
+          >
+            <CTab active>
               <template slot="title">
                 <i class="icon-calculator"></i> {{tabs[0]}}
               </template>
@@ -125,8 +165,8 @@
               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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-basket-loaded"></i> {{tabs[1]}}
               </template>
@@ -135,8 +175,8 @@
               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.
-            </b-tab>
-            <b-tab>
+            </CTab>
+            <CTab>
               <template slot="title">
                 <i class="icon-pie-chart"></i> {{tabs[2]}}
               </template>
@@ -145,12 +185,11 @@
               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.
-            </b-tab>
-          </b-tabs>
-          </b-card>
-        </b-card>
-      </b-col>
-    </b-row>
+            </CTab>
+          </CTabs>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 8c13d3e8..12d4686b 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,189 +1,171 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
+      <CCard>
+        <CCardHeader slot="header">
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Tooltips </strong>
+          <small><code>v-c-tooltip</code> directive</small>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
-        </div>
-        <b-row>
-          <b-col cols="6">
+        </CCardHeader>
+        <CRow>
+          <CCol cols="6">
             <div class="text-center my-3">
-              <b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
+              <CButton v-c-tooltip.hover="'I am a tooltip!'">
+                Hover Me
+              </CButton>
             </div>
-          </b-col>
-          <b-col cols="6">
+          </CCol>
+          <CCol cols="6">
             <div class="text-center my-3">
-              <b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
-              <b-tooltip show target="tooltipButton-2">
-                I start open
-              </b-tooltip>
+              <CButton v-c-tooltip.hover.active="'I start open!'">
+                Button
+              </CButton>
             </div>
-          </b-col>
-        </b-row>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
+          </CCol>
+        </CRow>
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
+          <i class="fa fa-align-justify"></i>
+          <strong> Tooltips </strong>
+          <small>placement</small>
+        </CCardHeader>
+        <div class="my-3">
+          <CRow>
+            <CCol
+              md="4"
+              class="py-4 text-center"
+              v-for="placement in placements"
+              :key="placement"
+            >
+              <CButton
+                variant="primary"
+                v-c-tooltip.hover="{
+                  content: `Placement ${placement}`,
+                  placement
+                }"
+              >
+                {{ placement }}
+              </CButton>
+            </CCol>
+          </CRow>
         </div>
-        <b-row>
-          <b-col md="6" class="py-4 text-center">
-            <b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
-          </b-col>
-          <b-col md="6" class="py-4 text-center">
-            <b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
-          </b-col>
-        </b-row>
+      </CCard>
+        <!-- <CRow>
+          <CCol md="6" class="py-4 text-center">
+            <CButton id="exButton1" variant="outline-success">Live chat</CButton>
+          </CCol>
+          <CCol md="6" class="py-4 text-center">
+            <CButton id="exButton2" variant="outline-success">Html chat</CButton>
+          </CCol>
+        </CRow>
 
-        <!-- Tooltip title specified via prop title -->
         <b-tooltip target="exButton1" title="Online!"></b-tooltip>
 
-        <!-- HTML title specified via default slot -->
         <b-tooltip target="exButton2" placement="bottom">
           Hello <strong>World!</strong>
         </b-tooltip>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
-        </div>
+        </CCardHeader>
         <div class="text-center">
-          <b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
+          <CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
           <br><br>
-          <b-btn @click="show = !show">Toggle Tooltip</b-btn>
+          <CButton @click="show = !show">Toggle Tooltip</CButton>
 
           <b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
             Hello <strong>World!</strong>
           </b-tooltip>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
+      </CCard>
+      <CCard>
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
-        </div>
+        </CCardHeader>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
-            <b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
+            <CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
           </div>
           <div class="p-2">
-            <b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
-            <b-btn class="px-1" @click="onClose">Close</b-btn>
+            <CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
+            <CButton class="px-1" @click="onClose">Close</CButton>
           </div>
 
           <b-tooltip ref="tooltip" target="tooltipButton-showEvent">
             Hello <strong>World!</strong>
           </b-tooltip>
         </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer"
-        id="boundary">
-        <div slot="header">
+      </CCard>
+      <CCard id="boundary">
+        <CCardHeader slot="header">
           <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
-        </div>
+        </CCardHeader>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
-            <b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
+            <CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
           </div>
           <div class="p-2">
-            <b-btn @click="disabled = !disabled" class="mr-1">
+            <CButton @click="disabled = !disabled" class="mr-1">
               {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
-            </b-btn>
+            </CButton>
 
-            <b-btn @click="disableByRef">
+            <CButton @click="disableByRef">
               {{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
-            </b-btn>
+            </CButton>
 
             <b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
               Hello <strong>World!</strong>
             </b-tooltip>
           </div>
         </div>
-          <b-btn @click="test" id="refButton2">
-            test
-          </b-btn><br><br>
-          <b-btn id="refButton" data-toggle="tooltip" class="px-1" >button</b-btn>
-          <CTooltip targetId="refButton"
-                    :placement="placement"
-                    content="sas"
-                    ref="tooltip"
-                    :active="true"
-                    :popover="show"
-                    popoverHeader="smh"
-                    :delay="smh"
-                    :offset="smh"
-                    boundaries="boundary1"
-                    :appendToBody="false"
-          /><br><br><br>
-          <!-- :content="this is HTML <b>content!</b>" -->
-
-          <!-- :popover="true"
-          popoverHeader="Something" -->
-          <!-- title="<div class='card'><img src='https://picsum.photos/600/300/?image=25' class='card-img mb-2'><div class='card-header'><div>Card title</div></div><div class='card-body' style='max-height: 200px; overflow-y: auto;'>
-                  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.
-                  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.
-                  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.
-                  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.
-                  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.
-                  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></div>" -->
-          <!-- <div class="tooltip" id="hehe33">
-            <div class="inner-tooltip">
-              hfhsdasad
-            </div>
-          </div> -->
-      </b-card>
+      </CCard> -->
     </div>
   </div>
 </template>
 
 <script>
-// import CTooltip from './CTooltip'
 export default {
   name: 'tooltips',
-  // components: {
-  //   CTooltip
-  // },
   data () {
     return {
-      show: true,
-      disabled: false,
-      smh: 0,
-      placement: 'bottom-end'
+      // show: true,
+      // disabled: false,
+      // smh: 0,
+      // placement: 'bottom-end',
+      placements: [
+        'top-start', 'top', 'top-end',
+        'bottom-start', 'bottom', 'bottom-end',
+        'right-start', 'right', 'right-end',
+        'left-start', 'left', 'left-end'
+      ]
     }
   },
   methods: {
-    onOpen () {
-      this.$refs.tooltip.$emit('open')
-    },
-    onClose () {
-      this.$refs.tooltip.$emit('close')
-    },
-    disableByRef () {
-      if (this.disabled) {
-        this.$refs.tooltip2.$emit('enable')
-      } else {
-        this.$refs.tooltip2.$emit('disable')
-      }
-    },
-    test () {
-      this.show = !this.show
-      this.placement = 'right'
-      this.smh = 200
-    }
+    // onOpen () {
+    //   this.$refs.tooltip.$emit('open')
+    // },
+    // onClose () {
+    //   this.$refs.tooltip.$emit('close')
+    // },
+    // disableByRef () {
+    //   if (this.disabled) {
+    //     this.$refs.tooltip2.$emit('enable')
+    //   } else {
+    //     this.$refs.tooltip2.$emit('disable')
+    //   }
+    // },
+    // test () {
+    //   this.show = !this.show
+    //   this.placement = 'right'
+    //   this.smh = 200
+    // }
   }
 }
 </script>
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 54354679..257ba648 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -1,287 +1,287 @@
 <template>
   <div class="animated fadeIn">
-    <b-row>
-      <b-col cols="12">
-        <b-card>
-          <div slot="header">
+    <CRow>
+      <CCol cols="12">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Brand Button</strong>
-          </div>
-          <small>Usage </small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          </CCardHeader>
+          <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>
-            <b-button size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
-            <b-button size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
-            <b-button size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
-            <b-button size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
-            <b-button size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
-            <b-button size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
-            <b-button size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
-            <b-button size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
-            <b-button size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
-            <b-button size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
-            <b-button size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
-            <b-button size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
-            <b-button size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
-            <b-button size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
-            <b-button size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
-            <b-button size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
-            <b-button size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
-            <b-button size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
-            <b-button size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
-            <b-button size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
-            <b-button size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
-            <b-button size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
-            <b-button size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
-            <b-button size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
-            <b-button size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
+            <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+            <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+            <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+            <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+            <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+            <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+            <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+            <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+            <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+            <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+            <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+            <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+            <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+            <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+            <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+            <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+            <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+            <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+            <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+            <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+            <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+            <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+            <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+            <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+            <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
           </p>
           <h6>Size Normal</h6>
           <p>
-            <b-button variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
-            <b-button variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
-            <b-button variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
-            <b-button variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
-            <b-button variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
-            <b-button variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
-            <b-button variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
-            <b-button variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
-            <b-button variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
-            <b-button variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
-            <b-button variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
-            <b-button variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
-            <b-button variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
-            <b-button variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
-            <b-button variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
-            <b-button variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
-            <b-button variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
-            <b-button variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
-            <b-button variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
-            <b-button variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
-            <b-button variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
-            <b-button variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
-            <b-button variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
-            <b-button variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
-            <b-button variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
+            <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+            <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+            <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+            <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+            <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+            <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+            <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+            <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+            <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+            <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+            <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+            <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+            <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+            <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+            <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+            <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+            <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+            <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+            <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+            <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+            <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+            <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+            <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+            <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+            <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
           </p>
           <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
-            <b-button size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
-            <b-button size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
-            <b-button size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
-            <b-button size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
-            <b-button size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
-            <b-button size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
-            <b-button size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
-            <b-button size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
-            <b-button size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
-            <b-button size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
-            <b-button size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
-            <b-button size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
-            <b-button size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
-            <b-button size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
-            <b-button size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
-            <b-button size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
-            <b-button size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
-            <b-button size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
-            <b-button size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
-            <b-button size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
-            <b-button size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
-            <b-button size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
-            <b-button size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
-            <b-button size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
-            <b-button size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
+            <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+            <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+            <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+            <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+            <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+            <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+            <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+            <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+            <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+            <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+            <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+            <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+            <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+            <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+            <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+            <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+            <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+            <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+            <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+            <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+            <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+            <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+            <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+            <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+            <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
           </p>
-        </b-card>
-      </b-col><!--/.col-->
-      <b-col cols="12">
-        <b-card>
-          <div slot="header">
+        </CCard>
+      </CCol><!--/.col-->
+      <CCol cols="12">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Brand Button </strong> <small>Icons only</small>
-          </div>
-          <small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          </CCardHeader>
+          <small>Usage </small> <code>&lt;CButton variant="facebook icon"&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>
-            <b-button size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
-            <b-button size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
-            <b-button size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
-            <b-button size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
-            <b-button size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
-            <b-button size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
-            <b-button size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
-            <b-button size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
-            <b-button size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
-            <b-button size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
-            <b-button size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
-            <b-button size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
-            <b-button size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
-            <b-button size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
-            <b-button size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
-            <b-button size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
-            <b-button size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
-            <b-button size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
-            <b-button size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
-            <b-button size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
-            <b-button size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
-            <b-button size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
-            <b-button size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
-            <b-button size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
-            <b-button size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
+            <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+            <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+            <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+            <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+            <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+            <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+            <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+            <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+            <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+            <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+            <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+            <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+            <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+            <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+            <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+            <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+            <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+            <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+            <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+            <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+            <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+            <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+            <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+            <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+            <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
           </p>
           <h6>Size Normal</h6>
           <p>
-            <b-button variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
-            <b-button variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
-            <b-button variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
-            <b-button variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
-            <b-button variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
-            <b-button variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
-            <b-button variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
-            <b-button variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
-            <b-button variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
-            <b-button variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
-            <b-button variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
-            <b-button variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
-            <b-button variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
-            <b-button variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
-            <b-button variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
-            <b-button variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
-            <b-button variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
-            <b-button variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
-            <b-button variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
-            <b-button variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
-            <b-button variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
-            <b-button variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
-            <b-button variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
-            <b-button variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
-            <b-button variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
+            <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+            <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+            <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+            <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+            <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+            <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+            <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+            <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+            <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+            <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+            <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+            <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+            <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+            <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+            <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+            <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+            <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+            <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+            <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+            <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+            <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+            <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+            <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+            <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+            <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
           </p>
           <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
-            <b-button size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
-            <b-button size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
-            <b-button size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
-            <b-button size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
-            <b-button size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
-            <b-button size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
-            <b-button size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
-            <b-button size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
-            <b-button size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
-            <b-button size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
-            <b-button size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
-            <b-button size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
-            <b-button size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
-            <b-button size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
-            <b-button size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
-            <b-button size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
-            <b-button size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
-            <b-button size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
-            <b-button size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
-            <b-button size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
-            <b-button size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
-            <b-button size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
-            <b-button size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
-            <b-button size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
-            <b-button size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
+            <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+            <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+            <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+            <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+            <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+            <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+            <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+            <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+            <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+            <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+            <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+            <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+            <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+            <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+            <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+            <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+            <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+            <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+            <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+            <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+            <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+            <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+            <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+            <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+            <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
           </p>
-        </b-card>
-      </b-col><!--/.col-->
+        </CCard>
+      </CCol><!--/.col-->
 
-      <b-col cols="12">
-        <b-card>
-          <div slot="header">
+      <CCol cols="12">
+        <CCard>
+          <CCardHeader slot="header">
             <strong>Brand Button </strong> <small>Text only</small>
-          </div>
-          <small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          </CCardHeader>
+          <small>Usage </small> <code>&lt;CButton variant="facebook text"&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>
-            <b-button size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
-            <b-button size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
-            <b-button size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
-            <b-button size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
-            <b-button size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
-            <b-button size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
-            <b-button size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
-            <b-button size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
-            <b-button size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
-            <b-button size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
-            <b-button size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
-            <b-button size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
-            <b-button size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
-            <b-button size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
-            <b-button size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
-            <b-button size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
-            <b-button size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
-            <b-button size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
-            <b-button size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
-            <b-button size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
-            <b-button size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
-            <b-button size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
-            <b-button size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
-            <b-button size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
-            <b-button size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
+            <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+            <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+            <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+            <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+            <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+            <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+            <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+            <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+            <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+            <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+            <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+            <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+            <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+            <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+            <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+            <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+            <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+            <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+            <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+            <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+            <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+            <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+            <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+            <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+            <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
           </p>
           <h6>Size Normal</h6>
           <p>
-            <b-button variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
-            <b-button variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
-            <b-button variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
-            <b-button variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
-            <b-button variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
-            <b-button variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
-            <b-button variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
-            <b-button variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
-            <b-button variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
-            <b-button variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
-            <b-button variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
-            <b-button variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
-            <b-button variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
-            <b-button variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
-            <b-button variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
-            <b-button variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
-            <b-button variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
-            <b-button variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
-            <b-button variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
-            <b-button variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
-            <b-button variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
-            <b-button variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
-            <b-button variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
-            <b-button variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
-            <b-button variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
+            <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+            <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+            <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+            <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+            <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+            <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+            <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+            <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+            <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+            <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+            <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+            <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+            <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+            <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+            <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+            <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+            <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+            <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+            <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+            <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+            <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+            <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+            <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+            <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+            <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
           </p>
           <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
-            <b-button size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
-            <b-button size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
-            <b-button size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
-            <b-button size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
-            <b-button size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
-            <b-button size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
-            <b-button size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
-            <b-button size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
-            <b-button size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
-            <b-button size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
-            <b-button size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
-            <b-button size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
-            <b-button size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
-            <b-button size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
-            <b-button size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
-            <b-button size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
-            <b-button size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
-            <b-button size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
-            <b-button size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
-            <b-button size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
-            <b-button size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
-            <b-button size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
-            <b-button size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
-            <b-button size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
-            <b-button size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
+            <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+            <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+            <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+            <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+            <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+            <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+            <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+            <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+            <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+            <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+            <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+            <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+            <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+            <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+            <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+            <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+            <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+            <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+            <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+            <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+            <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+            <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+            <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+            <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+            <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
           </p>
-        </b-card>
-      </b-col><!--/.col-->
-    </b-row><!--/.row-->
+        </CCard>
+      </CCol><!--/.col-->
+    </CRow><!--/.row-->
   </div>
 </template>
 
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index fe7cf15c..511da4fd 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,306 +1,190 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12" >
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols="12" >
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <CButton variant="success" to="/dashboard" disabled>sdjk</CButton>
-              <CButton variant="success" to="/dashboard" role="smh">sdjk</CButton>
-
-              <CButton variant="success" :pressed.sync="myToggle">sdjk</CButton>
-              <CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton>
-
-              <CButton variant="outline-success" pressed>sdjk</CButton>
-
-              <CButton square block ghost>sdjk</CButton>
-              </br></br>
-              <CButton pill ghost>sdjk</CButton>
-              <CButton block size="sm" variant="success" pill square  :pressed="false" disabled>sdjk</CButton>
-              <CButton block size="sm" variant="success" pill square to="/dashboard" disabled>sdjk</CButton>
-
-              <CButton block size="lg" variant="info" square >sdjk</CButton>
-
-              </br></br>
-              <CEmbed
-                tag="p"
-                aspect="16by9"
-                src="https://www.youtube.com/embed/axTSc3e6wu8"
-                frameborder="0"
-                allow="accelerometer;autoplay; encrypted-media; gyroscope; picture-in-picture"
-              >
-
-              </CEmbed>
-              <b-nav pills>
-                <b-nav-item active>Active</b-nav-item>
-                <b-nav-item>Link</b-nav-item>
-                <b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
-                  <b-dropdown-item>one</b-dropdown-item>
-                  <b-dropdown-item>two</b-dropdown-item>
-                  <b-dropdown-divider></b-dropdown-divider>
-                  <b-dropdown-item>three</b-dropdown-item>
-                </b-nav-item-dropdown>
-              </b-nav>
-              <b-nav pills>
-                <b-nav-item active>Active</b-nav-item>
-                <b-nav-item>Link</b-nav-item>
-                <!-- <c-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
-                  <b-dropdown-item>one</b-dropdown-item>
-                  <b-dropdown-item>two</b-dropdown-item>
-                  <b-dropdown-divider></b-dropdown-divider>
-                  <b-dropdown-item>three</b-dropdown-item>
-                </c-nav-item-dropdown> -->
-              </b-nav>
-              <CButtonToolbar role="smh">
-                <c-button-group>
-
-                  <b-button>One</b-button>
-                  <b-button>Two</b-button>
-                  <b-button>Three</b-button>
-                  <b-button>Four</b-button>
-                  <b-button class="d-sm-down-none">Five</b-button>
-                </c-button-group>
-                <c-button-group>
-                  <b-button>One</b-button>
-                  <b-button>Two</b-button>
-                  <b-button>Three</b-button>
-                  <b-button>Four</b-button>
-                  <b-button class="d-sm-down-none">Five</b-button>
-                </c-button-group>
-              </CButtonToolbar>
+              <CButtonGroup>
+                <CButton>One</CButton>
+                <CButton>Two</CButton>
+                <CButton>Three</CButton>
+                <CButton>Four</CButton>
+                <CButton class="d-sm-down-none">Five</CButton>
+              </CButtonGroup>
               <br><br>
-              <b-button-group>
-                <b-button class="d-sm-down-none" variant="success">Success</b-button>
-                <b-button variant="info">Info</b-button>
-                <b-button variant="warning">Warn</b-button>
-                <b-button class="d-sm-down-none" variant="primary">Primary</b-button>
-                <b-button variant="danger">Danger</b-button>
-                <b-button variant="link">Link</b-button>
-              </b-button-group>
+              <CButtonGroup>
+                <CButton class="d-sm-down-none" variant="success">Success</CButton>
+                <CButton variant="info">Info</CButton>
+                <CButton variant="warning">Warn</CButton>
+                <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
+                <CButton variant="danger">Danger</CButton>
+                <CButton variant="link">Link</CButton>
+              </CButtonGroup>
             </div>
-          </b-card>
-        </b-col>
-        <CDropdown no-caret show>
-          <img slot="button-content"
-            src="img/avatars/6.jpg"
-            class="img-avatar"
-            alt="admin@bootstrapmaster.com"
-          />
-
-          <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
-          <b-dropdown-item><i class="fa fa-bell-o" /> Updates
-            <c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
-            <c-badge variant="success">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-tasks" /> Tasks
-            <c-badge variant="danger">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-comments" /> Comments
-            <c-badge variant="warning">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-header
-            tag="div"
-            class="text-center">
-            <strong>Settings</strong>
-          </b-dropdown-header>
-          <b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-usd" /> Payments
-            <c-badge variant="secondary">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-file" /> Projects
-            <c-badge variant="primary">{{ itemsCount }}</c-badge>
-          </b-dropdown-item>
-          <b-dropdown-divider ></b-dropdown-divider >
-          <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
-        </CDropdown>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
-            </div>
+            </CCardHeader>
             <div>
-              <b-button-group>
-                <b-button>Left</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Right</b-button>
-              </b-button-group>
+              <CButtonGroup>
+                <CButton>Left</CButton>
+                <CButton>Middle</CButton>
+                <CButton>Right</CButton>
+              </CButtonGroup>
               <br><br>
-              <b-button-group size="sm">
-                <b-button>Left</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Right</b-button>
-              </b-button-group>
+              <CButtonGroup size="sm">
+                <CButton>Left</CButton>
+                <CButton>Middle</CButton>
+                <CButton>Right</CButton>
+              </CButtonGroup>
               <br><br>
-              <b-button-group size="lg">
-                <b-button>Left</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Right</b-button>
-              </b-button-group>
+              <CButtonGroup size="lg">
+                <CButton>Left</CButton>
+                <CButton>Middle</CButton>
+                <CButton>Right</CButton>
+              </CButtonGroup>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
-            </div>
+            </CCardHeader>
             <div>
-              <b-button-group>
-                <b-button class="d-sm-down-none">Button 1</b-button>
-                <b-button class="d-sm-down-none">Button 2</b-button>
-                <b-dropdown right text="Menu" variant="success">
-                  <b-dropdown-item>Item 1</b-dropdown-item>
-                  <b-dropdown-item>Item 2</b-dropdown-item>
-                  <b-dropdown-divider></b-dropdown-divider>
-                  <b-dropdown-item>Item 3</b-dropdown-item>
-                </b-dropdown>
-                <b-button class="d-sm-down-none">Button 3</b-button>
-                <b-dropdown right split text="Split Menu" variant="info">
-                  <b-dropdown-item>Item 1</b-dropdown-item>
-                  <b-dropdown-item>Item 2</b-dropdown-item>
-                  <b-dropdown-divider></b-dropdown-divider>
-                  <b-dropdown-item>Item 3</b-dropdown-item>
-                </b-dropdown>
-              </b-button-group>
+              <CButtonGroup>
+                <CButton class="d-sm-down-none">Button 1</CButton>
+                <CButton class="d-sm-down-none">Button 2</CButton>
+                <CDropdown right text="Menu" variant="success">
+                  <CDropdownItem>Item 1</CDropdownItem>
+                  <CDropdownItem>Item 2</CDropdownItem>
+                  <CDropdownDivider></CDropdownDivider>
+                  <CDropdownItem>Item 3</CDropdownItem>
+                </CDropdown>
+                <CButton class="d-sm-down-none">Button 3</CButton>
+                <CDropdown right split text="Split Menu" variant="info">
+                  <CDropdownItem>Item 1</CDropdownItem>
+                  <CDropdownItem>Item 2</CDropdownItem>
+                  <CDropdownDivider></CDropdownDivider>
+                  <CDropdownItem>Item 3</CDropdownItem>
+                </CDropdown>
+              </CButtonGroup>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
-            </div>
+            </CCardHeader>
             <div>
-              <b-button-group vertical>
-                <b-button>Top</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Bottom</b-button>
-              </b-button-group>
+              <CButtonGroup vertical>
+                <CButton>Top</CButton>
+                <CButton>Middle</CButton>
+                <CButton>Bottom</CButton>
+              </CButtonGroup>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <b-button-toolbar key-nav aria-label="Toolbar with button groups">
-                <b-button-group class="mx-1">
-                  <b-btn class="d-sm-down-none">&laquo;</b-btn>
-                  <b-btn>&lsaquo;</b-btn>
-                </b-button-group>
-                <b-button-group class="mx-1">
-                  <b-btn class="d-sm-down-none">Edit</b-btn>
-                  <b-btn>Undo</b-btn>
-                  <b-btn>Redo</b-btn>
-                </b-button-group>
-                <b-button-group class="mx-1">
-                  <b-btn>&rsaquo;</b-btn>
-                  <b-btn class="d-sm-down-none">&raquo;</b-btn>
-                </b-button-group>
-              </b-button-toolbar>
+              <CButtonToolbar key-nav aria-label="Toolbar with button groups">
+                <CButtonGroup class="mx-1">
+                  <CButton class="d-sm-down-none">&laquo;</CButton>
+                  <CButton>&lsaquo;</CButton>
+                </CButtonGroup>
+                <CButtonGroup class="mx-1">
+                  <CButton class="d-sm-down-none">Edit</CButton>
+                  <CButton>Undo</CButton>
+                  <CButton>Redo</CButton>
+                </CButtonGroup>
+                <CButtonGroup class="mx-1">
+                  <CButton>&rsaquo;</CButton>
+                  <CButton class="d-sm-down-none">&raquo;</CButton>
+                </CButtonGroup>
+              </CButtonToolbar>
             </div>
             <hr class="d-sm-down-none"/>
             <div>
-              <b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
-                <b-button-group size="sm" class="mx-1">
-                  <b-btn>New</b-btn>
-                  <b-btn>Edit</b-btn>
-                </b-button-group>
-                <b-input-group size="sm" class="w-25 mx-1">
-                  <b-input-group-prepend>
-                    <b-input-group-text>$</b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-input value="100" class="text-right"></b-form-input>
-                  <b-input-group-append>
-                    <b-input-group-text>.00</b-input-group-text>
-                  </b-input-group-append>
-                </b-input-group>
-                <b-input-group  size="sm" class="w-25 mx-1">
-                  <b-input-group-prepend>
-                    <b-input-group-text>Size</b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
-                </b-input-group>
-                <b-button-group  size="sm" class="mx-1">
-                  <b-btn>Save</b-btn>
-                  <b-btn>Cancel</b-btn>
-                </b-button-group>
-              </b-button-toolbar>
+              <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
+                <CButtonGroup size="sm" class="mx-1">
+                  <CButton>New</CButton>
+                  <CButton>Edit</CButton>
+                </CButtonGroup>
+                <CFormInput
+                  class="mb-0 w-25 mx-1"
+                  size="sm"
+                  prepend="$"
+                  append=".00"
+                  value="100"
+                />
+                <CFormSelect
+                  class="mb-0 w-25 mx-1"
+                  size="sm"
+                  prepend="Size"
+                  value="Medium"
+                  :options="['Large','Medium','Small']"
+                  custom
+                />
+                <CButtonGroup  size="sm" class="mx-1">
+                  <CButton>Save</CButton>
+                  <CButton>Cancel</CButton>
+                </CButtonGroup>
+              </CButtonToolbar>
             </div>
             <hr/>
             <div>
-              <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
-                <b-button-group class="mx-1 d-sm-down-none">
-                  <b-btn>New</b-btn>
-                  <b-btn>Edit</b-btn>
-                  <b-btn>Undo</b-btn>
-                </b-button-group>
-                <b-dropdown class="mx-1" right text="menu">
-                  <b-dropdown-item>Item 1</b-dropdown-item>
-                  <b-dropdown-item>Item 2</b-dropdown-item>
-                  <b-dropdown-item>Item 3</b-dropdown-item>
-                </b-dropdown>
-                <b-button-group class="mx-1">
-                  <b-btn>Save</b-btn>
-                  <b-btn>Cancel</b-btn>
-                </b-button-group>
-              </b-button-toolbar>
+              <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
+                <CButtonGroup class="mx-1 d-sm-down-none">
+                  <CButton>New</CButton>
+                  <CButton>Edit</CButton>
+                  <CButton>Undo</CButton>
+                </CButtonGroup>
+                <CDropdown
+                  class="mx-1"
+                  placement="bottom-end"
+                  button-content="Menu"
+                >
+                  <CDropdownItem>Item 1</CDropdownItem>
+                  <CDropdownItem>Item 2</CDropdownItem>
+                  <CDropdownItem>Item 3</CDropdownItem>
+                </CDropdown>
+                <CButtonGroup class="mx-1">
+                  <CButton>Save</CButton>
+                  <CButton>Cancel</CButton>
+                </CButtonGroup>
+              </CButtonToolbar>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
-
 <script>
-// import CButton from './CButton'
-// import CButtonGroup from './CButtonGroup'
-// import CButtonToolbar from './CButtonToolbar'
-
-// import CEmbed from './CEmbed'
-// import CDropdown from '../../containers/CDropdown'
-
 export default {
   name: 'button-groups',
-  // components: {
-  //   CButtonGroup,
-  //   CButtonToolbar,
-  //   CButton
-  // },
-  // components: {
-  //   CEmbed,
-  //   CDropdown
-  // },
   data () {
     return {
       myToggle: false,
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 598d0086..030eb6ec 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,232 +1,244 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <b-dropdown id="ddown1" text="Dropdown Button" class="m-2">
-                <b-dropdown-item>First Action</b-dropdown-item>
-                <b-dropdown-item>Second Action</b-dropdown-item>
-                <b-dropdown-item>Third Action</b-dropdown-item>
-                <b-dropdown-divider></b-dropdown-divider>
-                <b-dropdown-item>Something else here...</b-dropdown-item>
-                <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-              </b-dropdown>
-            </div>
+              <CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownDivider></CDropdownDivider>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdown>
+            </div>
+            <!-- <div>
+              <CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
+                <CDropdownItem>I'm a button</CDropdownItem>
+                <CDropdownItem>I'm also a button</CDropdownItem>
+                <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
+                <CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
+              </CDropdown>
+            </div> -->
             <div>
-              <b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2">
-                <b-dropdown-item-button>I'm a button</b-dropdown-item-button>
-                <b-dropdown-item-button>I'm also a button</b-dropdown-item-button>
-                <b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
-                <b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
-              </b-dropdown>
+              <CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
+                <CDropdownItem>First item</CDropdownItem>
+                <CDropdownItem>Second item</CDropdownItem>
+                <CDropdownDivider></CDropdownDivider>
+                <CDropdownItem>Separated Item</CDropdownItem>
+              </CDropdown>
             </div>
             <div>
-              <b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
-                <b-dropdown-item-button>First item</b-dropdown-item-button>
-                <b-dropdown-item-button>Second item</b-dropdown-item-button>
-                <b-dropdown-divider></b-dropdown-divider>
-                <b-dropdown-item-button>Separated Item</b-dropdown-item-button>
-              </b-dropdown>
-            </div>
-            <div>
-              <b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
-                <b-dropdown-header>Dropdown header</b-dropdown-header>
-                <b-dropdown-item-button>First item</b-dropdown-item-button>
-                <b-dropdown-item-button>Second Item</b-dropdown-item-button>
-              </b-dropdown>
-            </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+              <CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
+                <CDropdownHeader>Dropdown header</CDropdownHeader>
+                <CDropdownItem>First item</CDropdownItem>
+                <CDropdownItem>Second Item</CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard
+
+            >
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here</b-dropdown-item>
-              </b-dropdown>
-              <b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here</b-dropdown-item>
-              </b-dropdown>
+              <CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
+              <CDropdown id="ddown-right"
+                         placement="bottom-end"
+                         button-content="Right align"
+                         variant="primary"
+                         class="m-2"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
             </div>
             <div>
-              <b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here</b-dropdown-item>
-              </b-dropdown>
+              <CDropdown id="ddown-dropup"
+                         button-content="Drop-Up"
+                         variant="info"
+                         class="m-2"
+                         dropup
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
             </div>
             <div>
-              <b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here</b-dropdown-item>
-              </b-dropdown>
+              <CDropdown id="ddown-offset"
+                         :offset="25"
+                         button-content="Offset Dropdown"
+                         class="m-2"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
             </div>
             <div>
-              <b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here...</b-dropdown-item>
-              </b-dropdown>
-            </div>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+              <CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard
+
+            >
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-dropdown variant="link" size="lg" no-caret>
-                <template slot="button-content">
-                  &#x1f50d;<span class="sr-only">Search</span>
-                </template>
+              <CDropdown variant="link"
+                         size="lg"
+                         button-content="&#x1f50d;<span class='sr-only'>Search</span>"
+                         no-caret
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard
 
-                <b-dropdown-item href="#">Action</b-dropdown-item>
-                <b-dropdown-item href="#">Another action</b-dropdown-item>
-                <b-dropdown-item href="#">Something else here...</b-dropdown-item>
-              </b-dropdown>
-            </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+            >
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
-                <b-dropdown-item-button>Action</b-dropdown-item-button>
-                <b-dropdown-item-button>Another action</b-dropdown-item-button>
-                <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-              </b-dropdown>
-              <b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2">
-                <b-dropdown-item-button>Action</b-dropdown-item-button>
-                <b-dropdown-item-button>Another action</b-dropdown-item-button>
-                <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
-              </b-dropdown>
+              <CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
+              <CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
               <br>
-              <b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2">
-                <b-dropdown-item-button>Action</b-dropdown-item-button>
-                <b-dropdown-item-button>Another action</b-dropdown-item-button>
-                <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
-              </b-dropdown>
-              <b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2">
-                <b-dropdown-item-button>Action</b-dropdown-item-button>
-                <b-dropdown-item-button>Another action</b-dropdown-item-button>
-                <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
-              </b-dropdown>
-            </div>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+              <CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+              <CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard
+
+            >
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
-            </div>
+            </CCardHeader>
             <div>
-              <b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
+              <CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
                 <div role="group" aria-lableledby="header1">
-                  <b-dropdown-header id="header1">Groups</b-dropdown-header>
-                  <b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button>
-                  <b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button>
+                  <CDropdownHeader id="header1">Groups</CDropdownHeader>
+                  <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
+                  <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
                 </div>
                 <div role="group" aria-lableledby="header2">
-                  <b-dropdown-header id="header2">Users</b-dropdown-header>
-                  <b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button>
-                  <b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button>
+                  <CDropdownHeader id="header2">Users</CDropdownHeader>
+                  <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
+                  <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
                 </div>
-                <b-dropdown-divider></b-dropdown-divider>
-                <b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
-              </b-dropdown>
-            </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+                <CDropdownDivider></CDropdownDivider>
+                <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard
+
+            >
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
-            </div>
-            <b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-            <b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0">
-              <b-dropdown-item>First Action</b-dropdown-item>
-              <b-dropdown-item>Second Action</b-dropdown-item>
-              <b-dropdown-item>Third Action</b-dropdown-item>
-            </b-dropdown>
-          </b-card>
-        </b-col>
-      </b-row>
+            </CCardHeader>
+            <CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index b2b34c2f..c040accb 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -1,687 +1,687 @@
 <template>
   <div class="animated fadeIn">
-    <b-card no-body>
-      <b-card-header>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Standard buttons</strong>
-      </b-card-header>
-      <b-card-body>
-        <b-row class="align-items-center">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="align-items-center">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link">Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Active State
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="primary" aria-pressed="true">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="secondary" aria-pressed="true">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="success" aria-pressed="true">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="warning" aria-pressed="true">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="danger" aria-pressed="true">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="info" aria-pressed="true">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="light" aria-pressed="true">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="dark" aria-pressed="true">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="link" aria-pressed="true">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Disabled
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary" disabled>Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary" disabled>Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success" disabled>Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning" disabled>Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger" disabled>Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info" disabled>Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light" disabled>Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark" disabled>Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link" disabled>Link</b-button>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary" disabled>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary" disabled>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success" disabled>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning" disabled>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger" disabled>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info" disabled>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light" disabled>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark" disabled>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link" disabled>Link</CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Outline Buttons</strong>
-      </b-card-header>
-      <b-card-body>
+      </CCardHeader>
+      <CCardBody slot="body">
         <p>
           Use <code>variant="outline-*"</code> prop
         </p>
-        <b-row class="align-items-center">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-primary">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-secondary">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-success">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-warning">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-danger">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-info">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-light">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-dark">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-primary">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-secondary">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-success">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-warning">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-danger">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-info">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-light">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-dark">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Active State
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-primary" aria-pressed="true">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-secondary" aria-pressed="true">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-success" aria-pressed="true">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-warning" aria-pressed="true">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-danger" aria-pressed="true">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-info" aria-pressed="true">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-light" aria-pressed="true">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="outline-dark" aria-pressed="true">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Disabled
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-primary" disabled>Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-secondary" disabled>Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-success" disabled>Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-warning" disabled>Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-danger" disabled>Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-info" disabled>Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-light" disabled>Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="outline-dark" disabled>Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-primary" disabled>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-secondary" disabled>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-success" disabled>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-warning" disabled>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-danger" disabled>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-info" disabled>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-light" disabled>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="outline-dark" disabled>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Ghost Buttons</strong>
-      </b-card-header>
-      <b-card-body>
+      </CCardHeader>
+      <CCardBody slot="body">
         <p>
           Use
-          <code>.btn-ghost-*</code> class for ghost buttons.
+          <code>ghost</code> prop for ghost buttons.
         </p>
-        <b-row class="align-items-center">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-primary">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-secondary">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-success">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-warning">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-danger">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-info">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-light">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-dark">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
+            <CButton block ghost variant="primary">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="secondary">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="success">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="warning">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="danger">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="info">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="light">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="dark">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Active State
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-primary" aria-pressed="true">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-secondary" aria-pressed="true">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-success" aria-pressed="true">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-warning" aria-pressed="true">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-danger" aria-pressed="true">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-info" aria-pressed="true">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-light" aria-pressed="true">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block pressed variant="ghost-dark" aria-pressed="true">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Disabled
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-primary" disabled>Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-secondary" disabled>Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-success" disabled>Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-warning" disabled>Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-danger" disabled>Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-info" disabled>Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-light" disabled>Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="ghost-dark" disabled>Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="primary" disabled>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="secondary" disabled>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="success" disabled>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="warning" disabled>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="danger" disabled>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="info" disabled>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="light" disabled>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block ghost variant="dark" disabled>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Square Buttons</strong>
-      </b-card-header>
-      <b-card-body>
+      </CCardHeader>
+      <CCardBody slot="body">
         <p>
           Use
-          <code>.btn-square</code> class for square buttons.
+          <code>square</code> prop for square buttons.
         </p>
-        <b-row class="align-items-center">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary" class="btn-square">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary" class="btn-square">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success" class="btn-square">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning" class="btn-square">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger" class="btn-square">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info" class="btn-square">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light" class="btn-square">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark" class="btn-square">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link" class="btn-square">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary" square>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary" square>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success" square>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning" square>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger" square>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info" square>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light" square>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark" square>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link" square>Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Active State
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="primary" class="btn-square" aria-pressed="true">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="secondary" class="btn-square" aria-pressed="true">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="success" class="btn-square" aria-pressed="true">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="warning" class="btn-square" aria-pressed="true">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="danger" class="btn-square" aria-pressed="true">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="info" class="btn-square" aria-pressed="true">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="light" class="btn-square" aria-pressed="true">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="dark" class="btn-square" aria-pressed="true">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="link" class="btn-square" aria-pressed="true">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Disabled
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary" class="btn-square" disabled>Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary" class="btn-square" disabled>Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success" class="btn-square" disabled>Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning" class="btn-square" disabled>Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger" class="btn-square" disabled>Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info" class="btn-square" disabled>Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light" class="btn-square" disabled>Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark" class="btn-square" disabled>Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link" class="btn-square" disabled>Link</b-button>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary" square disabled>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary" square disabled>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success" square disabled>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning" square disabled>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger" square disabled>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info" square disabled>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light" square disabled>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark" square disabled>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link" square disabled>Link</CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Pill Buttons</strong>
-      </b-card-header>
-      <b-card-body>
+      </CCardHeader>
+      <CCardBody slot="body">
         <p>
           Use
-          <code>.btn-pill</code> class for pill buttons.
+          <code>pill</code> prop for pill buttons.
         </p>
-        <b-row class="align-items-center">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary" class="btn-pill">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary" class="btn-pill">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success" class="btn-pill">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning" class="btn-pill">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger" class="btn-pill">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info" class="btn-pill">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light" class="btn-pill">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark" class="btn-pill">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link" class="btn-pill">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary" pill>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary" pill>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success" pill>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning" pill>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger" pill>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info" pill>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light" pill>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark" pill>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link" pill>Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Active State
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="primary" class="btn-pill" aria-pressed="true">Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="secondary" class="btn-pill" aria-pressed="true">Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="success" class="btn-pill" aria-pressed="true">Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="warning" class="btn-pill" aria-pressed="true">Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="danger" class="btn-pill" aria-pressed="true">Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="info" class="btn-pill" aria-pressed="true">Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="light" class="btn-pill" aria-pressed="true">Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="dark" class="btn-pill" aria-pressed="true">Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button pressed block variant="link" class="btn-pill" aria-pressed="true">Link</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="12" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="12" xl class="mb-3 mb-xl-0">
             Disabled
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="primary" class="btn-pill" disabled>Primary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="secondary" class="btn-pill" disabled>Secondary</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="success" class="btn-pill" disabled>Success</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="warning" class="btn-pill" disabled>Warning</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="danger" class="btn-pill" disabled>Danger</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="info" class="btn-pill" disabled>Info</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="light" class="btn-pill" disabled>Light</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="dark" class="btn-pill" disabled>Dark</b-button>
-          </b-col>
-          <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <b-button block variant="link" class="btn-pill" disabled>Link</b-button>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="primary" pill disabled>Primary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="secondary" pill disabled>Secondary</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="success" pill disabled>Success</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="warning" pill disabled>Warning</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="danger" pill disabled>Danger</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="info" pill disabled>Info</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="light" pill disabled>Light</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="dark" pill disabled>Dark</CButton>
+          </CCol>
+          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+            <CButton block variant="link" pill disabled>Link</CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>Sizes</strong>
-      </b-card-header>
-      <b-card-body>
+      </CCardHeader>
+      <CCardBody slot="body">
         <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
-        <b-row class="align-items-center">
-          <b-col cols="2" xl class="mb-3 mb-xl-0">
+        <CRow class="align-items-center">
+          <CCol cols="2" xl class="mb-3 mb-xl-0">
             Small
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="primary" size="sm">Standard Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="outline-secondary" size="sm">Outline Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button size="sm" variant="ghost-success">Ghost Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="warning" size="sm" class="btn-square">Square Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="danger" size="sm" class="btn-pill">Pill Button</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="2" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="primary" size="sm">Standard Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="outline-secondary" size="sm">Outline Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton size="sm" ghost variant="success">Ghost Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="warning" size="sm" square>Square Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="danger" size="sm" pill>Pill Button</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="2" xl class="mb-3 mb-xl-0">
             Normal
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="primary">Standard Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="outline-secondary" >Outline Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="ghost-success">Ghost Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="warning" class="btn-square">Square Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="danger" class="btn-pill">Pill Button</b-button>
-          </b-col>
-        </b-row>
-        <b-row class="align-items-center mt-3">
-          <b-col cols="2" xl class="mb-3 mb-xl-0">
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="primary">Standard Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="outline-secondary" >Outline Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton ghost variant="success">Ghost Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="warning" square>Square Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="danger" pill>Pill Button</CButton>
+          </CCol>
+        </CRow>
+        <CRow class="align-items-center mt-3">
+          <CCol cols="2" xl class="mb-3 mb-xl-0">
             Large
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="primary" size="lg">Standard Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="outline-secondary" size="lg">Outline Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="ghost-success" size="lg">Ghost Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="warning" size="lg" class="btn-square">Square Button</b-button>
-          </b-col>
-          <b-col cols="2" class="mb-3 mb-xl-0 text-center">
-            <b-button variant="danger" size="lg" class="btn-pill">Pill Button</b-button>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body>
-      <b-card-header>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="primary" size="lg">Standard Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="outline-secondary" size="lg">Outline Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton ghost variant="success" size="lg">Ghost Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="warning" size="lg" square>Square Button</CButton>
+          </CCol>
+          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+            <CButton variant="danger" size="lg" pill>Pill Button</CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
         <strong>With Icons</strong>
-      </b-card-header>
-      <b-card-body>
-        <b-row class="align-items-center mt-3">
-          <b-col sm xs="12" class="text-center mt-3">
-            <b-button variant="primary">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="align-items-center mt-3">
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="primary">
               <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
-            </b-button>
-          </b-col>
-          <b-col sm xs="12" class="text-center mt-3">
-            <b-button variant="secondary" outline>
+            </CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="secondary" outline>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
-            </b-button>
-          </b-col>
-          <b-col sm xs="12" class="text-center mt-3">
-            <b-button variant="ghost-success">
+            </CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="success">
               <i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
-            </b-button>
-          </b-col>
-          <b-col sm xs="12" class="text-center mt-3">
-            <b-button variant="warning" class="btn-square">
+            </CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="warning" square>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
-            </b-button>
-          </b-col>
-          <b-col sm xs="12" class="text-center mt-3">
-            <b-button variant="danger" class="btn-pill">
+            </CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="danger" pill>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
-            </b-button>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card>
-      <div slot="header">
+            </CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader slot="header">
         <strong>Toggle pressed state</strong>
-      </div>
-      <b-row>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-        <b-col sm xs="12" class="text-center mt-3">
-          <b-button variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</b-button>
-        </b-col>
-      </b-row>
-    </b-card>
-    <b-row>
-      <b-col xs="12" md="6">
-        <b-card>
-          <div slot="header">
-            <strong>Block Level b-buttons</strong> <small>Add this <code>block</code></small>
-          </div>
-          <b-button size="lg" variant="secondary" block>Block level button</b-button>
-          <b-button size="lg" variant="primary" block>Block level button</b-button>
-          <b-button size="lg" variant="success" block>Block level button</b-button>
-          <b-button size="lg" variant="info" block>Block level button</b-button>
-          <b-button size="lg" variant="warning" block>Block level button</b-button>
-          <b-button size="lg" variant="danger" block>Block level button</b-button>
-          <b-button size="lg" variant="link" block>Block level button</b-button>
-        </b-card>
-      </b-col>
-      <b-col xs="12" md="6">
-      <b-card>
-          <div slot="header">
-            <strong>Block Level b-buttons</strong> <small>Add this <code>block</code></small>
-          </div>
-          <b-button size="lg" variant="outline-secondary" block>Block level button</b-button>
-          <b-button size="lg" variant="outline-primary" block>Block level button</b-button>
-          <b-button size="lg" variant="outline-success" block>Block level button</b-button>
-          <b-button size="lg" variant="outline-info" block>Block level button</b-button>
-          <b-button size="lg" variant="outline-warning" block>Block level button</b-button>
-          <b-button size="lg" variant="outline-danger" block>Block level button</b-button>
-          <b-button size="lg" variant="ghost-info" block>Block level button</b-button>
-        </b-card>
-      </b-col>
-    </b-row>
+      </CCardHeader>
+      <CRow>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+        <CCol sm xs="12" class="text-center mt-3">
+          <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+        </CCol>
+      </CRow>
+    </CCard>
+    <CRow>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader slot="header">
+            <strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
+          </CCardHeader>
+          <CButton size="lg" variant="secondary" block>Block level button</CButton>
+          <CButton size="lg" variant="primary" block>Block level button</CButton>
+          <CButton size="lg" variant="success" block>Block level button</CButton>
+          <CButton size="lg" variant="info" block>Block level button</CButton>
+          <CButton size="lg" variant="warning" block>Block level button</CButton>
+          <CButton size="lg" variant="danger" block>Block level button</CButton>
+          <CButton size="lg" variant="link" block>Block level button</CButton>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+      <CCard>
+          <CCardHeader slot="header">
+            <strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
+          </CCardHeader>
+          <CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
+          <CButton size="lg" variant="outline-primary" block>Block level button</CButton>
+          <CButton size="lg" variant="outline-success" block>Block level button</CButton>
+          <CButton size="lg" variant="outline-info" block>Block level button</CButton>
+          <CButton size="lg" variant="outline-warning" block>Block level button</CButton>
+          <CButton size="lg" variant="outline-danger" block>Block level button</CButton>
+          <CButton size="lg" ghost variant="info" block>Block level button</CButton>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
 <script>
 export default {
   name: 'standard-buttons',
-  data: () => {
+  data () {
     return { togglePress: false }
   }
 }
diff --git a/src/views/charts/BarExample.vue b/src/views/charts/BarExample.vue
index 6d471115..dd1414f7 100644
--- a/src/views/charts/BarExample.vue
+++ b/src/views/charts/BarExample.vue
@@ -3,7 +3,7 @@ import { Bar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
-  // name: 'BarExample',
+  name: 'BarExample',
   extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index d8e97afc..ee310d04 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,419 +1,419 @@
 <template>
   <div class="animated fadeIn">
-    <b-card no-body>
-      <b-card-header>
-        <i class="fa fa-picture-o"></i>CoreUI Icons <b-badge variant="info">New</b-badge>
+    <CCard noWrapper>
+      <CCardHeader slot="header">
+        <i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
         <div class="card-header-actions">
           <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
             <small class="text-muted">Github</small>
           </a>
         </div>
-      </b-card-header>
-      <b-card-body>
-        <b-row class="text-center">
-          <b-col cols="6" sm="4" md="3" xl="2">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
             <div>account-logout</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
             <div>action-redo</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
             <div>action-undo</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-align-center icons font-2xl d-block mt-4"></i>
             <div>align-center</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-align-left icons font-2xl d-block mt-4"></i>
             <div>align-left</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-align-right icons font-2xl d-block mt-4"></i>
             <div>align-right</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
             <div>arrow-bottom</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
             <div>arrow-left</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
             <div>arrow-right</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
             <div>arrow-top</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-ban icons font-2xl d-block mt-4"></i>
             <div>ban</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
             <div>basket-loaded</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-bell icons font-2xl d-block mt-4"></i>
             <div>bell</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-bold icons font-2xl d-block mt-4"></i>
             <div>bold</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
             <div>bookmark</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
             <div>briefcase</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
             <div>british-pound</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-brush icons font-2xl d-block mt-4"></i>
             <div>brush</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-calculator icons font-2xl d-block mt-4"></i>
             <div>calculator</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-calendar icons font-2xl d-block mt-4"></i>
             <div>calendar</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cart icons font-2xl d-block mt-4"></i>
             <div>cart</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-chart icons font-2xl d-block mt-4"></i>
             <div>chart</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-check icons font-2xl d-block mt-4"></i>
             <div>check</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
             <div>chevron-bottom</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
             <div>chevron-left</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
             <div>chevron-right</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
             <div>chevron-top</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
             <div>circle-check</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
             <div>circle-x</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cloud icons font-2xl d-block mt-4"></i>
             <div>cloud</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
             <div>cloud-download</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
             <div>cloud-upload</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-code icons font-2xl d-block mt-4"></i>
             <div>code</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cog icons font-2xl d-block mt-4"></i>
             <div>cog</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
             <div>comment-square</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
             <div>credit-card</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-cursor icons font-2xl d-block mt-4"></i>
             <div>cursor</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
             <div>dashboard</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-delete icons font-2xl d-block mt-4"></i>
             <div>delete</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-dollar icons font-2xl d-block mt-4"></i>
             <div>dollar</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-drop icons font-2xl d-block mt-4"></i>
             <div>drop</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
             <div>envelope-closed</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
             <div>envelope-letter</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
             <div>envelope-open</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-euro icons font-2xl d-block mt-4"></i>
             <div>euro</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-file icons font-2xl d-block mt-4"></i>
             <div>file</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-globe icons font-2xl d-block mt-4"></i>
             <div>globe</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-graph icons font-2xl d-block mt-4"></i>
             <div>graph</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-home icons font-2xl d-block mt-4"></i>
             <div>home</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-inbox icons font-2xl d-block mt-4"></i>
             <div>inbox</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-info icons font-2xl d-block mt-4"></i>
             <div>info</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-italic icons font-2xl d-block mt-4"></i>
             <div>italic</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
             <div>justify-center</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
             <div>justify-left</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
             <div>justify-right</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-laptop icons font-2xl d-block mt-4"></i>
             <div>laptop</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-layers icons font-2xl d-block mt-4"></i>
             <div>layers</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
             <div>lightbulb</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-list icons font-2xl d-block mt-4"></i>
             <div>list</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
             <div>location-pin</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
             <div>lock-locked</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
             <div>lock-unlocked</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
             <div>magnifying-glass</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-map icons font-2xl d-block mt-4"></i>
             <div>map</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-monitor icons font-2xl d-block mt-4"></i>
             <div>monitor</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-moon icons font-2xl d-block mt-4"></i>
             <div>moon</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-note icons font-2xl d-block mt-4"></i>
             <div>note</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-options icons font-2xl d-block mt-4"></i>
             <div>options</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
             <div>paperclip</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-pencil icons font-2xl d-block mt-4"></i>
             <div>pencil</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-people icons font-2xl d-block mt-4"></i>
             <div>people</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-phone icons font-2xl d-block mt-4"></i>
             <div>phone</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
             <div>pie-chart</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-print icons font-2xl d-block mt-4"></i>
             <div>print</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
             <div>puzzle</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-rss icons font-2xl d-block mt-4"></i>
             <div>rss</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
             <div>screen-desktop</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
             <div>screen-smartphone</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-settings icons font-2xl d-block mt-4"></i>
             <div>settings</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-share icons font-2xl d-block mt-4"></i>
             <div>share</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-shield icons font-2xl d-block mt-4"></i>
             <div>shield</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
             <div>sort-ascending</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
             <div>sort-descending</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-speech icons font-2xl d-block mt-4"></i>
             <div>speech</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
             <div>speedometer</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-star icons font-2xl d-block mt-4"></i>
             <div>star</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-sun icons font-2xl d-block mt-4"></i>
             <div>sun</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-tablet icons font-2xl d-block mt-4"></i>
             <div>tablet</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-tags icons font-2xl d-block mt-4"></i>
             <div>tags</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-task icons font-2xl d-block mt-4"></i>
             <div>task</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
             <div>thumb-down</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
             <div>thumb-up</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-trash icons font-2xl d-block mt-4"></i>
             <div>trash</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-underline icons font-2xl d-block mt-4"></i>
             <div>underline</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-user icons font-2xl d-block mt-4"></i>
             <div>user</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-user-female icons font-2xl d-block mt-4"></i>
             <div>user-female</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
             <div>user-follow</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
             <div>user-unfollow</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-wrench icons font-2xl d-block mt-4"></i>
             <div>wrench</div>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" xl="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-yen icons font-2xl d-block mt-4"></i>
             <div>yen</div>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 <script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index a89a46ac..3ddfa17e 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,1013 +1,1013 @@
 <template>
   <div class="animated fadeIn">
-    <b-card no-body id="new47">
-      <div slot="header">
+    <CCard noWrapper id="new47">
+      <CCardHeader slot="header">
         <i class="fa fa-font-awesome"></i> Flags
-      </div>
-      <b-card-body>
-        <b-row class="text-center">
-          <b-col class="mb-5" cols="12">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
+          <CCol class="mb-5" cols="12">
             For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>
             <div>flag-icon-ad</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ae h1" title="ae" id="ae"></i>
             <div>flag-icon-ae</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-af h1" title="af" id="af"></i>
             <div>flag-icon-af</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ag h1" title="ag" id="ag"></i>
             <div>flag-icon-ag</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ai h1" title="ai" id="ai"></i>
             <div>flag-icon-ai</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-al h1" title="al" id="al"></i>
             <div>flag-icon-al</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-am h1" title="am" id="am"></i>
             <div>flag-icon-am</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ao h1" title="ao" id="ao"></i>
             <div>flag-icon-ao</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-aq h1" title="aq" id="aq"></i>
             <div>flag-icon-aq</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ar h1" title="ar" id="ar"></i>
             <div>flag-icon-ar</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-as h1" title="as" id="as"></i>
             <div>flag-icon-as</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-at h1" title="at" id="at"></i>
             <div>flag-icon-at</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-au h1" title="au" id="au"></i>
             <div>flag-icon-au</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-aw h1" title="aw" id="aw"></i>
             <div>flag-icon-aw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ax h1" title="ax" id="ax"></i>
             <div>flag-icon-ax</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-az h1" title="az" id="az"></i>
             <div>flag-icon-az</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ba h1" title="ba" id="ba"></i>
             <div>flag-icon-ba</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bb h1" title="bb" id="bb"></i>
             <div>flag-icon-bb</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bd h1" title="bd" id="bd"></i>
             <div>flag-icon-bd</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-be h1" title="be" id="be"></i>
             <div>flag-icon-be</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bf h1" title="bf" id="bf"></i>
             <div>flag-icon-bf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bg h1" title="bg" id="bg"></i>
             <div>flag-icon-bg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bh h1" title="bh" id="bh"></i>
             <div>flag-icon-bh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bi h1" title="bi" id="bi"></i>
             <div>flag-icon-bi</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bj h1" title="bj" id="bj"></i>
             <div>flag-icon-bj</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bl h1" title="bl" id="bl"></i>
             <div>flag-icon-bl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bm h1" title="bm" id="bm"></i>
             <div>flag-icon-bm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bn h1" title="bn" id="bn"></i>
             <div>flag-icon-bn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bo h1" title="bo" id="bo"></i>
             <div>flag-icon-bo</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bq h1" title="bq" id="bq"></i>
             <div>flag-icon-bq</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-br h1" title="br" id="br"></i>
             <div>flag-icon-br</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bs h1" title="bs" id="bs"></i>
             <div>flag-icon-bs</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bt h1" title="bt" id="bt"></i>
             <div>flag-icon-bt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bv h1" title="bv" id="bv"></i>
             <div>flag-icon-bv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bw h1" title="bw" id="bw"></i>
             <div>flag-icon-bw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-by h1" title="by" id="by"></i>
             <div>flag-icon-by</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-bz h1" title="bz" id="bz"></i>
             <div>flag-icon-bz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ca h1" title="ca" id="ca"></i>
             <div>flag-icon-ca</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cc h1" title="cc" id="cc"></i>
             <div>flag-icon-cc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cd h1" title="cd" id="cd"></i>
             <div>flag-icon-cd</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cf h1" title="cf" id="cf"></i>
             <div>flag-icon-cf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cg h1" title="cg" id="cg"></i>
             <div>flag-icon-cg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ch h1" title="ch" id="ch"></i>
             <div>flag-icon-ch</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ci h1" title="ci" id="ci"></i>
             <div>flag-icon-ci</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ck h1" title="ck" id="ck"></i>
             <div>flag-icon-ck</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cl h1" title="cl" id="cl"></i>
             <div>flag-icon-cl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cm h1" title="cm" id="cm"></i>
             <div>flag-icon-cm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cn h1" title="cn" id="cn"></i>
             <div>flag-icon-cn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-co h1" title="co" id="co"></i>
             <div>flag-icon-co</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cr h1" title="cr" id="cr"></i>
             <div>flag-icon-cr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cu h1" title="cu" id="cu"></i>
             <div>flag-icon-cu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cv h1" title="cv" id="cv"></i>
             <div>flag-icon-cv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cw h1" title="cw" id="cw"></i>
             <div>flag-icon-cw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cx h1" title="cx" id="cx"></i>
             <div>flag-icon-cx</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cy h1" title="cy" id="cy"></i>
             <div>flag-icon-cy</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-cz h1" title="cz" id="cz"></i>
             <div>flag-icon-cz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-de h1" title="de" id="de"></i>
             <div>flag-icon-de</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-dj h1" title="dj" id="dj"></i>
             <div>flag-icon-dj</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-dk h1" title="dk" id="dk"></i>
             <div>flag-icon-dk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-dm h1" title="dm" id="dm"></i>
             <div>flag-icon-dm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-do h1" title="do" id="do"></i>
             <div>flag-icon-do</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-dz h1" title="dz" id="dz"></i>
             <div>flag-icon-dz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ec h1" title="ec" id="ec"></i>
             <div>flag-icon-ec</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ee h1" title="ee" id="ee"></i>
             <div>flag-icon-ee</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-eg h1" title="eg" id="eg"></i>
             <div>flag-icon-eg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-eh h1" title="eh" id="eh"></i>
             <div>flag-icon-eh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-er h1" title="er" id="er"></i>
             <div>flag-icon-er</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-es h1" title="es" id="es"></i>
             <div>flag-icon-es</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-et h1" title="et" id="et"></i>
             <div>flag-icon-et</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fi h1" title="fi" id="fi"></i>
             <div>flag-icon-fi</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fj h1" title="fj" id="fj"></i>
             <div>flag-icon-fj</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fk h1" title="fk" id="fk"></i>
             <div>flag-icon-fk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fm h1" title="fm" id="fm"></i>
             <div>flag-icon-fm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fo h1" title="fo" id="fo"></i>
             <div>flag-icon-fo</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-fr h1" title="fr" id="fr"></i>
             <div>flag-icon-fr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ga h1" title="ga" id="ga"></i>
             <div>flag-icon-ga</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gb h1" title="gb" id="gb"></i>
             <div>flag-icon-gb</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gd h1" title="gd" id="gd"></i>
             <div>flag-icon-gd</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ge h1" title="ge" id="ge"></i>
             <div>flag-icon-ge</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gf h1" title="gf" id="gf"></i>
             <div>flag-icon-gf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gg h1" title="gg" id="gg"></i>
             <div>flag-icon-gg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gh h1" title="gh" id="gh"></i>
             <div>flag-icon-gh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gi h1" title="gi" id="gi"></i>
             <div>flag-icon-gi</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gl h1" title="gl" id="gl"></i>
             <div>flag-icon-gl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gm h1" title="gm" id="gm"></i>
             <div>flag-icon-gm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gn h1" title="gn" id="gn"></i>
             <div>flag-icon-gn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gp h1" title="gp" id="gp"></i>
             <div>flag-icon-gp</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gq h1" title="gq" id="gq"></i>
             <div>flag-icon-gq</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gr h1" title="gr" id="gr"></i>
             <div>flag-icon-gr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gs h1" title="gs" id="gs"></i>
             <div>flag-icon-gs</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gt h1" title="gt" id="gt"></i>
             <div>flag-icon-gt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gu h1" title="gu" id="gu"></i>
             <div>flag-icon-gu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gw h1" title="gw" id="gw"></i>
             <div>flag-icon-gw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-gy h1" title="gy" id="gy"></i>
             <div>flag-icon-gy</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-hk h1" title="hk" id="hk"></i>
             <div>flag-icon-hk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-hm h1" title="hm" id="hm"></i>
             <div>flag-icon-hm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-hn h1" title="hn" id="hn"></i>
             <div>flag-icon-hn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-hr h1" title="hr" id="hr"></i>
             <div>flag-icon-hr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ht h1" title="ht" id="ht"></i>
             <div>flag-icon-ht</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-hu h1" title="hu" id="hu"></i>
             <div>flag-icon-hu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-id h1" title="id" id="id"></i>
             <div>flag-icon-id</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ie h1" title="ie" id="ie"></i>
             <div>flag-icon-ie</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-il h1" title="il" id="il"></i>
             <div>flag-icon-il</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-im h1" title="im" id="im"></i>
             <div>flag-icon-im</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-in h1" title="in" id="in"></i>
             <div>flag-icon-in</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-io h1" title="io" id="io"></i>
             <div>flag-icon-io</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-iq h1" title="iq" id="iq"></i>
             <div>flag-icon-iq</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ir h1" title="ir" id="ir"></i>
             <div>flag-icon-ir</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-is h1" title="is" id="is"></i>
             <div>flag-icon-is</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-it h1" title="it" id="it"></i>
             <div>flag-icon-it</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-je h1" title="je" id="je"></i>
             <div>flag-icon-je</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-jm h1" title="jm" id="jm"></i>
             <div>flag-icon-jm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-jo h1" title="jo" id="jo"></i>
             <div>flag-icon-jo</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-jp h1" title="jp" id="jp"></i>
             <div>flag-icon-jp</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ke h1" title="ke" id="ke"></i>
             <div>flag-icon-ke</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kg h1" title="kg" id="kg"></i>
             <div>flag-icon-kg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kh h1" title="kh" id="kh"></i>
             <div>flag-icon-kh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ki h1" title="ki" id="ki"></i>
             <div>flag-icon-ki</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-km h1" title="km" id="km"></i>
             <div>flag-icon-km</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kn h1" title="kn" id="kn"></i>
             <div>flag-icon-kn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kp h1" title="kp" id="kp"></i>
             <div>flag-icon-kp</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kr h1" title="kr" id="kr"></i>
             <div>flag-icon-kr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kw h1" title="kw" id="kw"></i>
             <div>flag-icon-kw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ky h1" title="ky" id="ky"></i>
             <div>flag-icon-ky</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-kz h1" title="kz" id="kz"></i>
             <div>flag-icon-kz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-la h1" title="la" id="la"></i>
             <div>flag-icon-la</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lb h1" title="lb" id="lb"></i>
             <div>flag-icon-lb</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lc h1" title="lc" id="lc"></i>
             <div>flag-icon-lc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-li h1" title="li" id="li"></i>
             <div>flag-icon-li</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lk h1" title="lk" id="lk"></i>
             <div>flag-icon-lk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lr h1" title="lr" id="lr"></i>
             <div>flag-icon-lr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ls h1" title="ls" id="ls"></i>
             <div>flag-icon-ls</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lt h1" title="lt" id="lt"></i>
             <div>flag-icon-lt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lu h1" title="lu" id="lu"></i>
             <div>flag-icon-lu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-lv h1" title="lv" id="lv"></i>
             <div>flag-icon-lv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ly h1" title="ly" id="ly"></i>
             <div>flag-icon-ly</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ma h1" title="ma" id="ma"></i>
             <div>flag-icon-ma</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mc h1" title="mc" id="mc"></i>
             <div>flag-icon-mc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-md h1" title="md" id="md"></i>
             <div>flag-icon-md</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-me h1" title="me" id="me"></i>
             <div>flag-icon-me</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mf h1" title="mf" id="mf"></i>
             <div>flag-icon-mf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mg h1" title="mg" id="mg"></i>
             <div>flag-icon-mg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mh h1" title="mh" id="mh"></i>
             <div>flag-icon-mh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mk h1" title="mk" id="mk"></i>
             <div>flag-icon-mk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ml h1" title="ml" id="ml"></i>
             <div>flag-icon-ml</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mm h1" title="mm" id="mm"></i>
             <div>flag-icon-mm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mn h1" title="mn" id="mn"></i>
             <div>flag-icon-mn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mo h1" title="mo" id="mo"></i>
             <div>flag-icon-mo</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mp h1" title="mp" id="mp"></i>
             <div>flag-icon-mp</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mq h1" title="mq" id="mq"></i>
             <div>flag-icon-mq</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mr h1" title="mr" id="mr"></i>
             <div>flag-icon-mr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ms h1" title="ms" id="ms"></i>
             <div>flag-icon-ms</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mt h1" title="mt" id="mt"></i>
             <div>flag-icon-mt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mu h1" title="mu" id="mu"></i>
             <div>flag-icon-mu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mv h1" title="mv" id="mv"></i>
             <div>flag-icon-mv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mw h1" title="mw" id="mw"></i>
             <div>flag-icon-mw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mx h1" title="mx" id="mx"></i>
             <div>flag-icon-mx</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-my h1" title="my" id="my"></i>
             <div>flag-icon-my</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-mz h1" title="mz" id="mz"></i>
             <div>flag-icon-mz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-na h1" title="na" id="na"></i>
             <div>flag-icon-na</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nc h1" title="nc" id="nc"></i>
             <div>flag-icon-nc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ne h1" title="ne" id="ne"></i>
             <div>flag-icon-ne</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nf h1" title="nf" id="nf"></i>
             <div>flag-icon-nf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ng h1" title="ng" id="ng"></i>
             <div>flag-icon-ng</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ni h1" title="ni" id="ni"></i>
             <div>flag-icon-ni</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nl h1" title="nl" id="nl"></i>
             <div>flag-icon-nl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-no h1" title="no" id="no"></i>
             <div>flag-icon-no</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-np h1" title="np" id="np"></i>
             <div>flag-icon-np</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nr h1" title="nr" id="nr"></i>
             <div>flag-icon-nr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nu h1" title="nu" id="nu"></i>
             <div>flag-icon-nu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-nz h1" title="nz" id="nz"></i>
             <div>flag-icon-nz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-om h1" title="om" id="om"></i>
             <div>flag-icon-om</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pa h1" title="pa" id="pa"></i>
             <div>flag-icon-pa</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pe h1" title="pe" id="pe"></i>
             <div>flag-icon-pe</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pf h1" title="pf" id="pf"></i>
             <div>flag-icon-pf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pg h1" title="pg" id="pg"></i>
             <div>flag-icon-pg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ph h1" title="ph" id="ph"></i>
             <div>flag-icon-ph</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pk h1" title="pk" id="pk"></i>
             <div>flag-icon-pk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pl h1" title="pl" id="pl"></i>
             <div>flag-icon-pl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pm h1" title="pm" id="pm"></i>
             <div>flag-icon-pm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pn h1" title="pn" id="pn"></i>
             <div>flag-icon-pn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pr h1" title="pr" id="pr"></i>
             <div>flag-icon-pr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ps h1" title="ps" id="ps"></i>
             <div>flag-icon-ps</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pt h1" title="pt" id="pt"></i>
             <div>flag-icon-pt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
             <div>flag-icon-pw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-py h1" title="py" id="py"></i>
             <div>flag-icon-py</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-qa h1" title="qa" id="qa"></i>
             <div>flag-icon-qa</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-re h1" title="re" id="re"></i>
             <div>flag-icon-re</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ro h1" title="ro" id="ro"></i>
             <div>flag-icon-ro</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-rs h1" title="rs" id="rs"></i>
             <div>flag-icon-rs</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ru h1" title="ru" id="ru"></i>
             <div>flag-icon-ru</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-rw h1" title="rw" id="rw"></i>
             <div>flag-icon-rw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sa h1" title="sa" id="sa"></i>
             <div>flag-icon-sa</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sb h1" title="sb" id="sb"></i>
             <div>flag-icon-sb</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sc h1" title="sc" id="sc"></i>
             <div>flag-icon-sc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sd h1" title="sd" id="sd"></i>
             <div>flag-icon-sd</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-se h1" title="se" id="se"></i>
             <div>flag-icon-se</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sg h1" title="sg" id="sg"></i>
             <div>flag-icon-sg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sh h1" title="sh" id="sh"></i>
             <div>flag-icon-sh</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-si h1" title="si" id="si"></i>
             <div>flag-icon-si</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sj h1" title="sj" id="sj"></i>
             <div>flag-icon-sj</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sk h1" title="sk" id="sk"></i>
             <div>flag-icon-sk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sl h1" title="sl" id="sl"></i>
             <div>flag-icon-sl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sm h1" title="sm" id="sm"></i>
             <div>flag-icon-sm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sn h1" title="sn" id="sn"></i>
             <div>flag-icon-sn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-so h1" title="so" id="so"></i>
             <div>flag-icon-so</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sr h1" title="sr" id="sr"></i>
             <div>flag-icon-sr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ss h1" title="ss" id="ss"></i>
             <div>flag-icon-ss</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-st h1" title="st" id="st"></i>
             <div>flag-icon-st</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sv h1" title="sv" id="sv"></i>
             <div>flag-icon-sv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sx h1" title="sx" id="sx"></i>
             <div>flag-icon-sx</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sy h1" title="sy" id="sy"></i>
             <div>flag-icon-sy</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-sz h1" title="sz" id="sz"></i>
             <div>flag-icon-sz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tc h1" title="tc" id="tc"></i>
             <div>flag-icon-tc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-td h1" title="td" id="td"></i>
             <div>flag-icon-td</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tf h1" title="tf" id="tf"></i>
             <div>flag-icon-tf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tg h1" title="tg" id="tg"></i>
             <div>flag-icon-tg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-th h1" title="th" id="th"></i>
             <div>flag-icon-th</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tj h1" title="tj" id="tj"></i>
             <div>flag-icon-tj</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tk h1" title="tk" id="tk"></i>
             <div>flag-icon-tk</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tl h1" title="tl" id="tl"></i>
             <div>flag-icon-tl</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tm h1" title="tm" id="tm"></i>
             <div>flag-icon-tm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tn h1" title="tn" id="tn"></i>
             <div>flag-icon-tn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-to h1" title="to" id="to"></i>
             <div>flag-icon-to</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tr h1" title="tr" id="tr"></i>
             <div>flag-icon-tr</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tt h1" title="tt" id="tt"></i>
             <div>flag-icon-tt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tv h1" title="tv" id="tv"></i>
             <div>flag-icon-tv</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tw h1" title="tw" id="tw"></i>
             <div>flag-icon-tw</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-tz h1" title="tz" id="tz"></i>
             <div>flag-icon-tz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ua h1" title="ua" id="ua"></i>
             <div>flag-icon-ua</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ug h1" title="ug" id="ug"></i>
             <div>flag-icon-ug</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-um h1" title="um" id="um"></i>
             <div>flag-icon-um</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-us h1" title="us" id="us"></i>
             <div>flag-icon-us</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-uy h1" title="uy" id="uy"></i>
             <div>flag-icon-uy</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-uz h1" title="uz" id="uz"></i>
             <div>flag-icon-uz</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-va h1" title="va" id="va"></i>
             <div>flag-icon-va</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-vc h1" title="vc" id="vc"></i>
             <div>flag-icon-vc</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ve h1" title="ve" id="ve"></i>
             <div>flag-icon-ve</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-vg h1" title="vg" id="vg"></i>
             <div>flag-icon-vg</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-vi h1" title="vi" id="vi"></i>
             <div>flag-icon-vi</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-vn h1" title="vn" id="vn"></i>
             <div>flag-icon-vn</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-vu h1" title="vu" id="vu"></i>
             <div>flag-icon-vu</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-wf h1" title="wf" id="wf"></i>
             <div>flag-icon-wf</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ws h1" title="ws" id="ws"></i>
             <div>flag-icon-ws</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-ye h1" title="ye" id="ye"></i>
             <div>flag-icon-ye</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-yt h1" title="yt" id="yt"></i>
             <div>flag-icon-yt</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-za h1" title="za" id="za"></i>
             <div>flag-icon-za</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-zm h1" title="zm" id="zm"></i>
             <div>flag-icon-zm</div>
-          </b-col>
-          <b-col class="mb-5" cols="3" sm="2">
+          </CCol>
+          <CCol class="mb-5" cols="3" sm="2">
             <i class="flag-icon flag-icon-zw h1" title="zw" id="zw"></i>
             <div>flag-icon-zw</div>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
diff --git a/src/views/icons/FontAwesome.vue b/src/views/icons/FontAwesome.vue
index 9d6562fa..41c98bea 100644
--- a/src/views/icons/FontAwesome.vue
+++ b/src/views/icons/FontAwesome.vue
@@ -1,1679 +1,1679 @@
 <template>
   <div class="animated fadeIn">
-    <b-card no-body id="new47">
-      <div slot="header">
+    <CCard noWrapper id="new47">
+      <CCardHeader slot="header">
         <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
-      </div>
-      <b-card-body>
-        <b-row class="text-center">
-          <b-col cols="6" sm="4" md="3" lg="2">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-address-book-o fa-lg mt-4"></i><br/>address-book-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-address-card fa-lg mt-4"></i><br/>address-card
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-address-card-o fa-lg mt-4"></i><br/>address-card-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bandcamp fa-lg mt-4"></i><br/>bandcamp
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bath fa-lg mt-4"></i><br/>bath
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bathtub fa-lg mt-4"></i><br/>bathtub <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-drivers-license fa-lg mt-4"></i><br/>drivers-license <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-drivers-license-o fa-lg mt-4"></i><br/>drivers-license-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eercast fa-lg mt-4"></i><br/>eercast
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-envelope-open fa-lg mt-4"></i><br/>envelope-open
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-envelope-open-o fa-lg mt-4"></i><br/>envelope-open-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-etsy fa-lg mt-4"></i><br/>etsy
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-free-code-camp fa-lg mt-4"></i><br/>free-code-camp
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-grav fa-lg mt-4"></i><br/>grav
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-handshake-o fa-lg mt-4"></i><br/>handshake-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-id-badge fa-lg mt-4"></i><br/>id-badge
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-id-card fa-lg mt-4"></i><br/>id-card
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-id-card-o fa-lg mt-4"></i><br/>id-card-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-imdb fa-lg mt-4"></i><br/>imdb
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-linode fa-lg mt-4"></i><br/>linode
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-meetup fa-lg mt-4"></i><br/>meetup
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-microchip fa-lg mt-4"></i><br/>microchip
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-podcast fa-lg mt-4"></i><br/>podcast
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-quora fa-lg mt-4"></i><br/>quora
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ravelry fa-lg mt-4"></i><br/>ravelry
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-s15 fa-lg mt-4"></i><br/>s15 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shower fa-lg mt-4"></i><br/>shower
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-snowflake-o fa-lg mt-4"></i><br/>snowflake-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-superpowers fa-lg mt-4"></i><br/>superpowers
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-telegram fa-lg mt-4"></i><br/>telegram
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer fa-lg mt-4"></i><br/>thermometer <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-0 fa-lg mt-4"></i><br/>thermometer-0 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-1 fa-lg mt-4"></i><br/>thermometer-1 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-2 fa-lg mt-4"></i><br/>thermometer-2 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-3 fa-lg mt-4"></i><br/>thermometer-3 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-4 fa-lg mt-4"></i><br/>thermometer-4 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-empty fa-lg mt-4"></i><br/>thermometer-empty
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-full fa-lg mt-4"></i><br/>thermometer-full
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-half fa-lg mt-4"></i><br/>thermometer-half
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-quarter fa-lg mt-4"></i><br/>thermometer-quarter
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thermometer-three-quarters fa-lg mt-4"></i><br/>thermometer-three-quarters
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-times-rectangle fa-lg mt-4"></i><br/>times-rectangle <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-times-rectangle-o fa-lg mt-4"></i><br/>times-rectangle-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-circle fa-lg mt-4"></i><br/>user-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-circle-o fa-lg mt-4"></i><br/>user-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-o fa-lg mt-4"></i><br/>user-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vcard fa-lg mt-4"></i><br/>vcard <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vcard-o fa-lg mt-4"></i><br/>vcard-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-window-close fa-lg mt-4"></i><br/>window-close
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-window-close-o fa-lg mt-4"></i><br/>window-close-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-window-maximize fa-lg mt-4"></i><br/>window-maximize
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-window-minimize fa-lg mt-4"></i><br/>window-minimize
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-window-restore fa-lg mt-4"></i><br/>window-restore
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wpexplorer fa-lg mt-4"></i><br/>wpexplorer
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card no-body id="new">
-      <div slot="header">20 New Icons in 4.5</div>
-      <b-card-body>
-        <b-row class="text-center">
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard noWrapper id="new">
+      <CCardHeader slot="header">20 New Icons in 4.5</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth fa-lg mt-4"></i><br>bluetooth
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth-b fa-lg mt-4"></i><br>bluetooth-b
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-codiepie fa-lg mt-4"></i><br>codiepie
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-credit-card-alt fa-lg mt-4"></i><br>credit-card-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-edge fa-lg mt-4"></i><br>edge
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fort-awesome fa-lg mt-4"></i><br>fort-awesome
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hashtag fa-lg mt-4"></i><br>hashtag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mixcloud fa-lg mt-4"></i><br>mixcloud
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-modx fa-lg mt-4"></i><br>modx
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pause-circle fa-lg mt-4"></i><br>pause-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pause-circle-o fa-lg mt-4"></i><br>pause-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-percent fa-lg mt-4"></i><br>percent
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-product-hunt fa-lg mt-4"></i><br>product-hunt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reddit-alien fa-lg mt-4"></i><br>reddit-alien
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-scribd fa-lg mt-4"></i><br>scribd
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shopping-bag fa-lg mt-4"></i><br>shopping-bag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shopping-basket fa-lg mt-4"></i><br>shopping-basket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stop-circle fa-lg mt-4"></i><br>stop-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stop-circle-o fa-lg mt-4"></i><br>stop-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-usb fa-lg mt-4"></i><br>usb
-          </b-col>
+          </CCol>
 
-        </b-row>
+        </CRow>
 
-      </b-card-body>
-    </b-card>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="web-application">
-      <div slot="header">Web Application Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="web-application">
+      <CCardHeader slot="header">Web Application Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-adjust fa-lg mt-4"></i><br>adjust
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-anchor fa-lg mt-4"></i><br>anchor
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-archive fa-lg mt-4"></i><br>archive
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-area-chart fa-lg mt-4"></i><br>area-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows fa-lg mt-4"></i><br>arrows
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-h fa-lg mt-4"></i><br>arrows-h
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-v fa-lg mt-4"></i><br>arrows-v
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-asterisk fa-lg mt-4"></i><br>asterisk
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-at fa-lg mt-4"></i><br>at
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-automobile fa-lg mt-4"></i><br>automobile <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-balance-scale fa-lg mt-4"></i><br>balance-scale
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ban fa-lg mt-4"></i><br>ban
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bank fa-lg mt-4"></i><br>bank <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bar-chart fa-lg mt-4"></i><br>bar-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bar-chart-o fa-lg mt-4"></i><br>bar-chart-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-barcode fa-lg mt-4"></i><br>barcode
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bars fa-lg mt-4"></i><br>bars
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-0 fa-lg mt-4"></i><br>battery-0 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-1 fa-lg mt-4"></i><br>battery-1 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-2 fa-lg mt-4"></i><br>battery-2 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-3 fa-lg mt-4"></i><br>battery-3 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-4 fa-lg mt-4"></i><br>battery-4 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-empty fa-lg mt-4"></i><br>battery-empty
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-full fa-lg mt-4"></i><br>battery-full
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-half fa-lg mt-4"></i><br>battery-half
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-quarter fa-lg mt-4"></i><br>battery-quarter
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-battery-three-quarters fa-lg mt-4"></i><br>battery-three-quarters
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bed fa-lg mt-4"></i><br>bed
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-beer fa-lg mt-4"></i><br>beer
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bell fa-lg mt-4"></i><br>bell
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bell-o fa-lg mt-4"></i><br>bell-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bell-slash fa-lg mt-4"></i><br>bell-slash
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bell-slash-o fa-lg mt-4"></i><br>bell-slash-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bicycle fa-lg mt-4"></i><br>bicycle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-binoculars fa-lg mt-4"></i><br>binoculars
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-birthday-cake fa-lg mt-4"></i><br>birthday-cake
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth fa-lg mt-4"></i><br>bluetooth
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth-b fa-lg mt-4"></i><br>bluetooth-b
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bolt fa-lg mt-4"></i><br>bolt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bomb fa-lg mt-4"></i><br>bomb
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-book fa-lg mt-4"></i><br>book
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bookmark fa-lg mt-4"></i><br>bookmark
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bookmark-o fa-lg mt-4"></i><br>bookmark-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-briefcase fa-lg mt-4"></i><br>briefcase
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bug fa-lg mt-4"></i><br>bug
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-building fa-lg mt-4"></i><br>building
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-building-o fa-lg mt-4"></i><br>building-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bullhorn fa-lg mt-4"></i><br>bullhorn
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bullseye fa-lg mt-4"></i><br>bullseye
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bus fa-lg mt-4"></i><br>bus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cab fa-lg mt-4"></i><br>cab <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calculator fa-lg mt-4"></i><br>calculator
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar fa-lg mt-4"></i><br>calendar
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar-check-o fa-lg mt-4"></i><br>calendar-check-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar-minus-o fa-lg mt-4"></i><br>calendar-minus-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar-o fa-lg mt-4"></i><br>calendar-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar-plus-o fa-lg mt-4"></i><br>calendar-plus-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-calendar-times-o fa-lg mt-4"></i><br>calendar-times-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-camera fa-lg mt-4"></i><br>camera
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-camera-retro fa-lg mt-4"></i><br>camera-retro
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-car fa-lg mt-4"></i><br>car
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-down fa-lg mt-4"></i><br>caret-square-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-left fa-lg mt-4"></i><br>caret-square-o-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-right fa-lg mt-4"></i><br>caret-square-o-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-up fa-lg mt-4"></i><br>caret-square-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cart-arrow-down fa-lg mt-4"></i><br>cart-arrow-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cart-plus fa-lg mt-4"></i><br>cart-plus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc fa-lg mt-4"></i><br>cc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-certificate fa-lg mt-4"></i><br>certificate
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check fa-lg mt-4"></i><br>check
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-circle fa-lg mt-4"></i><br>check-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-circle-o fa-lg mt-4"></i><br>check-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-square fa-lg mt-4"></i><br>check-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-square-o fa-lg mt-4"></i><br>check-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-child fa-lg mt-4"></i><br>child
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle fa-lg mt-4"></i><br>circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle-o fa-lg mt-4"></i><br>circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle-o-notch fa-lg mt-4"></i><br>circle-o-notch
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle-thin fa-lg mt-4"></i><br>circle-thin
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-clock-o fa-lg mt-4"></i><br>clock-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-clone fa-lg mt-4"></i><br>clone
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-close fa-lg mt-4"></i><br>close <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cloud fa-lg mt-4"></i><br>cloud
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cloud-download fa-lg mt-4"></i><br>cloud-download
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cloud-upload fa-lg mt-4"></i><br>cloud-upload
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-code fa-lg mt-4"></i><br>code
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-code-fork fa-lg mt-4"></i><br>code-fork
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-coffee fa-lg mt-4"></i><br>coffee
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cog fa-lg mt-4"></i><br>cog
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cogs fa-lg mt-4"></i><br>cogs
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-comment fa-lg mt-4"></i><br>comment
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-comment-o fa-lg mt-4"></i><br>comment-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-commenting fa-lg mt-4"></i><br>commenting
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-commenting-o fa-lg mt-4"></i><br>commenting-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-comments fa-lg mt-4"></i><br>comments
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-comments-o fa-lg mt-4"></i><br>comments-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-compass fa-lg mt-4"></i><br>compass
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-copyright fa-lg mt-4"></i><br>copyright
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-creative-commons fa-lg mt-4"></i><br>creative-commons
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-credit-card fa-lg mt-4"></i><br>credit-card
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-credit-card-alt fa-lg mt-4"></i><br>credit-card-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-crop fa-lg mt-4"></i><br>crop
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-crosshairs fa-lg mt-4"></i><br>crosshairs
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cube fa-lg mt-4"></i><br>cube
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cubes fa-lg mt-4"></i><br>cubes
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cutlery fa-lg mt-4"></i><br>cutlery
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dashboard fa-lg mt-4"></i><br>dashboard <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-database fa-lg mt-4"></i><br>database
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-desktop fa-lg mt-4"></i><br>desktop
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-diamond fa-lg mt-4"></i><br>diamond
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dot-circle-o fa-lg mt-4"></i><br>dot-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-download fa-lg mt-4"></i><br>download
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-edit fa-lg mt-4"></i><br>edit <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ellipsis-h fa-lg mt-4"></i><br>ellipsis-h
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ellipsis-v fa-lg mt-4"></i><br>ellipsis-v
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-envelope fa-lg mt-4"></i><br>envelope
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-envelope-o fa-lg mt-4"></i><br>envelope-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-envelope-square fa-lg mt-4"></i><br>envelope-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eraser fa-lg mt-4"></i><br>eraser
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-exchange fa-lg mt-4"></i><br>exchange
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-exclamation fa-lg mt-4"></i><br>exclamation
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-exclamation-circle fa-lg mt-4"></i><br>exclamation-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-exclamation-triangle fa-lg mt-4"></i><br>exclamation-triangle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-external-link fa-lg mt-4"></i><br>external-link
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-external-link-square fa-lg mt-4"></i><br>external-link-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eye fa-lg mt-4"></i><br>eye
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eye-slash fa-lg mt-4"></i><br>eye-slash
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eyedropper fa-lg mt-4"></i><br>eyedropper
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fax fa-lg mt-4"></i><br>fax
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-feed fa-lg mt-4"></i><br>feed <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-female fa-lg mt-4"></i><br>female
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fighter-jet fa-lg mt-4"></i><br>fighter-jet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-archive-o fa-lg mt-4"></i><br>file-archive-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-audio-o fa-lg mt-4"></i><br>file-audio-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-code-o fa-lg mt-4"></i><br>file-code-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-excel-o fa-lg mt-4"></i><br>file-excel-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-image-o fa-lg mt-4"></i><br>file-image-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-movie-o fa-lg mt-4"></i><br>file-movie-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-pdf-o fa-lg mt-4"></i><br>file-pdf-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-photo-o fa-lg mt-4"></i><br>file-photo-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-picture-o fa-lg mt-4"></i><br>file-picture-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-powerpoint-o fa-lg mt-4"></i><br>file-powerpoint-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-sound-o fa-lg mt-4"></i><br>file-sound-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-video-o fa-lg mt-4"></i><br>file-video-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-word-o fa-lg mt-4"></i><br>file-word-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-zip-o fa-lg mt-4"></i><br>file-zip-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-film fa-lg mt-4"></i><br>film
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-filter fa-lg mt-4"></i><br>filter
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fire fa-lg mt-4"></i><br>fire
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fire-extinguisher fa-lg mt-4"></i><br>fire-extinguisher
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flag fa-lg mt-4"></i><br>flag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flag-checkered fa-lg mt-4"></i><br>flag-checkered
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flag-o fa-lg mt-4"></i><br>flag-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flash fa-lg mt-4"></i><br>flash <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flask fa-lg mt-4"></i><br>flask
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-folder fa-lg mt-4"></i><br>folder
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-folder-o fa-lg mt-4"></i><br>folder-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-folder-open fa-lg mt-4"></i><br>folder-open
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-folder-open-o fa-lg mt-4"></i><br>folder-open-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-frown-o fa-lg mt-4"></i><br>frown-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-futbol-o fa-lg mt-4"></i><br>futbol-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gamepad fa-lg mt-4"></i><br>gamepad
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gavel fa-lg mt-4"></i><br>gavel
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gear fa-lg mt-4"></i><br>gear <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gears fa-lg mt-4"></i><br>gears <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gift fa-lg mt-4"></i><br>gift
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-glass fa-lg mt-4"></i><br>glass
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-globe fa-lg mt-4"></i><br>globe
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-graduation-cap fa-lg mt-4"></i><br>graduation-cap
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-group fa-lg mt-4"></i><br>group <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-grab-o fa-lg mt-4"></i><br>hand-grab-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-lizard-o fa-lg mt-4"></i><br>hand-lizard-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-paper-o fa-lg mt-4"></i><br>hand-paper-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-peace-o fa-lg mt-4"></i><br>hand-peace-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-pointer-o fa-lg mt-4"></i><br>hand-pointer-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-rock-o fa-lg mt-4"></i><br>hand-rock-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-scissors-o fa-lg mt-4"></i><br>hand-scissors-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-spock-o fa-lg mt-4"></i><br>hand-spock-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-stop-o fa-lg mt-4"></i><br>hand-stop-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hashtag fa-lg mt-4"></i><br>hashtag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hdd-o fa-lg mt-4"></i><br>hdd-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-headphones fa-lg mt-4"></i><br>headphones
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heart fa-lg mt-4"></i><br>heart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heart-o fa-lg mt-4"></i><br>heart-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heartbeat fa-lg mt-4"></i><br>heartbeat
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-history fa-lg mt-4"></i><br>history
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-home fa-lg mt-4"></i><br>home
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hotel fa-lg mt-4"></i><br>hotel <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass fa-lg mt-4"></i><br>hourglass
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-1 fa-lg mt-4"></i><br>hourglass-1 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-2 fa-lg mt-4"></i><br>hourglass-2 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-3 fa-lg mt-4"></i><br>hourglass-3 <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-end fa-lg mt-4"></i><br>hourglass-end
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-half fa-lg mt-4"></i><br>hourglass-half
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-o fa-lg mt-4"></i><br>hourglass-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hourglass-start fa-lg mt-4"></i><br>hourglass-start
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-i-cursor fa-lg mt-4"></i><br>i-cursor
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-image fa-lg mt-4"></i><br>image <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-inbox fa-lg mt-4"></i><br>inbox
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-industry fa-lg mt-4"></i><br>industry
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-info fa-lg mt-4"></i><br>info
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-info-circle fa-lg mt-4"></i><br>info-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-institution fa-lg mt-4"></i><br>institution <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-key fa-lg mt-4"></i><br>key
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-keyboard-o fa-lg mt-4"></i><br>keyboard-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-language fa-lg mt-4"></i><br>language
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-laptop fa-lg mt-4"></i><br>laptop
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-leaf fa-lg mt-4"></i><br>leaf
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-legal fa-lg mt-4"></i><br>legal <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-lemon-o fa-lg mt-4"></i><br>lemon-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-level-down fa-lg mt-4"></i><br>level-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-level-up fa-lg mt-4"></i><br>level-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-life-bouy fa-lg mt-4"></i><br>life-bouy <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-life-buoy fa-lg mt-4"></i><br>life-buoy <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-life-ring fa-lg mt-4"></i><br>life-ring
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-life-saver fa-lg mt-4"></i><br>life-saver <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-lightbulb-o fa-lg mt-4"></i><br>lightbulb-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-line-chart fa-lg mt-4"></i><br>line-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-location-arrow fa-lg mt-4"></i><br>location-arrow
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-lock fa-lg mt-4"></i><br>lock
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-magic fa-lg mt-4"></i><br>magic
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-magnet fa-lg mt-4"></i><br>magnet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mail-forward fa-lg mt-4"></i><br>mail-forward <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mail-reply fa-lg mt-4"></i><br>mail-reply <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mail-reply-all fa-lg mt-4"></i><br>mail-reply-all <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-male fa-lg mt-4"></i><br>male
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-map fa-lg mt-4"></i><br>map
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-map-marker fa-lg mt-4"></i><br>map-marker
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-map-o fa-lg mt-4"></i><br>map-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-map-pin fa-lg mt-4"></i><br>map-pin
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-map-signs fa-lg mt-4"></i><br>map-signs
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-meh-o fa-lg mt-4"></i><br>meh-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-microphone fa-lg mt-4"></i><br>microphone
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-microphone-slash fa-lg mt-4"></i><br>microphone-slash
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus fa-lg mt-4"></i><br>minus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus-circle fa-lg mt-4"></i><br>minus-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus-square fa-lg mt-4"></i><br>minus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus-square-o fa-lg mt-4"></i><br>minus-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mobile fa-lg mt-4"></i><br>mobile
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mobile-phone fa-lg mt-4"></i><br>mobile-phone <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-money fa-lg mt-4"></i><br>money
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-moon-o fa-lg mt-4"></i><br>moon-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mortar-board fa-lg mt-4"></i><br>mortar-board <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-motorcycle fa-lg mt-4"></i><br>motorcycle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mouse-pointer fa-lg mt-4"></i><br>mouse-pointer
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-music fa-lg mt-4"></i><br>music
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-navicon fa-lg mt-4"></i><br>navicon <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-newspaper-o fa-lg mt-4"></i><br>newspaper-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-object-group fa-lg mt-4"></i><br>object-group
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-object-ungroup fa-lg mt-4"></i><br>object-ungroup
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paint-brush fa-lg mt-4"></i><br>paint-brush
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paper-plane fa-lg mt-4"></i><br>paper-plane
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paper-plane-o fa-lg mt-4"></i><br>paper-plane-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paw fa-lg mt-4"></i><br>paw
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pencil fa-lg mt-4"></i><br>pencil
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pencil-square fa-lg mt-4"></i><br>pencil-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pencil-square-o fa-lg mt-4"></i><br>pencil-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-percent fa-lg mt-4"></i><br>percent
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-phone fa-lg mt-4"></i><br>phone
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-phone-square fa-lg mt-4"></i><br>phone-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-photo fa-lg mt-4"></i><br>photo <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-picture-o fa-lg mt-4"></i><br>picture-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pie-chart fa-lg mt-4"></i><br>pie-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plane fa-lg mt-4"></i><br>plane
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plug fa-lg mt-4"></i><br>plug
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus fa-lg mt-4"></i><br>plus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-circle fa-lg mt-4"></i><br>plus-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-square fa-lg mt-4"></i><br>plus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-square-o fa-lg mt-4"></i><br>plus-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-power-off fa-lg mt-4"></i><br>power-off
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-print fa-lg mt-4"></i><br>print
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-puzzle-piece fa-lg mt-4"></i><br>puzzle-piece
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-qrcode fa-lg mt-4"></i><br>qrcode
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-question fa-lg mt-4"></i><br>question
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-question-circle fa-lg mt-4"></i><br>question-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-quote-left fa-lg mt-4"></i><br>quote-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-quote-right fa-lg mt-4"></i><br>quote-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-random fa-lg mt-4"></i><br>random
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-recycle fa-lg mt-4"></i><br>recycle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-refresh fa-lg mt-4"></i><br>refresh
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-registered fa-lg mt-4"></i><br>registered
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-remove fa-lg mt-4"></i><br>remove <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reorder fa-lg mt-4"></i><br>reorder <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reply fa-lg mt-4"></i><br>reply
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reply-all fa-lg mt-4"></i><br>reply-all
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-retweet fa-lg mt-4"></i><br>retweet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-road fa-lg mt-4"></i><br>road
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rocket fa-lg mt-4"></i><br>rocket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rss fa-lg mt-4"></i><br>rss
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rss-square fa-lg mt-4"></i><br>rss-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-search fa-lg mt-4"></i><br>search
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-search-minus fa-lg mt-4"></i><br>search-minus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-search-plus fa-lg mt-4"></i><br>search-plus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-send fa-lg mt-4"></i><br>send <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-send-o fa-lg mt-4"></i><br>send-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-server fa-lg mt-4"></i><br>server
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share fa-lg mt-4"></i><br>share
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-alt fa-lg mt-4"></i><br>share-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-alt-square fa-lg mt-4"></i><br>share-alt-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-square fa-lg mt-4"></i><br>share-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-square-o fa-lg mt-4"></i><br>share-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shield fa-lg mt-4"></i><br>shield
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ship fa-lg mt-4"></i><br>ship
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shopping-bag fa-lg mt-4"></i><br>shopping-bag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shopping-basket fa-lg mt-4"></i><br>shopping-basket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shopping-cart fa-lg mt-4"></i><br>shopping-cart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sign-in fa-lg mt-4"></i><br>sign-in
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sign-out fa-lg mt-4"></i><br>sign-out
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-signal fa-lg mt-4"></i><br>signal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sitemap fa-lg mt-4"></i><br>sitemap
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sliders fa-lg mt-4"></i><br>sliders
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-smile-o fa-lg mt-4"></i><br>smile-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-soccer-ball-o fa-lg mt-4"></i><br>soccer-ball-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort fa-lg mt-4"></i><br>sort
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-alpha-asc fa-lg mt-4"></i><br>sort-alpha-asc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-alpha-desc fa-lg mt-4"></i><br>sort-alpha-desc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-amount-asc fa-lg mt-4"></i><br>sort-amount-asc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-amount-desc fa-lg mt-4"></i><br>sort-amount-desc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-asc fa-lg mt-4"></i><br>sort-asc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-desc fa-lg mt-4"></i><br>sort-desc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-down fa-lg mt-4"></i><br>sort-down <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-numeric-asc fa-lg mt-4"></i><br>sort-numeric-asc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-numeric-desc fa-lg mt-4"></i><br>sort-numeric-desc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sort-up fa-lg mt-4"></i><br>sort-up <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-space-shuttle fa-lg mt-4"></i><br>space-shuttle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-spinner fa-lg mt-4"></i><br>spinner
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-spoon fa-lg mt-4"></i><br>spoon
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-square fa-lg mt-4"></i><br>square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-square-o fa-lg mt-4"></i><br>square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star fa-lg mt-4"></i><br>star
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star-half fa-lg mt-4"></i><br>star-half
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star-half-empty fa-lg mt-4"></i><br>star-half-empty <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star-half-full fa-lg mt-4"></i><br>star-half-full <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star-half-o fa-lg mt-4"></i><br>star-half-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-star-o fa-lg mt-4"></i><br>star-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sticky-note fa-lg mt-4"></i><br>sticky-note
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sticky-note-o fa-lg mt-4"></i><br>sticky-note-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-street-view fa-lg mt-4"></i><br>street-view
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-suitcase fa-lg mt-4"></i><br>suitcase
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sun-o fa-lg mt-4"></i><br>sun-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-support fa-lg mt-4"></i><br>support <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tablet fa-lg mt-4"></i><br>tablet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tachometer fa-lg mt-4"></i><br>tachometer
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tag fa-lg mt-4"></i><br>tag
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tags fa-lg mt-4"></i><br>tags
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tasks fa-lg mt-4"></i><br>tasks
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-taxi fa-lg mt-4"></i><br>taxi
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-television fa-lg mt-4"></i><br>television
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-terminal fa-lg mt-4"></i><br>terminal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumb-tack fa-lg mt-4"></i><br>thumb-tack
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-down fa-lg mt-4"></i><br>thumbs-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-o-down fa-lg mt-4"></i><br>thumbs-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-o-up fa-lg mt-4"></i><br>thumbs-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-up fa-lg mt-4"></i><br>thumbs-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ticket fa-lg mt-4"></i><br>ticket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-times fa-lg mt-4"></i><br>times
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-times-circle fa-lg mt-4"></i><br>times-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-times-circle-o fa-lg mt-4"></i><br>times-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tint fa-lg mt-4"></i><br>tint
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-down fa-lg mt-4"></i><br>toggle-down <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-left fa-lg mt-4"></i><br>toggle-left <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-off fa-lg mt-4"></i><br>toggle-off
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-on fa-lg mt-4"></i><br>toggle-on
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-right fa-lg mt-4"></i><br>toggle-right <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-up fa-lg mt-4"></i><br>toggle-up <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-trademark fa-lg mt-4"></i><br>trademark
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-trash fa-lg mt-4"></i><br>trash
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-trash-o fa-lg mt-4"></i><br>trash-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tree fa-lg mt-4"></i><br>tree
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-trophy fa-lg mt-4"></i><br>trophy
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-truck fa-lg mt-4"></i><br>truck
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tty fa-lg mt-4"></i><br>tty
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tv fa-lg mt-4"></i><br>tv <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-umbrella fa-lg mt-4"></i><br>umbrella
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-university fa-lg mt-4"></i><br>university
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-unlock fa-lg mt-4"></i><br>unlock
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-unlock-alt fa-lg mt-4"></i><br>unlock-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-unsorted fa-lg mt-4"></i><br>unsorted <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-upload fa-lg mt-4"></i><br>upload
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user fa-lg mt-4"></i><br>user
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-plus fa-lg mt-4"></i><br>user-plus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-secret fa-lg mt-4"></i><br>user-secret
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-times fa-lg mt-4"></i><br>user-times
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-users fa-lg mt-4"></i><br>users
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-video-camera fa-lg mt-4"></i><br>video-camera
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-volume-down fa-lg mt-4"></i><br>volume-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-volume-off fa-lg mt-4"></i><br>volume-off
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-volume-up fa-lg mt-4"></i><br>volume-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-warning fa-lg mt-4"></i><br>warning <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wheelchair fa-lg mt-4"></i><br>wheelchair
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wifi fa-lg mt-4"></i><br>wifi
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wrench fa-lg mt-4"></i><br>wrench
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
+        </CRow>
+      </CCardBody>
 
-    </b-card>
+    </CCard>
 
-    <b-card no-body id="hand">
-      <div slot="header">Hand Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="hand">
+      <CCardHeader slot="header">Hand Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-grab-o fa-lg mt-4"></i><br>hand-grab-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-lizard-o fa-lg mt-4"></i><br>hand-lizard-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-down fa-lg mt-4"></i><br>hand-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-left fa-lg mt-4"></i><br>hand-o-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-right fa-lg mt-4"></i><br>hand-o-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-up fa-lg mt-4"></i><br>hand-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-paper-o fa-lg mt-4"></i><br>hand-paper-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-peace-o fa-lg mt-4"></i><br>hand-peace-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-pointer-o fa-lg mt-4"></i><br>hand-pointer-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-rock-o fa-lg mt-4"></i><br>hand-rock-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-scissors-o fa-lg mt-4"></i><br>hand-scissors-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-spock-o fa-lg mt-4"></i><br>hand-spock-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-stop-o fa-lg mt-4"></i><br>hand-stop-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-down fa-lg mt-4"></i><br>thumbs-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-o-down fa-lg mt-4"></i><br>thumbs-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-o-up fa-lg mt-4"></i><br>thumbs-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-thumbs-up fa-lg mt-4"></i><br>thumbs-up
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
+        </CRow>
+      </CCardBody>
 
-    </b-card>
+    </CCard>
 
-    <b-card no-body id="transportation">
-      <div slot="header">Transportation Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="transportation">
+      <CCardHeader slot="header">Transportation Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ambulance fa-lg mt-4"></i><br>ambulance
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-automobile fa-lg mt-4"></i><br>automobile <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bicycle fa-lg mt-4"></i><br>bicycle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bus fa-lg mt-4"></i><br>bus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cab fa-lg mt-4"></i><br>cab <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-car fa-lg mt-4"></i><br>car
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fighter-jet fa-lg mt-4"></i><br>fighter-jet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-motorcycle fa-lg mt-4"></i><br>motorcycle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plane fa-lg mt-4"></i><br>plane
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rocket fa-lg mt-4"></i><br>rocket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ship fa-lg mt-4"></i><br>ship
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-space-shuttle fa-lg mt-4"></i><br>space-shuttle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-subway fa-lg mt-4"></i><br>subway
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-taxi fa-lg mt-4"></i><br>taxi
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-train fa-lg mt-4"></i><br>train
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-truck fa-lg mt-4"></i><br>truck
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wheelchair fa-lg mt-4"></i><br>wheelchair
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="gender">
-      <div slot="header">Gender Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="gender">
+      <CCardHeader slot="header">Gender Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-genderless fa-lg mt-4"></i><br>genderless
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-intersex fa-lg mt-4"></i><br>intersex <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mars fa-lg mt-4"></i><br>mars
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mars-double fa-lg mt-4"></i><br>mars-double
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mars-stroke fa-lg mt-4"></i><br>mars-stroke
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mars-stroke-h fa-lg mt-4"></i><br>mars-stroke-h
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mars-stroke-v fa-lg mt-4"></i><br>mars-stroke-v
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mercury fa-lg mt-4"></i><br>mercury
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-neuter fa-lg mt-4"></i><br>neuter
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-transgender fa-lg mt-4"></i><br>transgender
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-transgender-alt fa-lg mt-4"></i><br>transgender-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-venus fa-lg mt-4"></i><br>venus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-venus-double fa-lg mt-4"></i><br>venus-double
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-venus-mars fa-lg mt-4"></i><br>venus-mars
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="file-type">
-      <div slot="header">File Type Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="file-type">
+      <CCardHeader slot="header">File Type Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file fa-lg mt-4"></i><br>file
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-archive-o fa-lg mt-4"></i><br>file-archive-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-audio-o fa-lg mt-4"></i><br>file-audio-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-code-o fa-lg mt-4"></i><br>file-code-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-excel-o fa-lg mt-4"></i><br>file-excel-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-image-o fa-lg mt-4"></i><br>file-image-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-movie-o fa-lg mt-4"></i><br>file-movie-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-o fa-lg mt-4"></i><br>file-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-pdf-o fa-lg mt-4"></i><br>file-pdf-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-photo-o fa-lg mt-4"></i><br>file-photo-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-picture-o fa-lg mt-4"></i><br>file-picture-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-powerpoint-o fa-lg mt-4"></i><br>file-powerpoint-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-sound-o fa-lg mt-4"></i><br>file-sound-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-text fa-lg mt-4"></i><br>file-text
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-text-o fa-lg mt-4"></i><br>file-text-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-video-o fa-lg mt-4"></i><br>file-video-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-word-o fa-lg mt-4"></i><br>file-word-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-zip-o fa-lg mt-4"></i><br>file-zip-o <span class="text-muted">(alias)</span>
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="spinner">
-      <div slot="header">Spinner Icons</div>
-      <b-card-body>
+    <CCard noWrapper id="spinner">
+      <CCardHeader slot="header">Spinner Icons</CCardHeader>
+      <CCardBody slot="body">
         <div class="alert alert-success">
           <ul class="fa-ul">
             <li>
@@ -1682,632 +1682,632 @@
             </li>
           </ul>
         </div>
-        <b-row class="text-center">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"></i><br>circle-o-notch
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cog fa-lg mt-4"></i><br>cog
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gear fa-lg mt-4"></i><br>gear <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-refresh fa-lg mt-4"></i><br>refresh
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-spinner fa-lg mt-4"></i><br>spinner
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="form-control">
-      <div slot="header">Form Control Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="form-control">
+      <CCardHeader slot="header">Form Control Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-square fa-lg mt-4"></i><br>check-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-check-square-o fa-lg mt-4"></i><br>check-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle fa-lg mt-4"></i><br>circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-circle-o fa-lg mt-4"></i><br>circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dot-circle-o fa-lg mt-4"></i><br>dot-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus-square fa-lg mt-4"></i><br>minus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-minus-square-o fa-lg mt-4"></i><br>minus-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-square fa-lg mt-4"></i><br>plus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-square-o fa-lg mt-4"></i><br>plus-square-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-square fa-lg mt-4"></i><br>square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-square-o fa-lg mt-4"></i><br>square-o
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="payment">
-      <div slot="header">Payment Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="payment">
+      <CCardHeader slot="header">Payment Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-amex fa-lg mt-4"></i><br>cc-amex
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-diners-club fa-lg mt-4"></i><br>cc-diners-club
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-discover fa-lg mt-4"></i><br>cc-discover
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-jcb fa-lg mt-4"></i><br>cc-jcb
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-mastercard fa-lg mt-4"></i><br>cc-mastercard
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-paypal fa-lg mt-4"></i><br>cc-paypal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-stripe fa-lg mt-4"></i><br>cc-stripe
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-visa fa-lg mt-4"></i><br>cc-visa
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-credit-card fa-lg mt-4"></i><br>credit-card
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-credit-card-alt fa-lg mt-4"></i><br>credit-card-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-google-wallet fa-lg mt-4"></i><br>google-wallet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paypal fa-lg mt-4"></i><br>paypal
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="chart">
-      <div slot="header">Chart Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="chart">
+      <CCardHeader slot="header">Chart Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-area-chart fa-lg mt-4"></i><br>area-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bar-chart fa-lg mt-4"></i><br>bar-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bar-chart-o fa-lg mt-4"></i><br>bar-chart-o <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-line-chart fa-lg mt-4"></i><br>line-chart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pie-chart fa-lg mt-4"></i><br>pie-chart
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="currency">
-      <div slot="header">Currency Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="currency">
+      <CCardHeader slot="header">Currency Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bitcoin fa-lg mt-4"></i><br>bitcoin <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-btc fa-lg mt-4"></i><br>btc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cny fa-lg mt-4"></i><br>cny <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dollar fa-lg mt-4"></i><br>dollar <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eur fa-lg mt-4"></i><br>eur
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-euro fa-lg mt-4"></i><br>euro <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gbp fa-lg mt-4"></i><br>gbp
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gg fa-lg mt-4"></i><br>gg
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gg-circle fa-lg mt-4"></i><br>gg-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ils fa-lg mt-4"></i><br>ils
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-inr fa-lg mt-4"></i><br>inr
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-jpy fa-lg mt-4"></i><br>jpy
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-krw fa-lg mt-4"></i><br>krw
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-money fa-lg mt-4"></i><br>money
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rmb fa-lg mt-4"></i><br>rmb <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rouble fa-lg mt-4"></i><br>rouble <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rub fa-lg mt-4"></i><br>rub
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ruble fa-lg mt-4"></i><br>ruble <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rupee fa-lg mt-4"></i><br>rupee <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shekel fa-lg mt-4"></i><br>shekel <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sheqel fa-lg mt-4"></i><br>sheqel <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-try fa-lg mt-4"></i><br>try
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-turkish-lira fa-lg mt-4"></i><br>turkish-lira <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-usd fa-lg mt-4"></i><br>usd
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-won fa-lg mt-4"></i><br>won <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-yen fa-lg mt-4"></i><br>yen <span class="text-muted">(alias)</span>
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="text-editor">
-      <div slot="header">Text Editor Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="text-editor">
+      <CCardHeader slot="header">Text Editor Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-align-center fa-lg mt-4"></i><br>align-center
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-align-justify fa-lg mt-4"></i><br>align-justify
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-align-left fa-lg mt-4"></i><br>align-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-align-right fa-lg mt-4"></i><br>align-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bold fa-lg mt-4"></i><br>bold
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chain fa-lg mt-4"></i><br>chain <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chain-broken fa-lg mt-4"></i><br>chain-broken
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-clipboard fa-lg mt-4"></i><br>clipboard
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-columns fa-lg mt-4"></i><br>columns
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-copy fa-lg mt-4"></i><br>copy <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cut fa-lg mt-4"></i><br>cut <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dedent fa-lg mt-4"></i><br>dedent <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eraser fa-lg mt-4"></i><br>eraser
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file fa-lg mt-4"></i><br>file
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-o fa-lg mt-4"></i><br>file-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-text fa-lg mt-4"></i><br>file-text
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-file-text-o fa-lg mt-4"></i><br>file-text-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-files-o fa-lg mt-4"></i><br>files-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-floppy-o fa-lg mt-4"></i><br>floppy-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-font fa-lg mt-4"></i><br>font
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-header fa-lg mt-4"></i><br>header
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-indent fa-lg mt-4"></i><br>indent
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-italic fa-lg mt-4"></i><br>italic
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-link fa-lg mt-4"></i><br>link
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-list fa-lg mt-4"></i><br>list
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-list-alt fa-lg mt-4"></i><br>list-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-list-ol fa-lg mt-4"></i><br>list-ol
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-list-ul fa-lg mt-4"></i><br>list-ul
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-outdent fa-lg mt-4"></i><br>outdent
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paperclip fa-lg mt-4"></i><br>paperclip
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paragraph fa-lg mt-4"></i><br>paragraph
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paste fa-lg mt-4"></i><br>paste <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-repeat fa-lg mt-4"></i><br>repeat
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rotate-left fa-lg mt-4"></i><br>rotate-left <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rotate-right fa-lg mt-4"></i><br>rotate-right <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-save fa-lg mt-4"></i><br>save <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-scissors fa-lg mt-4"></i><br>scissors
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-strikethrough fa-lg mt-4"></i><br>strikethrough
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-subscript fa-lg mt-4"></i><br>subscript
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-superscript fa-lg mt-4"></i><br>superscript
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-table fa-lg mt-4"></i><br>table
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-text-height fa-lg mt-4"></i><br>text-height
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-text-width fa-lg mt-4"></i><br>text-width
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-th fa-lg mt-4"></i><br>th
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-th-large fa-lg mt-4"></i><br>th-large
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-th-list fa-lg mt-4"></i><br>th-list
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-underline fa-lg mt-4"></i><br>underline
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-undo fa-lg mt-4"></i><br>undo
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-unlink fa-lg mt-4"></i><br>unlink <span class="text-muted">(alias)</span>
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="directional">
-      <div slot="header">Directional Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="directional">
+      <CCardHeader slot="header">Directional Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-double-down fa-lg mt-4"></i><br>angle-double-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-double-left fa-lg mt-4"></i><br>angle-double-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-double-right fa-lg mt-4"></i><br>angle-double-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-double-up fa-lg mt-4"></i><br>angle-double-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-down fa-lg mt-4"></i><br>angle-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-left fa-lg mt-4"></i><br>angle-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-right fa-lg mt-4"></i><br>angle-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angle-up fa-lg mt-4"></i><br>angle-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-down fa-lg mt-4"></i><br>arrow-circle-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-left fa-lg mt-4"></i><br>arrow-circle-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-o-down fa-lg mt-4"></i><br>arrow-circle-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-o-left fa-lg mt-4"></i><br>arrow-circle-o-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-o-right fa-lg mt-4"></i><br>arrow-circle-o-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-o-up fa-lg mt-4"></i><br>arrow-circle-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-right fa-lg mt-4"></i><br>arrow-circle-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-circle-up fa-lg mt-4"></i><br>arrow-circle-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-down fa-lg mt-4"></i><br>arrow-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-left fa-lg mt-4"></i><br>arrow-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-right fa-lg mt-4"></i><br>arrow-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrow-up fa-lg mt-4"></i><br>arrow-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows fa-lg mt-4"></i><br>arrows
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-alt fa-lg mt-4"></i><br>arrows-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-h fa-lg mt-4"></i><br>arrows-h
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-v fa-lg mt-4"></i><br>arrows-v
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-down fa-lg mt-4"></i><br>caret-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-left fa-lg mt-4"></i><br>caret-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-right fa-lg mt-4"></i><br>caret-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-down fa-lg mt-4"></i><br>caret-square-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-left fa-lg mt-4"></i><br>caret-square-o-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-right fa-lg mt-4"></i><br>caret-square-o-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-square-o-up fa-lg mt-4"></i><br>caret-square-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-caret-up fa-lg mt-4"></i><br>caret-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-circle-down fa-lg mt-4"></i><br>chevron-circle-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-circle-left fa-lg mt-4"></i><br>chevron-circle-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-circle-right fa-lg mt-4"></i><br>chevron-circle-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-circle-up fa-lg mt-4"></i><br>chevron-circle-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-down fa-lg mt-4"></i><br>chevron-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-left fa-lg mt-4"></i><br>chevron-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-right fa-lg mt-4"></i><br>chevron-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chevron-up fa-lg mt-4"></i><br>chevron-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-exchange fa-lg mt-4"></i><br>exchange
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-down fa-lg mt-4"></i><br>hand-o-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-left fa-lg mt-4"></i><br>hand-o-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-right fa-lg mt-4"></i><br>hand-o-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hand-o-up fa-lg mt-4"></i><br>hand-o-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-long-arrow-down fa-lg mt-4"></i><br>long-arrow-down
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-long-arrow-left fa-lg mt-4"></i><br>long-arrow-left
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-long-arrow-right fa-lg mt-4"></i><br>long-arrow-right
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-long-arrow-up fa-lg mt-4"></i><br>long-arrow-up
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-down fa-lg mt-4"></i><br>toggle-down <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-left fa-lg mt-4"></i><br>toggle-left <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-right fa-lg mt-4"></i><br>toggle-right <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-toggle-up fa-lg mt-4"></i><br>toggle-up <span class="text-muted">(alias)</span>
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="video-player">
-      <div slot="header">Video Player Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="video-player">
+      <CCardHeader slot="header">Video Player Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-arrows-alt fa-lg mt-4"></i><br>arrows-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-backward fa-lg mt-4"></i><br>backward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-compress fa-lg mt-4"></i><br>compress
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-eject fa-lg mt-4"></i><br>eject
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-expand fa-lg mt-4"></i><br>expand
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fast-backward fa-lg mt-4"></i><br>fast-backward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fast-forward fa-lg mt-4"></i><br>fast-forward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-forward fa-lg mt-4"></i><br>forward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pause fa-lg mt-4"></i><br>pause
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pause-circle fa-lg mt-4"></i><br>pause-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pause-circle-o fa-lg mt-4"></i><br>pause-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-play fa-lg mt-4"></i><br>play
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-play-circle fa-lg mt-4"></i><br>play-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-play-circle-o fa-lg mt-4"></i><br>play-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-random fa-lg mt-4"></i><br>random
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-step-backward fa-lg mt-4"></i><br>step-backward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-step-forward fa-lg mt-4"></i><br>step-forward
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stop fa-lg mt-4"></i><br>stop
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stop-circle fa-lg mt-4"></i><br>stop-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stop-circle-o fa-lg mt-4"></i><br>stop-circle-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-youtube-play fa-lg mt-4"></i><br>youtube-play
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="brand">
-      <div slot="header">Brand Icons</div>
-      <b-card-body>
+    <CCard noWrapper id="brand">
+      <CCardHeader slot="header">Brand Icons</CCardHeader>
+      <CCardBody slot="body">
         <div class="alert alert-warning">
           <h4><i class="fa fa-warning"></i> Warning!</h4>
           Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -2315,477 +2315,477 @@
           <a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
           an error. To work around this, you'll need to modify the social icon class names.
         </div>
-        <b-row class="text-center">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-500px fa-lg mt-4"></i><br>500px
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-adn fa-lg mt-4"></i><br>adn
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-amazon fa-lg mt-4"></i><br>amazon
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-android fa-lg mt-4"></i><br>android
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-angellist fa-lg mt-4"></i><br>angellist
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-apple fa-lg mt-4"></i><br>apple
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-behance fa-lg mt-4"></i><br>behance
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-behance-square fa-lg mt-4"></i><br>behance-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bitbucket fa-lg mt-4"></i><br>bitbucket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bitbucket-square fa-lg mt-4"></i><br>bitbucket-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bitcoin fa-lg mt-4"></i><br>bitcoin <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-black-tie fa-lg mt-4"></i><br>black-tie
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth fa-lg mt-4"></i><br>bluetooth
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-bluetooth-b fa-lg mt-4"></i><br>bluetooth-b
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-btc fa-lg mt-4"></i><br>btc
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-buysellads fa-lg mt-4"></i><br>buysellads
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-amex fa-lg mt-4"></i><br>cc-amex
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-diners-club fa-lg mt-4"></i><br>cc-diners-club
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-discover fa-lg mt-4"></i><br>cc-discover
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-jcb fa-lg mt-4"></i><br>cc-jcb
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-mastercard fa-lg mt-4"></i><br>cc-mastercard
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-paypal fa-lg mt-4"></i><br>cc-paypal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-stripe fa-lg mt-4"></i><br>cc-stripe
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-cc-visa fa-lg mt-4"></i><br>cc-visa
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-chrome fa-lg mt-4"></i><br>chrome
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-codepen fa-lg mt-4"></i><br>codepen
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-codiepie fa-lg mt-4"></i><br>codiepie
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-connectdevelop fa-lg mt-4"></i><br>connectdevelop
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-contao fa-lg mt-4"></i><br>contao
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-css3 fa-lg mt-4"></i><br>css3
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dashcube fa-lg mt-4"></i><br>dashcube
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-delicious fa-lg mt-4"></i><br>delicious
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-deviantart fa-lg mt-4"></i><br>deviantart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-digg fa-lg mt-4"></i><br>digg
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dribbble fa-lg mt-4"></i><br>dribbble
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-dropbox fa-lg mt-4"></i><br>dropbox
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-drupal fa-lg mt-4"></i><br>drupal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-edge fa-lg mt-4"></i><br>edge
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-empire fa-lg mt-4"></i><br>empire
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-expeditedssl fa-lg mt-4"></i><br>expeditedssl
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-facebook fa-lg mt-4"></i><br>facebook
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-facebook-f fa-lg mt-4"></i><br>facebook-f <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-facebook-official fa-lg mt-4"></i><br>facebook-official
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-facebook-square fa-lg mt-4"></i><br>facebook-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-firefox fa-lg mt-4"></i><br>firefox
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-flickr fa-lg mt-4"></i><br>flickr
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fonticons fa-lg mt-4"></i><br>fonticons
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-fort-awesome fa-lg mt-4"></i><br>fort-awesome
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-forumbee fa-lg mt-4"></i><br>forumbee
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-foursquare fa-lg mt-4"></i><br>foursquare
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ge fa-lg mt-4"></i><br>ge <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-get-pocket fa-lg mt-4"></i><br>get-pocket
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gg fa-lg mt-4"></i><br>gg
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gg-circle fa-lg mt-4"></i><br>gg-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-git fa-lg mt-4"></i><br>git
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-git-square fa-lg mt-4"></i><br>git-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-github fa-lg mt-4"></i><br>github
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-github-alt fa-lg mt-4"></i><br>github-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-github-square fa-lg mt-4"></i><br>github-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gittip fa-lg mt-4"></i><br>gittip <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-google fa-lg mt-4"></i><br>google
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-google-plus fa-lg mt-4"></i><br>google-plus
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-google-plus-square fa-lg mt-4"></i><br>google-plus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-google-wallet fa-lg mt-4"></i><br>google-wallet
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-gratipay fa-lg mt-4"></i><br>gratipay
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hacker-news fa-lg mt-4"></i><br>hacker-news
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-houzz fa-lg mt-4"></i><br>houzz
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-html5 fa-lg mt-4"></i><br>html5
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-instagram fa-lg mt-4"></i><br>instagram
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-internet-explorer fa-lg mt-4"></i><br>internet-explorer
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ioxhost fa-lg mt-4"></i><br>ioxhost
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-joomla fa-lg mt-4"></i><br>joomla
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-jsfiddle fa-lg mt-4"></i><br>jsfiddle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-lastfm fa-lg mt-4"></i><br>lastfm
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-lastfm-square fa-lg mt-4"></i><br>lastfm-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-leanpub fa-lg mt-4"></i><br>leanpub
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-linkedin fa-lg mt-4"></i><br>linkedin
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-linkedin-square fa-lg mt-4"></i><br>linkedin-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-linux fa-lg mt-4"></i><br>linux
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-maxcdn fa-lg mt-4"></i><br>maxcdn
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-meanpath fa-lg mt-4"></i><br>meanpath
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-medium fa-lg mt-4"></i><br>medium
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-mixcloud fa-lg mt-4"></i><br>mixcloud
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-modx fa-lg mt-4"></i><br>modx
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-odnoklassniki fa-lg mt-4"></i><br>odnoklassniki
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-odnoklassniki-square fa-lg mt-4"></i><br>odnoklassniki-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-opencart fa-lg mt-4"></i><br>opencart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-openid fa-lg mt-4"></i><br>openid
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-opera fa-lg mt-4"></i><br>opera
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-optin-monster fa-lg mt-4"></i><br>optin-monster
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pagelines fa-lg mt-4"></i><br>pagelines
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-paypal fa-lg mt-4"></i><br>paypal
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pied-piper fa-lg mt-4"></i><br>pied-piper
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pied-piper-alt fa-lg mt-4"></i><br>pied-piper-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pinterest fa-lg mt-4"></i><br>pinterest
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pinterest-p fa-lg mt-4"></i><br>pinterest-p
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-pinterest-square fa-lg mt-4"></i><br>pinterest-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-product-hunt fa-lg mt-4"></i><br>product-hunt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-qq fa-lg mt-4"></i><br>qq
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ra fa-lg mt-4"></i><br>ra <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-rebel fa-lg mt-4"></i><br>rebel
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reddit fa-lg mt-4"></i><br>reddit
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reddit-alien fa-lg mt-4"></i><br>reddit-alien
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-reddit-square fa-lg mt-4"></i><br>reddit-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-renren fa-lg mt-4"></i><br>renren
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-safari fa-lg mt-4"></i><br>safari
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-scribd fa-lg mt-4"></i><br>scribd
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-sellsy fa-lg mt-4"></i><br>sellsy
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-alt fa-lg mt-4"></i><br>share-alt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-share-alt-square fa-lg mt-4"></i><br>share-alt-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-shirtsinbulk fa-lg mt-4"></i><br>shirtsinbulk
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-simplybuilt fa-lg mt-4"></i><br>simplybuilt
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-skyatlas fa-lg mt-4"></i><br>skyatlas
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-skype fa-lg mt-4"></i><br>skype
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-slack fa-lg mt-4"></i><br>slack
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-slideshare fa-lg mt-4"></i><br>slideshare
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-soundcloud fa-lg mt-4"></i><br>soundcloud
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-spotify fa-lg mt-4"></i><br>spotify
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stack-exchange fa-lg mt-4"></i><br>stack-exchange
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stack-overflow fa-lg mt-4"></i><br>stack-overflow
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-steam fa-lg mt-4"></i><br>steam
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-steam-square fa-lg mt-4"></i><br>steam-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stumbleupon fa-lg mt-4"></i><br>stumbleupon
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stumbleupon-circle fa-lg mt-4"></i><br>stumbleupon-circle
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tencent-weibo fa-lg mt-4"></i><br>tencent-weibo
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-trello fa-lg mt-4"></i><br>trello
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tripadvisor fa-lg mt-4"></i><br>tripadvisor
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tumblr fa-lg mt-4"></i><br>tumblr
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-tumblr-square fa-lg mt-4"></i><br>tumblr-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-twitch fa-lg mt-4"></i><br>twitch
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-twitter fa-lg mt-4"></i><br>twitter
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-twitter-square fa-lg mt-4"></i><br>twitter-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-usb fa-lg mt-4"></i><br>usb
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-viacoin fa-lg mt-4"></i><br>viacoin
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vimeo fa-lg mt-4"></i><br>vimeo
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vimeo-square fa-lg mt-4"></i><br>vimeo-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vine fa-lg mt-4"></i><br>vine
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-vk fa-lg mt-4"></i><br>vk
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wechat fa-lg mt-4"></i><br>wechat <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-weibo fa-lg mt-4"></i><br>weibo
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-weixin fa-lg mt-4"></i><br>weixin
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-whatsapp fa-lg mt-4"></i><br>whatsapp
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wikipedia-w fa-lg mt-4"></i><br>wikipedia-w
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-windows fa-lg mt-4"></i><br>windows
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wordpress fa-lg mt-4"></i><br>wordpress
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-xing fa-lg mt-4"></i><br>xing
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-xing-square fa-lg mt-4"></i><br>xing-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-y-combinator fa-lg mt-4"></i><br>y-combinator
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-y-combinator-square fa-lg mt-4"></i><br>y-combinator-square <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-yahoo fa-lg mt-4"></i><br>yahoo
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-yc fa-lg mt-4"></i><br>yc <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-yc-square fa-lg mt-4"></i><br>yc-square <span class="text-muted">(alias)</span>
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-yelp fa-lg mt-4"></i><br>yelp
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-youtube fa-lg mt-4"></i><br>youtube
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-youtube-play fa-lg mt-4"></i><br>youtube-play
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-youtube-square fa-lg mt-4"></i><br>youtube-square
-          </b-col>
-        </b-row>
+          </CCol>
+        </CRow>
         <div class="alert alert-success mt-4">
           <ul class="margin-bottom-none padding-left-lg">
             <li>All brand icons are trademarks of their respective owners.</li>
@@ -2793,51 +2793,51 @@
             <li>Brand icons should only be used to represent the company or product to which they refer.</li>
           </ul>
         </div>
-      </b-card-body>
-    </b-card>
+      </CCardBody>
+    </CCard>
 
-    <b-card no-body id="medical">
-      <div slot="header">Medical Icons</div>
-      <b-card-body>
-        <b-row class="text-center">
+    <CCard noWrapper id="medical">
+      <CCardHeader slot="header">Medical Icons</CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3" lg="2">
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-ambulance fa-lg mt-4"></i><br>ambulance
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-h-square fa-lg mt-4"></i><br>h-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heart fa-lg mt-4"></i><br>heart
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heart-o fa-lg mt-4"></i><br>heart-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-heartbeat fa-lg mt-4"></i><br>heartbeat
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-hospital-o fa-lg mt-4"></i><br>hospital-o
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-medkit fa-lg mt-4"></i><br>medkit
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-plus-square fa-lg mt-4"></i><br>plus-square
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-stethoscope fa-lg mt-4"></i><br>stethoscope
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-user-md fa-lg mt-4"></i><br>user-md
-          </b-col>
-          <b-col cols="6" sm="4" md="3" lg="2">
+          </CCol>
+          <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-wheelchair fa-lg mt-4"></i><br>wheelchair
-          </b-col>
+          </CCol>
 
-        </b-row>
-      </b-card-body>
-    </b-card>
+        </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
diff --git a/src/views/icons/SimpleLineIcons.vue b/src/views/icons/SimpleLineIcons.vue
index 67734d13..8659ba1a 100644
--- a/src/views/icons/SimpleLineIcons.vue
+++ b/src/views/icons/SimpleLineIcons.vue
@@ -1,746 +1,746 @@
 <template>
   <div class="animated fadeIn">
-    <b-card no-body class="card-default">
-      <div slot="header">
+    <CCard noWrapper class="card-default">
+      <CCardHeader slot="header">
         <i class="fa fa-picture-o"></i> Simple Line Icons
-      </div>
-      <b-card-body>
-        <b-row class="text-center">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow class="text-center">
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
-          </b-col>
+          </CCol>
 
-          <b-col> cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
-          </b-col>
+          </CCol>
 
-          <b-col cols="6" sm="4" md="3">
+          <CCol cols="6" sm="4" md="3">
             <i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
-          </b-col>
-        </b-row><!--/.row-->
-      </b-card-body>
-    </b-card>
+          </CCol>
+        </CRow><!--/.row-->
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 37d53035..92845d9c 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
               <p></p>
               <CAlert show variant="primary">Primary Alert</CAlert>
@@ -25,16 +23,14 @@
               <CAlert show variant="light">Light Alert</CAlert>
               <CAlert show variant="dark">Dark Alert</CAlert>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> Alert
               <small> use <code>.alert-link</code> to provide links</small>
-            </div>
+            </CCardHeader>
             <div>
               <CAlert show variant="primary">
                 Primary Alert with <a href="#" class="alert-link">an example link</a>.
@@ -59,19 +55,17 @@
               </CAlert>
               <CAlert show variant="dark">
                 Dark Alert with
-                <b-link href="#" class="alert-link">an example link</b-link>
+                <CLink href="#" class="alert-link">an example link</CLink>
                 .
               </CAlert>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
-            </div>
+            </CCardHeader>
             <CAlert show variant="success">
               <h4 class="alert-heading">Well done!</h4>
               <p>
@@ -84,15 +78,13 @@
                 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
               </p>
             </CAlert>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
-            </div>
+            </CCardHeader>
             <div>
               <CAlert :show="true" dismissible disabled>
                 Dismissible Alert!
@@ -119,17 +111,15 @@
             >
               Dismissible Alert!
             </CAlert>
-            <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
+            <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
               Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
-            </b-btn>
+            </CButton>
             </div>
-          </b-card>
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+          </CCard>
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
-            </div>
+            </CCardHeader>
             <div>
               <CAlert :show="dismissCountDown"
                        dismissible
@@ -145,32 +135,26 @@
                        @dismissed="dismissCountdown=0"
                        @dismiss-count-down="countDownChanged">
                 Alert will dismiss after {{dismissCountDown}} seconds...
-                <b-progress variant="info"
+                <CProgress variant="info"
                             :max="dismissSecs"
                             :value="dismissCountDown"
                             height="4px">
-                </b-progress>
+                </CProgress>
               </CAlert>
-              <b-btn @click="showAlert" variant="info" class="m-1">
+              <CButton @click="showAlert" variant="info" class="m-1">
                 Show alert with timer
-              </b-btn>
+              </CButton>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
 
 <script>
-// import CAlert from './CAlert'
-// import CButtonClose from './CButtonClose'
 export default {
   name: 'alerts',
-  // components: {
-  //   CAlert,
-  //   CButtonClose
-  // },
   data () {
     return {
       dismissSecs: 10,
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 2f42b188..b17d8e18 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,82 +1,72 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12" md="6">
-          <b-card
-            header-tag="header"
-            footer-tag="footer">
-            <div slot="header">
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
-            </div>
+            </CCardHeader>
             <div>
-              <h2>Example heading <b-badge>New</b-badge></h2>
-              <h3>Example heading <b-badge>New</b-badge></h3>
-              <h4>Example heading <b-badge>New</b-badge></h4>
-              <h5>Example heading <b-badge>New</b-badge></h5>
-              <h6>Example heading <b-badge>New</b-badge></h6>
-            </div>
-            <div slot="footer">
-              <b-button variant="primary">
-                Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
-              </b-button>
+              <h2>Example heading <CBadge>New</CBadge></h2>
+              <h3>Example heading <CBadge>New</CBadge></h3>
+              <h4>Example heading <CBadge>New</CBadge></h4>
+              <h5>Example heading <CBadge>New</CBadge></h5>
+              <h6>Example heading <CBadge>New</CBadge></h6>
             </div>
-          </b-card>
-        </b-col>
-        <b-col cols="12" md="6">
-          <b-card header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>"
-            header-tag="header"
-            footer-tag="footer">
+            <CCardFooter slot="footer">
+              <CButton variant="primary">
+                Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
+              </CButton>
+            </CCardFooter>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
             <div>
-              <b-badge variant="primary">Primary</b-badge>
-              <b-badge variant="secondary">Secondary</b-badge>
-              <b-badge variant="success">Success</b-badge>
-              <b-badge variant="danger">Danger</b-badge>
-              <b-badge variant="warning">Warning</b-badge>
-              <b-badge variant="info">Info</b-badge>
-              <b-badge variant="light">Light</b-badge>
-              <b-badge variant="dark">Dark</b-badge>
+              <CBadge variant="primary">Primary</CBadge>
+              <CBadge variant="secondary">Secondary</CBadge>
+              <CBadge variant="success">Success</CBadge>
+              <CBadge variant="danger">Danger</CBadge>
+              <CBadge variant="warning">Warning</CBadge>
+              <CBadge variant="info">Info</CBadge>
+              <CBadge variant="light">Light</CBadge>
+              <CBadge variant="dark">Dark</CBadge>
             </div>
-          </b-card>
-          <b-card header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>"
-            header-tag="header"
-            footer-tag="footer">
+          </CCard>
+          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
             <div>
-              <b-badge pill variant="primary">Primary</b-badge>
-              <b-badge pill variant="secondary">Secondary</b-badge>
-              <b-badge pill variant="success">Success</b-badge>
-              <b-badge pill variant="danger">Danger</b-badge>
-              <b-badge pill variant="warning">Warning</b-badge>
-              <b-badge pill variant="info">Info</b-badge>
-              <b-badge pill variant="light">Light</b-badge>
-              <b-badge pill variant="dark">Dark</b-badge>
+              <CBadge pill variant="primary">Primary</CBadge>
+              <CBadge pill variant="secondary">Secondary</CBadge>
+              <CBadge pill variant="success">Success</CBadge>
+              <CBadge pill variant="danger">Danger</CBadge>
+              <CBadge pill variant="warning">Warning</CBadge>
+              <CBadge pill variant="info">Info</CBadge>
+              <CBadge pill variant="light">Light</CBadge>
+              <CBadge pill variant="dark">Dark</CBadge>
             </div>
-          </b-card>
-          <b-card header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>"
-            header-tag="header"
-            footer-tag="footer">
+          </CCard>
+          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
             <div>
-              <b-badge href="#" variant="primary">Primary</b-badge>
-              <b-badge href="#" variant="secondary">Secondary</b-badge>
-              <b-badge href="#" variant="success">Success</b-badge>
-              <b-badge href="#" variant="danger">Danger</b-badge>
-              <b-badge href="#" variant="warning">Warning</b-badge>
-              <b-badge href="#" variant="info">Info</b-badge>
-              <b-badge href="#" variant="light">Light</b-badge>
-              <b-badge href="#" variant="dark">Dark</b-badge>
+              <CBadge href="#" variant="primary">Primary</CBadge>
+              <CBadge href="#" variant="secondary">Secondary</CBadge>
+              <CBadge href="#" variant="success">Success</CBadge>
+              <CBadge href="#" variant="danger">Danger</CBadge>
+              <CBadge href="#" variant="warning">Warning</CBadge>
+              <CBadge href="#" variant="info">Info</CBadge>
+              <CBadge href="#" variant="light">Light</CBadge>
+              <CBadge href="#" variant="dark">Dark</CBadge>
             </div>
-          </b-card>
-        </b-col>
-      </b-row>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
-
   </div>
-
 </template>
 
 <script>
diff --git a/src/views/notifications/CAlert.js b/src/views/notifications/CAlert.js
deleted file mode 100644
index 1ca9bf31..00000000
--- a/src/views/notifications/CAlert.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import CButtonClose from './CButtonClose'
-
-export default {
-  name: 'CAlert',
-  components: {CButtonClose},
-  render (h) {
-    if (!this.localShow) {
-      // If not showing, render placeholder
-      return h(false)
-    }
-    let dismissBtn = h(false)
-    if (this.dismissible) {
-      dismissBtn = this.$scopedSlots.default ?
-                   this.$scopedSlots.default({dismiss: this.dismiss}) :
-                    h(
-                      'CButtonClose',
-                      { on: { click: this.dismiss }},
-                      [ this.$slots.dismiss ]
-                    )
-    }
-    const alert = h(
-      'div',
-      {class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
-      [dismissBtn, this.$slots.default]
-    )
-    return !this.fade ? alert : h(
-      'transition',
-      { props: { name: 'fade', appear: true } },
-      [ alert ]
-    )
-  },
-  model: {
-    prop: 'show',
-    event: 'input'
-  },
-  data () {
-    return {
-      countDownTimerId: null,
-      dismissed: false
-    }
-  },
-  computed: {
-    classObject () {
-      return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
-    },
-    localShow () {
-      return !this.dismissed && (this.countDownTimerId || this.show)
-    }
-  },
-  props: {
-    variant: {
-      type: String,
-      default: 'info'
-    },
-    dismissible: {
-      type: [Boolean, Object],
-      default: false
-    },
-    show: {
-      type: [Boolean, Number],
-      default: false
-    },
-    fade: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    show () {
-      this.showChanged()
-    }
-  },
-  mounted () {
-    this.showChanged()
-  },
-  destroyed /* istanbul ignore next */ () {
-    this.clearCounter()
-  },
-  methods: {
-    dismiss () {
-      this.clearCounter()
-      this.dismissed = true
-      this.$emit('dismissed')
-      this.$emit('input', false)
-      if (typeof this.show === 'number') {
-        this.$emit('dismiss-count-down', 0)
-        this.$emit('input', 0)
-      } else {
-        this.$emit('input', false)
-      }
-    },
-    clearCounter () {
-      if (this.countDownTimerId) {
-        clearInterval(this.countDownTimerId)
-        this.countDownTimerId = null
-      }
-    },
-    showChanged () {
-      // Reset counter status
-      this.clearCounter()
-      // Reset dismiss status
-      this.dismissed = false
-      // No timer for boolean values
-      if (this.show === true || this.show === false || this.show === null || this.show === 0) {
-        return
-      }
-      // Start counter (ensure we have an integer value)
-      let dismissCountDown = parseInt(this.show, 10) || 1
-      this.countDownTimerId = setInterval(() => {
-        if (dismissCountDown < 1) {
-          this.dismiss()
-          return
-        }
-        dismissCountDown--
-        this.$emit('dismiss-count-down', dismissCountDown)
-        this.$emit('input', dismissCountDown)
-      }, 1000)
-    }
-  }
-}
diff --git a/src/views/notifications/CButtonClose.js b/src/views/notifications/CButtonClose.js
deleted file mode 100644
index 00bbfbbb..00000000
--- a/src/views/notifications/CButtonClose.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { mergeData } from 'vue-functional-data-merge'
-export default {
-  name: 'CButtonClose',
-  functional: true,
-  render (h, { data, props, slots }) {
-    const componentData = {
-      staticClass: 'close',
-      attrs: {
-        type: props.type || 'button',
-        'aria-label': props.ariaLabel || 'Close'
-      }
-    }
-    if (!slots().default)
-      componentData.domProps = { innerHTML: '&times;' }
-    return h('button', mergeData(data, componentData), slots().default)
-  }
-}
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 7a338188..8d0a3448 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,138 +1,151 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <b-row>
-        <b-col cols="12">
-          <b-card header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
-            <b-button type="button" variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</b-button>
-            <b-button type="button" variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</b-button>
-            <b-button type="button" variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</b-button>
+      <CRow>
+        <CCol cols="12">
+          <CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
+            <CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
+            <CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
+            <CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
             <hr>
-            <b-button type="button" variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</b-button>
-            <b-button type="button" variant="success" @click="successModal = true" class="mr-1">Launch success modal</b-button>
-            <b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
-            <b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
-            <b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
-            <b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button>
-
-          </b-card>
-        </b-col><!--/.col-->
-      </b-row><!--/.row-->
+            <CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
+            <CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
+            <CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
+            <CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
+            <CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
+            <CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
+          </CCard>
+        </CCol><!--/.col-->
+      </CRow><!--/.row-->
     </div>
-
     <!-- Modal Component -->
-    <b-modal title="Modal title" v-model="myModal" @ok="myModal = false">
+    <CModal title="Modal title"
+            :visible="myModal"
+            @hide="myModal = false"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
+    </CModal>
+    <CModal title="Modal title"
+            size="lg"
+            v-model="largeModal"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
+    </CModal>
+    <CModal title="Modal title"
+            size="sm"
+            v-model="smallModal"
+    >
       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.
-    </b-modal>
+    </CModal>
 
-    <b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
+    <CModal title="Modal title"
+            class="modal-primary"
+            v-model="primaryModal"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
+    </CModal>
+    <CModal title="Modal title"
+            class="modal-success"
+            v-model="successModal"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
+    </CModal>
+    <CModal title="Modal title"
+            class="modal-warning"
+            v-model="warningModal"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
+    </CModal>
+    <CModal title="Modal title"
+            class="modal-danger"
+            v-model="dangerModal"
+    >
       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.
-    </b-modal>
-    <b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
+    </CModal>
+    <CModal title="Modal title"
+            class="modal-info"
+            v-model="infoModal"
+    >
       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.
-    </b-modal>
-    <CModal v-model="cmodal"
+    </CModal>
+    <CModal v-model="darkModal"
             :noBackdrop="false"
             :noCloseOnBackdrop="false"
             :noFade="false"
             :centered="true"
             title="Modal title 2"
             size="lg"
-            variant="success"
+            variant="dark"
             borderVariant="danger2"
             addModalClasses="hehe1"
             addDialogClasses="hehe2"
             addContentClasses="hehe3"
-            :noHeader="true"
+            :noHeader="false"
             :noBody="false"
-            :noFooter="true"
+            :noFooter="false"
     >
-    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.
-      <!-- <div slot="header" class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">new header</h5>
-        <button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div> -->
-      <div slot="body" class="modal-body">
-        n
-      </div>
-      <div class="modal-footer" slot="footer">
-        <button type="button" class="btn btn-secondary closeModal">Close2</button>
-        <button type="button" class="btn btn-primary closeModal">OK2</button>
-      </div>
+      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.
+      <template v-slot:header="{hide}">
+        <h5 class="modal-title">Custom modal title</h5>
+        <CButtonClose @click="hide()" class="text-white"/>
+      </template>
+      <template v-slot:footer="{hide}">
+        <CButton @click="hide()" variant="danger">Discard</CButton>
+        <CButton @click="hide()" variant="success">Accept</CButton>
+      </template>
     </CModal>
   </div>
 
 </template>
 
 <script>
-// import CModal from './CModal'
 export default {
   name: 'modals',
-  // components: {
-  //   CModal
-  // },
   data () {
     return {
       myModal: false,
@@ -143,7 +156,7 @@ export default {
       warningModal: false,
       dangerModal: false,
       infoModal: false,
-      cmodal: false
+      darkModal: false
     }
   }
 }
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index c19a536e..54072f8c 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,45 +1,52 @@
 <template>
   <div class="app flex-row align-items-center">
     <div class="container">
-      <b-row class="justify-content-center">
-        <b-col md="8">
-          <b-card-group>
-            <b-card no-body class="p-4">
-              <b-card-body>
-                <b-form>
+      <CRow class="justify-content-center">
+        <CCol md="8">
+          <CCardGroup>
+            <CCard noWrapper class="p-4">
+              <CCardBody slot="body">
+                <CForm>
                   <h1>Login</h1>
                   <p class="text-muted">Sign In to your account</p>
-                  <b-input-group class="mb-3">
-                    <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
-                    <b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username email" />
-                  </b-input-group>
-                  <b-input-group class="mb-4">
-                    <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
-                    <b-form-input type="password" class="form-control" placeholder="Password" autocomplete="current-password" />
-                  </b-input-group>
-                  <b-row>
-                    <b-col cols="6">
-                      <b-button variant="primary" class="px-4">Login</b-button>
-                    </b-col>
-                    <b-col cols="6" class="text-right">
-                      <b-button variant="link" class="px-0">Forgot password?</b-button>
-                    </b-col>
-                  </b-row>
-                </b-form>
-              </b-card-body>
-            </b-card>
-            <b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
-              <b-card-body class="text-center">
-                <div>
-                  <h2>Sign up</h2>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                  <b-button variant="primary" class="active mt-3">Register Now!</b-button>
-                </div>
-              </b-card-body>
-            </b-card>
-          </b-card-group>
-        </b-col>
-      </b-row>
+                  <CFormInput
+                    prepend="<i class='icon-user'></i>"
+                    placeholder="Username"
+                    autocomplete="username email"
+                  />
+                  <CFormInput
+                    prepend="<i class='icon-lock'></i>"
+                    placeholder="Password"
+                    type="password"
+                    autocomplete="curent-password"
+                  />
+                  <CRow>
+                    <CCol cols="6">
+                      <CButton variant="primary" class="px-4">Login</CButton>
+                    </CCol>
+                    <CCol cols="6" class="text-right">
+                      <CButton variant="link" class="px-0">Forgot password?</CButton>
+                    </CCol>
+                  </CRow>
+                </CForm>
+              </CCardBody>
+            </CCard>
+            <CCard
+              class="text-white text-center bg-primary py-5 d-md-down-none"
+              style="width:44%"
+            >
+              <h2>Sign up</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <CButton
+                variant="primary"
+                class="active mt-3"
+              >
+                Register Now!
+              </CButton>
+            </CCard>
+          </CCardGroup>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 6f1ece56..ac6e8b2c 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="app flex-row align-items-center">
     <div class="container">
-      <b-row class="justify-content-center">
-        <b-col md="6">
+      <CRow class="justify-content-center">
+        <CCol md="6">
           <div class="clearfix">
             <h1 class="float-left display-3 mr-4">404</h1>
             <h4 class="pt-3">Oops! You're lost.</h4>
             <p class="text-muted">The page you are looking for was not found.</p>
           </div>
-          <b-input-group>
-            <b-input-group-prepend>
-              <b-input-group-text>
-                <i class="fa fa-search"></i>
-              </b-input-group-text>
-            </b-input-group-prepend>
-            <input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
-            <b-input-group-append>
-              <b-button variant="info">Search</b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-col>
-      </b-row>
+          <CFormInput
+            class="mb-0"
+            prepend="<i class='fa fa-search'></i>"
+            placeholder="What are you looking for?"
+          >
+            <template #append>
+              <CButton variant="info">Search</CButton>
+            </template>
+          </CFormInput>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 126f2c55..4785d949 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="app flex-row align-items-center">
     <div class="container">
-      <b-row class="justify-content-center">
-        <b-col md="6">
+      <CRow class="justify-content-center">
+        <CCol md="6">
           <div class="clearfix">
             <h1 class="float-left display-3 mr-4">500</h1>
             <h4 class="pt-3">Houston, we have a problem!</h4>
             <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
           </div>
-          <b-input-group>
-            <b-input-group-prepend>
-              <b-input-group-text>
-                <i class="fa fa-search"></i>
-              </b-input-group-text>
-            </b-input-group-prepend>
-            <input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
-            <b-input-group-append>
-              <b-button variant="info">Search</b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-col>
-      </b-row>
+          <CFormInput
+            class="mb-0"
+            prepend="<i class='fa fa-search'></i>"
+            placeholder="What are you looking for?"
+          >
+            <template #append>
+              <CButton variant="info">Search</CButton>
+            </template>
+          </CFormInput>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 474703d3..62e1b354 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,57 +1,56 @@
 <template>
   <div class="app flex-row align-items-center">
     <div class="container">
-      <b-row class="justify-content-center">
-        <b-col md="6" sm="8">
-          <b-card no-body class="mx-4">
-            <b-card-body class="p-4">
-              <b-form>
-                <h1>Register</h1>
-                <p class="text-muted">Create your account</p>
-                <b-input-group class="mb-3">
-                  <b-input-group-prepend>
-                    <b-input-group-text><i class="icon-user"></i></b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username" />
-                </b-input-group>
-
-                <b-input-group class="mb-3">
-                  <b-input-group-prepend>
-                    <b-input-group-text>@</b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-input type="text" class="form-control" placeholder="Email" autocomplete="email" />
-                </b-input-group>
-
-                <b-input-group class="mb-3">
-                  <b-input-group-prepend>
-                    <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-input type="password" class="form-control" placeholder="Password" autocomplete="new-password" />
-                </b-input-group>
-
-                <b-input-group class="mb-4">
-                  <b-input-group-prepend>
-                    <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
-                  </b-input-group-prepend>
-                  <b-form-input type="password" class="form-control" placeholder="Repeat password" autocomplete="new-password" />
-                </b-input-group>
-
-                <b-button variant="success" block>Create Account</b-button>
-              </b-form>
-            </b-card-body>
-            <b-card-footer class="p-4">
-              <b-row>
-                <b-col cols="6">
-                  <b-button block class="btn btn-facebook"><span>facebook</span></b-button>
-                </b-col>
-                <b-col cols="6">
-                  <b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button>
-                </b-col>
-              </b-row>
-            </b-card-footer>
-          </b-card>
-        </b-col>
-      </b-row>
+      <CRow class="justify-content-center">
+        <CCol md="6" sm="8">
+          <CCard class="mx-4">
+            <template #body>
+              <CCardBody class="p-4">
+                <CForm>
+                  <h1>Register</h1>
+                  <p class="text-muted">Create your account</p>
+                  <CFormInput
+                    placeholder="Username"
+                    prepend="<i class='icon-user'></i>"
+                    autocomplete="username"
+                  />
+                  <CFormInput
+                    placeholder="Email"
+                    prepend="@"
+                    autocomplete="email"
+                  />
+                  <CFormInput
+                    placeholder="Password"
+                    type="password"
+                    prepend="<i class='icon-lock'></i>"
+                    autocomplete="new-password"
+                  />
+                  <CFormInput
+                    placeholder="Repeat password"
+                    type="password"
+                    prepend="<i class='icon-lock'></i>"
+                    autocomplete="new-password"
+                    class="mb-4"
+                  />
+                  <CButton variant="success" block>Create Account</CButton>
+                </CForm>
+              </CCardBody>
+            </template>
+            <template #footer>
+              <CCardFooter class="p-4">
+                <CRow>
+                  <CCol cols="6">
+                    <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
+                  </CCol>
+                  <CCol cols="6">
+                    <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
+                  </CCol>
+                </CRow>
+              </CCardFooter>
+            </template>
+          </CCard>
+        </CCol>
+      </CRow>
     </div>
   </div>
 </template>
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index f1343787..61fed42f 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -1,9 +1,9 @@
 <template>
-  <b-col xl="2" md="4" sm="6" xs="12" class="mb-4">
+  <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
     <div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
     <slot></slot>
-    <color-view/>
-  </b-col>
+    <ColorView/>
+  </CCol>
 </template>
 
 <script>
@@ -23,4 +23,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index 277fce9c..38dec887 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,67 +1,66 @@
 <template>
   <div class="animated fadeIn">
-    <b-card header-tag="header">
-      <div slot="header">
+    <CCard >
+      <CCardHeader slot="header">
         <i class="icon-drop"></i> Theme colors
-      </div>
-      <b-card-body>
-        <b-row>
-          <color-theme color="bg-primary">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow>
+          <ColorTheme color="bg-primary">
             <h6>Brand Primary Color</h6>
-          </color-theme>
-          <color-theme color="bg-secondary"><h6>Brand Secondary Color</h6></color-theme>
-          <color-theme color="bg-success"><h6>Brand Success Color</h6></color-theme>
-          <color-theme color="bg-danger"><h6>Brand Danger Color</h6></color-theme>
-          <color-theme color="bg-warning"><h6>Brand Warning Color</h6></color-theme>
-          <color-theme color="bg-info"><h6>Brand Info Color</h6></color-theme>
-          <color-theme color="bg-light"><h6>Brand Light Color</h6></color-theme>
-          <color-theme color="bg-dark"><h6>Brand Dark Color</h6></color-theme>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card header-tag="header">
-      <div slot="header">
+          </ColorTheme>
+          <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+          <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+          <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+          <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
+          <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
+          <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
+          <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard >
+      <CCardHeader slot="header">
         <i class="icon-drop"></i> Grays
-      </div>
-      <b-card-body>
-        <b-row>
-          <color-theme color="bg-gray-100"><h6>Brand 100 Color</h6></color-theme>
-          <color-theme color="bg-gray-200"><h6>Brand 200 Color</h6></color-theme>
-          <color-theme color="bg-gray-300"><h6>Brand 300 Color</h6></color-theme>
-          <color-theme color="bg-gray-400"><h6>Brand 400 Color</h6></color-theme>
-          <color-theme color="bg-gray-500"><h6>Brand 500 Color</h6></color-theme>
-          <color-theme color="bg-gray-600"><h6>Brand 600 Color</h6></color-theme>
-          <color-theme color="bg-gray-700"><h6>Brand 700 Color</h6></color-theme>
-          <color-theme color="bg-gray-800"><h6>Brand 800 Color</h6></color-theme>
-          <color-theme color="bg-gray-900"><h6>Brand 900 Color</h6></color-theme>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card header-tag="header">
-      <div slot="header">
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow>
+          <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
+          <ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard >
+      <CCardHeader slot="header">
         <i class="icon-drop"></i> Additional colors
-      </div>
-      <b-card-body>
-        <b-row>
-          <color-theme color="bg-blue"><h6>Brand Blue Color</h6></color-theme>
-          <color-theme color="bg-indigo"><h6>Brand Indigo Color</h6></color-theme>
-          <color-theme color="bg-purple"><h6>Brand Purple Color</h6></color-theme>
-          <color-theme color="bg-pink"><h6>Brand Pink Color</h6></color-theme>
-          <color-theme color="bg-red"><h6>Brand Red Color</h6></color-theme>
-          <color-theme color="bg-orange"><h6>Brand Orange Color</h6></color-theme>
-          <color-theme color="bg-yellow"><h6>Brand Yellow Color</h6></color-theme>
-          <color-theme color="bg-green"><h6>Brand Green Color</h6></color-theme>
-          <color-theme color="bg-teal"><h6>Brand Teal Color</h6></color-theme>
-          <color-theme color="bg-cyan"><h6>Brand Cyan Color</h6></color-theme>
-        </b-row>
-      </b-card-body>
-    </b-card>
+      </CCardHeader>
+      <CCardBody slot="body">
+        <CRow>
+          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
+          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
+          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
+          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
+          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
+          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
+          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
+          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
+          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
+          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
+        </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
 <script>
 import ColorTheme from './ColorTheme'
-
 export default {
   name: 'colors',
   components: { ColorTheme }
diff --git a/src/views/users/User.vue b/src/views/users/User.vue
index bcaf6fce..40b9e4ab 100644
--- a/src/views/users/User.vue
+++ b/src/views/users/User.vue
@@ -1,21 +1,24 @@
 <template>
-  <b-row>
-    <b-col cols="12" lg="6">
-      <b-card no-header>
+  <CRow>
+    <CCol cols="12"
+          lg="6"
+    >
+      <CCard no-header>
         <template slot="header">
           User id:  {{ $route.params.id }}
         </template>
-        <b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
-          <template slot="value" slot-scope="data">
-            <strong>{{data.item.value}}</strong>
-          </template>
-        </b-table>
+        <CTable striped
+                small
+                fixed
+                :items="items($route.params.id)"
+                :fields="$options.fields"
+        />
         <template slot="footer">
-          <b-button @click="goBack">Back</b-button>
+          <CButton @click="goBack">Back</CButton>
         </template>
-      </b-card>
-    </b-col>
-  </b-row>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
@@ -28,20 +31,16 @@ export default {
       default: 'User id'
     },
   },
-  data: () => {
-    return {
-      items: (id) => {
-        const user = usersData.find( user => user.id.toString() === id)
-        const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
-        return userDetails.map(([key, value]) => {return {key: key, value: value}})
-      },
-      fields: [
-        {key: 'key'},
-        {key: 'value'},
-      ],
-    }
-  },
+  fields: [
+    { key: 'key', _style:'width:150px'},
+    { key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
+  ],
   methods: {
+    items (id) {
+      const user = usersData.find( user => user.id.toString() === id)
+      const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
+      return userDetails.map(([key, value]) => {return {key: key, value: value}})
+    },
     goBack() {
       this.$router.go(-1)
       // this.$router.replace({path: '/users'})
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index 7c8d8ea6..53e46468 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -1,58 +1,37 @@
 <template>
-  <b-row>
-    <b-col cols="12" xl="6">
+  <CRow>
+    <CCol cols="12" xl="6">
       <transition name="slide">
-      <b-card :header="caption">
-        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
-          <template slot="id" slot-scope="data">
-            <strong>{{data.item.id}}</strong>
-          </template>
-          <template slot="name" slot-scope="data">
-            <strong>{{data.item.name}}</strong>
-          </template>
-          <template slot="status" slot-scope="data">
-            <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
-          </template>
-        </b-table>
-        <nav>
-          <b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
-        </nav>
-      </b-card>
+        <CCard header="users">
+          <CTable hover
+                  striped
+                  :items="items"
+                  :fields="fields"
+                  :current-page="currentPage"
+                  :per-page="perPage"
+                  @row-clicked="rowClicked"
+                  :paginationProps="$options.paginationProps"
+          >
+            <td slot="id" slot-scope="data">
+              <strong>{{data.item.id}}</strong>
+            </td>
+            <td slot="name" slot-scope="data">
+              <strong>{{data.item.name}}</strong>
+            </td>
+            <td slot="status" slot-scope="data">
+              <CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
+            </td>
+          </CTable>
+        </CCard>
       </transition>
-    </b-col>
-  </b-row>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 import usersData from './UsersData'
 export default {
   name: 'Users',
-  props: {
-    caption: {
-      type: String,
-      default: 'Users'
-    },
-    hover: {
-      type: Boolean,
-      default: true
-    },
-    striped: {
-      type: Boolean,
-      default: true
-    },
-    bordered: {
-      type: Boolean,
-      default: false
-    },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
   data: () => {
     return {
       items: usersData.filter((user) => user.id < 42),
@@ -68,7 +47,12 @@ export default {
       totalRows: 0
     }
   },
-  computed: {
+  paginationProps: {
+    // size: 'sm',
+    align: 'center',
+    hideDoubleArrows: true,
+    previousButtonText: 'prev',
+    nextButtonText: 'next'
   },
   methods: {
     getBadge (status) {
@@ -77,9 +61,6 @@ export default {
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    getRowCount (items) {
-      return items.length
-    },
     userLink (id) {
       return `users/${id.toString()}`
     },
diff --git a/src/views/users/UsersData.js b/src/views/users/UsersData.js
index 977920d5..506e990d 100644
--- a/src/views/users/UsersData.js
+++ b/src/views/users/UsersData.js
@@ -1,5 +1,5 @@
 const usersData = [
-  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
   {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
   {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
   {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
diff --git a/vue.config.js b/vue.config.js
index 1eaa50ca..b86b15e8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,10 @@
 module.exports = {
   lintOnSave: false,
-  runtimeCompiler: true
+  runtimeCompiler: true,
+  configureWebpack: {
+    //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
+    resolve: {
+       symlinks: false
+    }
+  }
 }