From 8c753a3caa5f3588778a9b773fb92892ce2cac25 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 13:58:30 +0200
Subject: [PATCH 1/7] refactor: extract random() to shared/utils

---
 src/shared/utils.js                      | 3 +++
 src/views/dashboard/MainChartExample.vue | 5 +----
 2 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/utils.js

diff --git a/src/shared/utils.js b/src/shared/utils.js
new file mode 100644
index 00000000..e7eeb133
--- /dev/null
+++ b/src/shared/utils.js
@@ -0,0 +1,3 @@
+export function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
diff --git a/src/views/dashboard/MainChartExample.vue b/src/views/dashboard/MainChartExample.vue
index 6cc712a2..fe6cdb1f 100644
--- a/src/views/dashboard/MainChartExample.vue
+++ b/src/views/dashboard/MainChartExample.vue
@@ -2,10 +2,7 @@
 import { Line } from 'vue-chartjs'
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-function random (min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
+import { random } from '@/shared/utils'
 
 export default {
   extends: Line,

From ba8ce87fcabd76c9dab3a6def95bcf878d619b09 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 14:00:40 +0200
Subject: [PATCH 2/7] refactor: views cleanup

---
 src/containers/DefaultContainer.vue |  2 +-
 src/views/base/Popovers.vue         |  4 ++--
 src/views/base/ProgressBars.vue     | 13 ++++++++-----
 src/views/base/Switches.vue         |  5 -----
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index 3579dfb0..f227a39a 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -68,7 +68,7 @@ import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
 export default {
-  name: 'full',
+  name: 'DefaultContainer',
   components: {
     AsideToggler,
     AppHeader,
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 17db010e..04362fbb 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -42,10 +42,10 @@
           <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">
+              <b-btn :id="`exPopover1-${placement}`" variant="primary">
                 {{ placement }}
               </b-btn>
-              <b-popover :target="'exPopover1-'+placement"
+              <b-popover :target="`exPopover1-${placement}`"
                          :placement="placement"
                          title="Popover!"
                          triggers="hover focus"
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index a3858341..0ab15603 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -185,14 +185,17 @@ export default {
       this.counter = Math.random() * this.max
       console.log('Change progress to ' +
           Math.round(this.counter * 100) / 100)
+    },
+    setClock() {
+      this.timer = setInterval(() => {
+        this.bars.forEach(bar => {
+          bar.value = 25 + (Math.random() * 75)
+        })
+      }, 2000)
     }
   },
   mounted () {
-    this.timer = setInterval(() => {
-      this.bars.forEach(bar => {
-        bar.value = 25 + (Math.random() * 75)
-      })
-    }, 2000)
+    this.setClock()
   },
   beforeDestroy () {
     clearInterval(this.timer)
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 32888775..4c32da35 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -417,11 +417,6 @@ export default {
   components: {
     cSwitch
   },
-  computed: {
-    icon (icon) {
-      return icon
-    }
-  },
   data: () => {
     return {
       fields: [

From d6cfdaa88cbe5a244577467629350244f49917aa Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 14:35:53 +0200
Subject: [PATCH 3/7] refactor: views Tables, Table

- refactor: extract shuffleArray() to shared/utils
- refactor: Tables/Table pass items as props to c-table
---
 src/shared/utils.js       | 14 +++++++
 src/views/base/Table.vue  | 82 ++++++++++++++-------------------------
 src/views/base/Tables.vue | 68 ++++++++++++++++++++++++++------
 3 files changed, 101 insertions(+), 63 deletions(-)

diff --git a/src/shared/utils.js b/src/shared/utils.js
index e7eeb133..80999d08 100644
--- a/src/shared/utils.js
+++ b/src/shared/utils.js
@@ -1,3 +1,17 @@
 export function random (min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
 }
+
+/**
+ * Randomize array element order in-place.
+ * Using Durstenfeld shuffle algorithm.
+ */
+export 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
+}
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 7980d995..d940b225 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,33 +1,22 @@
 <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">
+    <b-table :dark="dark" :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="captions" :current-page="currentPage" :per-page="perPage">
       <template slot="status" slot-scope="data">
         <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
       </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/>
+      <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
     </nav>
   </b-card>
 </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
-}
+
 
 export default {
   name: 'c-table',
+  inheritAttrs: false,
   props: {
     caption: {
       type: String,
@@ -52,48 +41,37 @@ export default {
     fixed: {
       type: Boolean,
       default: false
+    },
+    tableData: {
+      type: [Array, Function],
+      default: () => []
+    },
+    fields: {
+      type: [Array, Object],
+      default: () => []
+    },
+    perPage: {
+      type: Number,
+      default: 5
+    },
+    dark: {
+      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
     }
   },
+  computed: {
+    items: function() {
+      const items =  this.tableData
+      return Array.isArray(items) ? items : items()
+    },
+    totalRows: function () { return this.getRowCount() },
+    captions: function() { return this.fields }
+  },
   methods: {
     getBadge (status) {
       return status === 'Active' ? 'success'
@@ -101,8 +79,8 @@ export default {
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    getRowCount (items) {
-      return items.length
+    getRowCount: function () {
+      return this.items.length
     }
   }
 }
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 96cdea52..d5dac3de 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -3,27 +3,32 @@
 
     <b-row>
       <b-col lg="6">
-        <c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" :fields="fields" caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
+      </b-col>
 
       <b-col lg="6">
-        <c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
+      </b-col>
     </b-row><!--/.row-->
 
     <b-row>
       <b-col lg="6">
-        <c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
+      </b-col>
 
       <b-col lg="6">
-        <c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
-      </b-col><!--/.col-->
-    </b-row><!--/.row-->
+        <c-table :table-data="items" fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
+      </b-col>
+    </b-row>
 
     <b-row>
       <b-col sm="12">
-        <c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
+        <c-table :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <c-table dark :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Dark Table"></c-table>
       </b-col>
     </b-row>
   </div>
@@ -31,10 +36,51 @@
 </template>
 
 <script>
+import { shuffleArray } from '@/shared/utils'
 import cTable from './Table.vue'
 
+const someData = () => shuffleArray([
+  {username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active', _rowVariant: 'success'},
+  {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned', _rowVariant: 'danger'},
+  {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _rowVariant: 'info'},
+  {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'}
+])
+
 export default {
   name: 'tables',
-  components: {cTable}
+  components: {cTable},
+  data: () => {
+    return {
+      items: someData,
+      itemsArray: someData(),
+      fields: [
+        {key: 'username', label: 'User', sortable: true},
+        {key: 'registered'},
+        {key: 'role'},
+        {key: 'status', sortable: true}
+      ],
+    }
+  }
 }
 </script>

From e5a3e32283ab0539de5e58eb2841d34f08e34d87 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 14:42:30 +0200
Subject: [PATCH 4/7] tests(e2e): add some more test cases

---
 tests/e2e/specs/test.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 4bab3dce..53d7e4ac 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -40,14 +40,14 @@ module.exports = {
     browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
       console.log('response', typeof response)
       this.assert.ok(browser === this, 'Check if the context is right.')
-      this.assert.cssClassPresent('body', 'aside-menu-show')
+      this.assert.cssClassPresent('body', 'aside-menu-lg-show')
     })
 
     browser.pause(500)
 
     browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
       console.log('response', typeof response)
-      this.assert.cssClassNotPresent('body', 'aside-menu-show')
+      this.assert.cssClassNotPresent('body', 'aside-menu-lg-show')
     })
 
     browser.pause(500)
@@ -72,6 +72,7 @@ module.exports = {
         console.log('response', typeof response)
         this.assert.cssClassPresent('/html/body', 'sidebar-minimized')
         this.assert.cssClassPresent('/html/body', 'brand-minimized')
+        this.assert.cssProperty("/html/body/div/div/main", "margin-left", "50px");
       })
       .pause(500)
       .click('/html/body/div/div/div/button', function (response) {
@@ -89,6 +90,7 @@ module.exports = {
     .click('/html/body/div/header/button[1]', function (response) {
       console.log('response', typeof response)
       this.assert.cssClassPresent('/html/body', 'sidebar-show')
+      this.assert.cssProperty("/html/body/div/div/main", "margin-left", "200px");
     })
 
     browser
@@ -98,6 +100,16 @@ module.exports = {
       this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
     })
 
+    browser
+    .resizeWindow(500, 600)
+    .pause(500)
+
+    .click('/html/body/div/header/button[1]', function (response) {
+      console.log('response', typeof response)
+      this.assert.cssClassPresent('/html/body', 'sidebar-show')
+      this.assert.cssProperty("/html/body/div/div/main", "margin-left", "0px");
+    })
+
     browser
       .pause(5000)
       .end()

From aa064d3bb0407a6e38f7c128ecf6b03dd5eac4f0 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 14:48:07 +0200
Subject: [PATCH 5/7] tests(unit): add more test cases and snapshots

---
 tests/unit/Users.spec.js                      |    35 -
 .../{ => containers}/DefaultAside.spec.js     |     5 +
 .../{ => containers}/DefaultContainer.spec.js |    11 +-
 .../DefaultHeaderDropdownAccnt.spec.js        |     5 +
 .../__snapshots__/DefaultAside.spec.js.snap   |   946 +
 .../DefaultContainer.spec.js.snap             |   231 +
 .../DefaultHeaderDropdownAccnt.spec.js.snap   |   243 +
 tests/unit/shared/classes.spec.js             |    33 +
 tests/unit/shared/toggle-classes.spec.js      |    22 +
 tests/unit/shared/utils.spec.js               |    23 +
 tests/unit/{ => views}/Charts.spec.js         |     6 +-
 tests/unit/{ => views}/Dashboard.spec.js      |    13 +
 tests/unit/{ => views}/Widgets.spec.js        |     4 +
 .../views/__snapshots__/Charts.spec.js.snap   |   121 +
 .../__snapshots__/Dashboard.spec.js.snap      |  1657 ++
 .../views/__snapshots__/Widgets.spec.js.snap  |  2032 +++
 .../unit/{ => views/base}/Breadcrumbs.spec.js |     4 +
 tests/unit/{ => views/base}/Cards.spec.js     |     4 +
 tests/unit/{ => views/base}/Carousels.spec.js |    10 +
 tests/unit/{ => views/base}/Collapses.spec.js |     4 +
 tests/unit/{ => views/base}/Forms.spec.js     |     4 +
 .../unit/{ => views/base}/Jumbotrons.spec.js  |     4 +
 .../unit/{ => views/base}/ListGroups.spec.js  |     4 +
 tests/unit/{ => views/base}/Navbars.spec.js   |     4 +
 tests/unit/{ => views/base}/Navs.spec.js      |     4 +
 .../unit/{ => views/base}/Paginations.spec.js |     4 +
 tests/unit/{ => views/base}/Popovers.spec.js  |    21 +-
 .../{ => views/base}/ProgressBars.spec.js     |    16 +-
 tests/unit/{ => views/base}/Switches.spec.js  |     6 +-
 tests/unit/{ => views/base}/Table.spec.js     |     6 +-
 tests/unit/{ => views/base}/Tables.spec.js    |     6 +-
 tests/unit/{ => views/base}/Tabs.spec.js      |     6 +-
 tests/unit/{ => views/base}/Tooltips.spec.js  |    21 +-
 .../__snapshots__/Breadcrumbs.spec.js.snap    |    96 +
 .../base/__snapshots__/Cards.spec.js.snap     |   842 +
 .../base/__snapshots__/Carousels.spec.js.snap |   256 +
 .../base/__snapshots__/Collapses.spec.js.snap |   583 +
 .../base/__snapshots__/Forms.spec.js.snap     |  3544 ++++
 .../__snapshots__/Jumbotrons.spec.js.snap     |   242 +
 .../__snapshots__/ListGroups.spec.js.snap     |  1188 ++
 .../base/__snapshots__/Navbars.spec.js.snap   |   590 +
 .../base/__snapshots__/Navs.spec.js.snap      |   553 +
 .../__snapshots__/Paginations.spec.js.snap    |   216 +
 .../base/__snapshots__/Popovers.spec.js.snap  |   941 +
 .../__snapshots__/ProgressBars.spec.js.snap   |   745 +
 .../base/__snapshots__/Switches.spec.js.snap  |  3283 ++++
 .../base/__snapshots__/Table.spec.js.snap     |    40 +
 .../base/__snapshots__/Tables.spec.js.snap    |   642 +
 .../base/__snapshots__/Tabs.spec.js.snap      |   383 +
 .../base/__snapshots__/Tooltips.spec.js.snap  |   451 +
 .../{ => views/buttons}/BrandButtons.spec.js  |     4 +
 .../buttons}/ButtonDropdowns.spec.js          |     4 +
 .../{ => views/buttons}/ButtonGroups.spec.js  |     4 +
 .../buttons}/StandardButtons.spec.js          |     4 +
 .../__snapshots__/BrandButtons.spec.js.snap   |  2460 +++
 .../ButtonDropdowns.spec.js.snap              |  1486 ++
 .../__snapshots__/ButtonGroups.spec.js.snap   |   836 +
 .../StandardButtons.spec.js.snap              |  4397 +++++
 .../{ => views/icons}/CoreUIIcons.spec.js     |     4 +
 tests/unit/{ => views/icons}/Flags.spec.js    |     4 +
 .../{ => views/icons}/FontAwesome.spec.js     |     4 +
 .../{ => views/icons}/SimpleLineIcons.spec.js |     4 +
 .../__snapshots__/CoreUIIcons.spec.js.snap    |  1250 ++
 .../icons/__snapshots__/Flags.spec.js.snap    |  4290 +++++
 .../__snapshots__/FontAwesome.spec.js.snap    | 14258 ++++++++++++++++
 .../SimpleLineIcons.spec.js.snap              |  2417 +++
 .../{ => views/notifications}/Alerts.spec.js  |    10 +
 .../{ => views/notifications}/Badges.spec.js  |     4 +
 .../{ => views/notifications}/Modals.spec.js  |     4 +
 .../__snapshots__/Alerts.spec.js.snap         |   479 +
 .../__snapshots__/Badges.spec.js.snap         |   357 +
 .../__snapshots__/Modals.spec.js.snap         |   309 +
 tests/unit/{ => views/pages}/Login.spec.js    |     4 +
 tests/unit/{ => views/pages}/Page404.spec.js  |     4 +
 tests/unit/{ => views/pages}/Page500.spec.js  |     4 +
 tests/unit/{ => views/pages}/Register.spec.js |     4 +
 .../pages/__snapshots__/Login.spec.js.snap    |   184 +
 .../pages/__snapshots__/Page404.spec.js.snap  |    84 +
 .../pages/__snapshots__/Page500.spec.js.snap  |    84 +
 .../pages/__snapshots__/Register.spec.js.snap |   208 +
 tests/unit/{ => views/theme}/Colors.spec.js   |     4 +
 .../unit/{ => views/theme}/Typography.spec.js |     4 +
 .../theme/__snapshots__/Colors.spec.js.snap   |  1387 ++
 .../__snapshots__/Typography.spec.js.snap     |   502 +
 tests/unit/{ => views/users}/User.spec.js     |    16 +
 tests/unit/views/users/Users.spec.js          |    65 +
 .../users/__snapshots__/User.spec.js.snap     |    62 +
 .../users/__snapshots__/Users.spec.js.snap    |    54 +
 88 files changed, 55320 insertions(+), 49 deletions(-)
 delete mode 100644 tests/unit/Users.spec.js
 rename tests/unit/{ => containers}/DefaultAside.spec.js (59%)
 rename tests/unit/{ => containers}/DefaultContainer.spec.js (72%)
 rename tests/unit/{ => containers}/DefaultHeaderDropdownAccnt.spec.js (77%)
 create mode 100644 tests/unit/containers/__snapshots__/DefaultAside.spec.js.snap
 create mode 100644 tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
 create mode 100644 tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
 create mode 100644 tests/unit/shared/classes.spec.js
 create mode 100644 tests/unit/shared/toggle-classes.spec.js
 create mode 100644 tests/unit/shared/utils.spec.js
 rename tests/unit/{ => views}/Charts.spec.js (72%)
 rename tests/unit/{ => views}/Dashboard.spec.js (62%)
 rename tests/unit/{ => views}/Widgets.spec.js (86%)
 create mode 100644 tests/unit/views/__snapshots__/Charts.spec.js.snap
 create mode 100644 tests/unit/views/__snapshots__/Dashboard.spec.js.snap
 create mode 100644 tests/unit/views/__snapshots__/Widgets.spec.js.snap
 rename tests/unit/{ => views/base}/Breadcrumbs.spec.js (89%)
 rename tests/unit/{ => views/base}/Cards.spec.js (88%)
 rename tests/unit/{ => views/base}/Carousels.spec.js (70%)
 rename tests/unit/{ => views/base}/Collapses.spec.js (89%)
 rename tests/unit/{ => views/base}/Forms.spec.js (88%)
 rename tests/unit/{ => views/base}/Jumbotrons.spec.js (85%)
 rename tests/unit/{ => views/base}/ListGroups.spec.js (85%)
 rename tests/unit/{ => views/base}/Navbars.spec.js (84%)
 rename tests/unit/{ => views/base}/Navs.spec.js (84%)
 rename tests/unit/{ => views/base}/Paginations.spec.js (88%)
 rename tests/unit/{ => views/base}/Popovers.spec.js (54%)
 rename tests/unit/{ => views/base}/ProgressBars.spec.js (67%)
 rename tests/unit/{ => views/base}/Switches.spec.js (84%)
 rename tests/unit/{ => views/base}/Table.spec.js (82%)
 rename tests/unit/{ => views/base}/Tables.spec.js (77%)
 rename tests/unit/{ => views/base}/Tabs.spec.js (84%)
 rename tests/unit/{ => views/base}/Tooltips.spec.js (56%)
 create mode 100644 tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Cards.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Forms.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Navs.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Popovers.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Switches.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Table.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Tables.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
 create mode 100644 tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
 rename tests/unit/{ => views/buttons}/BrandButtons.spec.js (85%)
 rename tests/unit/{ => views/buttons}/ButtonDropdowns.spec.js (85%)
 rename tests/unit/{ => views/buttons}/ButtonGroups.spec.js (85%)
 rename tests/unit/{ => views/buttons}/StandardButtons.spec.js (89%)
 create mode 100644 tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
 create mode 100644 tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
 create mode 100644 tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
 create mode 100644 tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
 rename tests/unit/{ => views/icons}/CoreUIIcons.spec.js (85%)
 rename tests/unit/{ => views/icons}/Flags.spec.js (84%)
 rename tests/unit/{ => views/icons}/FontAwesome.spec.js (84%)
 rename tests/unit/{ => views/icons}/SimpleLineIcons.spec.js (85%)
 create mode 100644 tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
 create mode 100644 tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
 create mode 100644 tests/unit/views/icons/__snapshots__/FontAwesome.spec.js.snap
 create mode 100644 tests/unit/views/icons/__snapshots__/SimpleLineIcons.spec.js.snap
 rename tests/unit/{ => views/notifications}/Alerts.spec.js (70%)
 rename tests/unit/{ => views/notifications}/Badges.spec.js (85%)
 rename tests/unit/{ => views/notifications}/Modals.spec.js (88%)
 create mode 100644 tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
 create mode 100644 tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
 create mode 100644 tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
 rename tests/unit/{ => views/pages}/Login.spec.js (83%)
 rename tests/unit/{ => views/pages}/Page404.spec.js (84%)
 rename tests/unit/{ => views/pages}/Page500.spec.js (84%)
 rename tests/unit/{ => views/pages}/Register.spec.js (84%)
 create mode 100644 tests/unit/views/pages/__snapshots__/Login.spec.js.snap
 create mode 100644 tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
 create mode 100644 tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
 create mode 100644 tests/unit/views/pages/__snapshots__/Register.spec.js.snap
 rename tests/unit/{ => views/theme}/Colors.spec.js (85%)
 rename tests/unit/{ => views/theme}/Typography.spec.js (84%)
 create mode 100644 tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
 create mode 100644 tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
 rename tests/unit/{ => views/users}/User.spec.js (76%)
 create mode 100644 tests/unit/views/users/Users.spec.js
 create mode 100644 tests/unit/views/users/__snapshots__/User.spec.js.snap
 create mode 100644 tests/unit/views/users/__snapshots__/Users.spec.js.snap

diff --git a/tests/unit/Users.spec.js b/tests/unit/Users.spec.js
deleted file mode 100644
index 9f7421be..00000000
--- a/tests/unit/Users.spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Users from '@/views/users/Users'
-
-Vue.use(BootstrapVue)
-
-describe('Users.vue', () => {
-  it('has a name', () => {
-    expect(Users.name).toMatch('Users')
-  })
-  it('has a created hook', () => {
-    expect(typeof Users.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Users.data).toMatch('function')
-    const defaultData = Users.data()
-    expect(defaultData.currentPage).toBe(1)
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Users)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Users', () => {
-    const wrapper = shallowMount(Users)
-    expect(wrapper.is(Users)).toBe(true)
-  })
-  it('renders props.caption when passed', () => {
-    const caption = 'Users List'
-    const wrapper = mount(Users, {
-      propsData: { caption }
-    })
-    expect(wrapper.find('div.card-header > div').text()).toMatch(caption)
-  })
-})
diff --git a/tests/unit/DefaultAside.spec.js b/tests/unit/containers/DefaultAside.spec.js
similarity index 59%
rename from tests/unit/DefaultAside.spec.js
rename to tests/unit/containers/DefaultAside.spec.js
index 52f58b11..b403d47a 100644
--- a/tests/unit/DefaultAside.spec.js
+++ b/tests/unit/containers/DefaultAside.spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import DefaultAside from '@/containers/DefaultAside'
 
@@ -8,4 +9,8 @@ describe('DefaultAside.vue', () => {
   it('has a name', () => {
     expect(DefaultAside.name).toMatch('DefaultAside')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(DefaultAside)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/DefaultContainer.spec.js b/tests/unit/containers/DefaultContainer.spec.js
similarity index 72%
rename from tests/unit/DefaultContainer.spec.js
rename to tests/unit/containers/DefaultContainer.spec.js
index 5ebbcc1e..556c7804 100644
--- a/tests/unit/DefaultContainer.spec.js
+++ b/tests/unit/containers/DefaultContainer.spec.js
@@ -1,5 +1,5 @@
 import BootstrapVue from 'bootstrap-vue'
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router'
 import DefaultContainer from '@/containers/DefaultContainer'
 
@@ -11,11 +11,18 @@ localVue.use(BootstrapVue)
 
 describe('DefaultContainer.vue', () => {
   it('has a name', () => {
-    expect(DefaultContainer.name).toMatch('full')
+    expect(DefaultContainer.name).toMatch('DefaultContainer')
   })
   it('has a created hook', () => {
     expect(typeof DefaultContainer.data).toMatch('function')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(DefaultContainer, {
+      localVue,
+        router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
   it('sets the correct default data', () => {
     expect(typeof DefaultContainer.data).toMatch('function')
     const defaultData = DefaultContainer.data()
diff --git a/tests/unit/DefaultHeaderDropdownAccnt.spec.js b/tests/unit/containers/DefaultHeaderDropdownAccnt.spec.js
similarity index 77%
rename from tests/unit/DefaultHeaderDropdownAccnt.spec.js
rename to tests/unit/containers/DefaultHeaderDropdownAccnt.spec.js
index 647713fd..cc8e5ff4 100644
--- a/tests/unit/DefaultHeaderDropdownAccnt.spec.js
+++ b/tests/unit/containers/DefaultHeaderDropdownAccnt.spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
 import DefaultHeaderDropdownAccnt from '@/containers/DefaultHeaderDropdownAccnt'
+import { shallowMount } from '@vue/test-utils';
 
 Vue.use(BootstrapVue)
 
@@ -16,4 +17,8 @@ describe('DefaultHeaderDropdownAccnt.vue', () => {
     const defaultData = DefaultHeaderDropdownAccnt.data()
     expect(defaultData.itemsCount).toBe(42)
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(DefaultHeaderDropdownAccnt)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/containers/__snapshots__/DefaultAside.spec.js.snap b/tests/unit/containers/__snapshots__/DefaultAside.spec.js.snap
new file mode 100644
index 00000000..d0f38a0f
--- /dev/null
+++ b/tests/unit/containers/__snapshots__/DefaultAside.spec.js.snap
@@ -0,0 +1,946 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultAside.vue renders correctly 1`] = `
+<btabs-stub
+  tag="div"
+>
+  <btab-stub
+    buttonid=""
+    href="#"
+    tag="div"
+    title=""
+  >
+    <template>
+      <i
+        class="icon-list"
+      />
+    </template>
+     
+    <blistgroup-stub
+      class="list-group-accent"
+      tag="div"
+    >
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        
+        Today
+      
+      </blistgroupitem-stub>
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-warning list-group-item-divider"
+        event="click"
+        exactactiveclass="active"
+        href="#"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        <div
+          class="avatar float-right"
+        >
+          <img
+            alt="admin@bootstrapmaster.com"
+            class="img-avatar"
+            src="img/avatars/7.jpg"
+          />
+        </div>
+         
+        <div>
+          Meeting with
+          
+          <strong>
+            Lucas
+          </strong>
+        </div>
+         
+        <small
+          class="text-muted mr-3"
+        >
+          <i
+            class="icon-calendar"
+          />
+            1 - 3pm
+        
+        </small>
+         
+        <small
+          class="text-muted"
+        >
+          <i
+            class="icon-location-pin"
+          />
+            Palo Alto, CA
+        
+        </small>
+      </blistgroupitem-stub>
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-info"
+        event="click"
+        exactactiveclass="active"
+        href="#"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        <div
+          class="avatar float-right"
+        >
+          <img
+            alt="admin@bootstrapmaster.com"
+            class="img-avatar"
+            src="img/avatars/4.jpg"
+          />
+        </div>
+         
+        <div>
+          Skype with 
+          <strong>
+            Megan
+          </strong>
+        </div>
+         
+        <small
+          class="text-muted mr-3"
+        >
+          <i
+            class="icon-calendar"
+          />
+            4 - 5pm
+        </small>
+         
+        <small
+          class="text-muted"
+        >
+          <i
+            class="icon-social-skype"
+          />
+            On-line
+        </small>
+      </blistgroupitem-stub>
+       
+      <hr
+        class="transparent mx-3 my-0"
+      />
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        
+        Tomorrow
+      
+      </blistgroupitem-stub>
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-danger list-group-item-divider"
+        event="click"
+        exactactiveclass="active"
+        href="#"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        <div>
+          New UI Project - 
+          <strong>
+            deadline
+          </strong>
+        </div>
+         
+        <small
+          class="text-muted mr-3"
+        >
+          <i
+            class="icon-calendar"
+          />
+            10 - 11pm
+        </small>
+         
+        <small
+          class="text-muted"
+        >
+          <i
+            class="icon-home"
+          />
+            creativeLabs HQ
+        </small>
+         
+        <div
+          class="avatars-stack mt-2"
+        >
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/2.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/3.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/4.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/5.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/6.jpg"
+            />
+          </div>
+        </div>
+      </blistgroupitem-stub>
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-success list-group-item-divider"
+        event="click"
+        exactactiveclass="active"
+        href="#"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        <div>
+          <strong>
+            #10 Startups.Garden
+          </strong>
+           Meetup
+        </div>
+         
+        <small
+          class="text-muted mr-3"
+        >
+          <i
+            class="icon-calendar"
+          />
+            1 - 3pm
+        </small>
+         
+        <small
+          class="text-muted"
+        >
+          <i
+            class="icon-location-pin"
+          />
+            Palo Alto, CA
+        </small>
+      </blistgroupitem-stub>
+       
+      <blistgroupitem-stub
+        activeclass="active"
+        class="list-group-item-accent-primary list-group-item-divider"
+        event="click"
+        exactactiveclass="active"
+        href="#"
+        routertag="a"
+        tag="div"
+        target="_self"
+      >
+        <div>
+          <strong>
+            Team meeting
+          </strong>
+        </div>
+         
+        <small
+          class="text-muted mr-3"
+        >
+          <i
+            class="icon-calendar"
+          />
+            4 - 6pm
+        </small>
+         
+        <small
+          class="text-muted"
+        >
+          <i
+            class="icon-home"
+          />
+            creativeLabs HQ
+        </small>
+         
+        <div
+          class="avatars-stack mt-2"
+        >
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/2.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/3.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/4.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/5.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/6.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+          </div>
+           
+          <div
+            class="avatar avatar-xs"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/8.jpg"
+            />
+          </div>
+        </div>
+      </blistgroupitem-stub>
+    </blistgroup-stub>
+  </btab-stub>
+   
+  <btab-stub
+    buttonid=""
+    href="#"
+    tag="div"
+    title=""
+  >
+    <template>
+      <i
+        class="icon-speech"
+      />
+    </template>
+     
+    <div
+      class="p-3"
+    >
+      <div
+        class="message"
+      >
+        <div
+          class="py-3 pb-5 mr-3 float-left"
+        >
+          <div
+            class="avatar"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+             
+            <bbadge-stub
+              activeclass="active"
+              class="avatar-status"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
+              variant="success"
+            />
+          </div>
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Lukasz Holeczek
+          </small>
+           
+          <small
+            class="text-muted float-right mt-1"
+          >
+            1:52 PM
+          </small>
+        </div>
+         
+        <div
+          class="text-truncate font-weight-bold"
+        >
+          Lorem ipsum dolor sit amet
+        </div>
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+        </small>
+      </div>
+       
+      <hr />
+       
+      <div
+        class="message"
+      >
+        <div
+          class="py-3 pb-5 mr-3 float-left"
+        >
+          <div
+            class="avatar"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+             
+            <bbadge-stub
+              activeclass="active"
+              class="avatar-status"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
+              variant="danger"
+            />
+          </div>
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Lukasz Holeczek
+          </small>
+           
+          <small
+            class="text-muted float-right mt-1"
+          >
+            1:52 PM
+          </small>
+        </div>
+         
+        <div
+          class="text-truncate font-weight-bold"
+        >
+          Lorem ipsum dolor sit amet
+        </div>
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+        </small>
+      </div>
+       
+      <hr />
+       
+      <div
+        class="message"
+      >
+        <div
+          class="py-3 pb-5 mr-3 float-left"
+        >
+          <div
+            class="avatar"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+             
+            <bbadge-stub
+              activeclass="active"
+              class="avatar-status"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
+              variant="info"
+            />
+          </div>
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Lukasz Holeczek
+          </small>
+           
+          <small
+            class="text-muted float-right mt-1"
+          >
+            1:52 PM
+          </small>
+        </div>
+         
+        <div
+          class="text-truncate font-weight-bold"
+        >
+          Lorem ipsum dolor sit amet
+        </div>
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+        </small>
+      </div>
+       
+      <hr />
+       
+      <div
+        class="message"
+      >
+        <div
+          class="py-3 pb-5 mr-3 float-left"
+        >
+          <div
+            class="avatar"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+             
+            <bbadge-stub
+              activeclass="active"
+              class="avatar-status"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
+              variant="warning"
+            />
+          </div>
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Lukasz Holeczek
+          </small>
+           
+          <small
+            class="text-muted float-right mt-1"
+          >
+            1:52 PM
+          </small>
+        </div>
+         
+        <div
+          class="text-truncate font-weight-bold"
+        >
+          Lorem ipsum dolor sit amet
+        </div>
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+        </small>
+      </div>
+       
+      <hr />
+       
+      <div
+        class="message"
+      >
+        <div
+          class="py-3 pb-5 mr-3 float-left"
+        >
+          <div
+            class="avatar"
+          >
+            <img
+              alt="admin@bootstrapmaster.com"
+              class="img-avatar"
+              src="img/avatars/7.jpg"
+            />
+             
+            <bbadge-stub
+              activeclass="active"
+              class="avatar-status"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="span"
+              target="_self"
+              variant="dark"
+            />
+          </div>
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Lukasz Holeczek
+          </small>
+           
+          <small
+            class="text-muted float-right mt-1"
+          >
+            1:52 PM
+          </small>
+        </div>
+         
+        <div
+          class="text-truncate font-weight-bold"
+        >
+          Lorem ipsum dolor sit amet
+        </div>
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+        </small>
+      </div>
+    </div>
+  </btab-stub>
+   
+  <btab-stub
+    buttonid=""
+    href="#"
+    tag="div"
+    title=""
+  >
+    <template>
+      <i
+        class="icon-settings"
+      />
+    </template>
+     
+    <div
+      class="p-3"
+    >
+      <h6>
+        Settings
+      </h6>
+       
+      <div
+        class="aside-options"
+      >
+        <div
+          class="clearfix mt-4"
+        >
+          <small>
+            <b>
+              Option 1
+            </b>
+          </small>
+           
+          <cswitch-stub
+            checked="true"
+            class="float-right"
+            color="success"
+            dataoff="Off"
+            dataon="On"
+            id="switch-id-6"
+            label="true"
+            size="sm"
+            value="true"
+            variant="pill"
+          />
+        </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>
+        </div>
+      </div>
+       
+      <div
+        class="aside-options"
+      >
+        <div
+          class="clearfix mt-3"
+        >
+          <small>
+            <b>
+              Option 2
+            </b>
+          </small>
+           
+          <cswitch-stub
+            class="float-right"
+            color="success"
+            dataoff="Off"
+            dataon="On"
+            id="switch-id-7"
+            label="true"
+            size="sm"
+            value="true"
+            variant="pill"
+          />
+        </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>
+        </div>
+      </div>
+       
+      <div
+        class="aside-options"
+      >
+        <div
+          class="clearfix mt-3"
+        >
+          <small>
+            <b>
+              Option 3
+            </b>
+          </small>
+           
+          <cswitch-stub
+            class="float-right"
+            color="success"
+            dataoff="Off"
+            dataon="On"
+            defaultchecked="true"
+            disabled="true"
+            id="switch-id-8"
+            label="true"
+            size="sm"
+            value="true"
+            variant="pill"
+          />
+        </div>
+         
+        <div>
+          <small
+            class="text-muted"
+          >
+            Disabled option.
+          </small>
+        </div>
+      </div>
+       
+      <div
+        class="aside-options"
+      >
+        <div
+          class="clearfix mt-3"
+        >
+          <small>
+            <b>
+              Option 4
+            </b>
+          </small>
+           
+          <cswitch-stub
+            checked="true"
+            class="float-right"
+            color="success"
+            dataoff="Off"
+            dataon="On"
+            id="switch-id-9"
+            label="true"
+            size="sm"
+            value="true"
+            variant="pill"
+          />
+        </div>
+      </div>
+       
+      <hr />
+       
+      <h6>
+        System Utilization
+      </h6>
+       
+      <div
+        class="text-uppercase mb-1 mt-4"
+      >
+        <small>
+          <b>
+            CPU Usage
+          </b>
+        </small>
+      </div>
+       
+      <bprogress-stub
+        class="progress-xs"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+        variant="info"
+      />
+       
+      <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>
+       
+      <bprogress-stub
+        class="progress-xs"
+        height="{}"
+        max="100"
+        precision="0"
+        value="70"
+        variant="warning"
+      />
+       
+      <small
+        class="text-muted"
+      >
+        11444GB/16384MB
+      </small>
+       
+      <div
+        class="text-uppercase mb-1 mt-2"
+      >
+        <small>
+          <b>
+            SSD 1 Usage
+          </b>
+        </small>
+      </div>
+       
+      <bprogress-stub
+        class="progress-xs"
+        height="{}"
+        max="100"
+        precision="0"
+        value="95"
+        variant="danger"
+      />
+       
+      <small
+        class="text-muted"
+      >
+        243GB/256GB
+      </small>
+       
+      <div
+        class="text-uppercase mb-1 mt-2"
+      >
+        <small>
+          <b>
+            SSD 2 Usage
+          </b>
+        </small>
+      </div>
+       
+      <bprogress-stub
+        class="progress-xs"
+        height="{}"
+        max="100"
+        precision="0"
+        value="10"
+        variant="success"
+      />
+       
+      <small
+        class="text-muted"
+      >
+        25GB/256GB
+      </small>
+    </div>
+  </btab-stub>
+</btabs-stub>
+`;
diff --git a/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap b/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
new file mode 100644
index 00000000..929bd638
--- /dev/null
+++ b/tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap
@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultContainer.vue renders correctly 1`] = `
+<div
+  class="app"
+>
+  <appheader-stub
+    fixed="true"
+  >
+    <sidebartoggler-stub
+      class="d-lg-none"
+      defaultopen="true"
+      display="md"
+      mobile="true"
+    />
+     
+    <blink-stub
+      activeclass="active"
+      class="navbar-brand"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+      to="#"
+    >
+      <img
+        alt="CoreUI Logo"
+        class="navbar-brand-full"
+        height="25"
+        src="img/brand/logo.svg"
+        width="89"
+      />
+       
+      <img
+        alt="CoreUI Logo"
+        class="navbar-brand-minimized"
+        height="30"
+        src="img/brand/sygnet.svg"
+        width="30"
+      />
+    </blink-stub>
+     
+    <sidebartoggler-stub
+      class="d-md-down-none"
+      defaultopen="true"
+      display="lg"
+    />
+     
+    <bnavbarnav-stub
+      class="d-md-down-none"
+      tag="ul"
+    >
+      <bnavitem-stub
+        activeclass="active"
+        class="px-3"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+        to="/dashboard"
+      >
+        Dashboard
+      </bnavitem-stub>
+       
+      <bnavitem-stub
+        activeclass="active"
+        class="px-3"
+        event="click"
+        exact="true"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+        to="/users"
+      >
+        Users
+      </bnavitem-stub>
+       
+      <bnavitem-stub
+        activeclass="active"
+        class="px-3"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        Settings
+      </bnavitem-stub>
+    </bnavbarnav-stub>
+     
+    <bnavbarnav-stub
+      class="ml-auto"
+      tag="ul"
+    >
+      <bnavitem-stub
+        activeclass="active"
+        class="d-md-down-none"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        <i
+          class="icon-bell"
+        />
+         
+        <bbadge-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          pill="true"
+          routertag="a"
+          tag="span"
+          target="_self"
+          variant="danger"
+        >
+          5
+        </bbadge-stub>
+      </bnavitem-stub>
+       
+      <bnavitem-stub
+        activeclass="active"
+        class="d-md-down-none"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        <i
+          class="icon-list"
+        />
+      </bnavitem-stub>
+       
+      <bnavitem-stub
+        activeclass="active"
+        class="d-md-down-none"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        <i
+          class="icon-location-pin"
+        />
+      </bnavitem-stub>
+       
+      <defaultheaderdropdownaccnt-stub />
+    </bnavbarnav-stub>
+     
+    <asidetoggler-stub
+      class="d-none d-lg-block"
+      display="lg"
+    />
+  </appheader-stub>
+   
+  <div
+    class="app-body"
+  >
+    <appsidebar-stub
+      fixed="true"
+    >
+      <sidebarheader-stub />
+       
+      <sidebarform-stub />
+       
+      <sidebarnav-stub
+        navitems="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+      />
+       
+      <sidebarfooter-stub />
+       
+      <sidebarminimizer-stub />
+    </appsidebar-stub>
+     
+    <main
+      class="main"
+    >
+      <breadcrumb-stub
+        list=""
+      />
+       
+      <div
+        class="container-fluid"
+      >
+        <router-view-stub
+          name="default"
+        />
+      </div>
+    </main>
+     
+    <appaside-stub
+      display=""
+      fixed="true"
+      offcanvas="true"
+    >
+      <defaultaside-stub />
+    </appaside-stub>
+  </div>
+   
+  <thefooter-stub>
+    <div>
+      <a
+        href="https://coreui.io"
+      >
+        CoreUI
+      </a>
+       
+      <span
+        class="ml-1"
+      >
+        © 2018 creativeLabs.
+      </span>
+    </div>
+     
+    <div
+      class="ml-auto"
+    >
+      <span
+        class="mr-1"
+      >
+        Powered by
+      </span>
+       
+      <a
+        href="https://coreui.io"
+      >
+        CoreUI for Vue
+      </a>
+    </div>
+  </thefooter-stub>
+</div>
+`;
diff --git a/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
new file mode 100644
index 00000000..7033a750
--- /dev/null
+++ b/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
+<appheaderdropdown-stub
+  nocaret="true"
+  right="true"
+>
+  <template>
+    <img
+      alt="admin@bootstrapmaster.com"
+      class="img-avatar"
+      src="img/avatars/6.jpg"
+    />
+  </template>
+  \\
+  
+  <template>
+    <bdropdownheader-stub
+      class="text-center"
+      tag="div"
+    >
+      <strong>
+        Account
+      </strong>
+    </bdropdownheader-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-bell-o"
+      />
+       Updates
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="info"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-envelope-o"
+      />
+       Messages
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="success"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-tasks"
+      />
+       Tasks
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="danger"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-comments"
+      />
+       Comments
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="warning"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdownheader-stub
+      class="text-center"
+      tag="div"
+    >
+      <strong>
+        Settings
+      </strong>
+    </bdropdownheader-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-user"
+      />
+       Profile
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-wrench"
+      />
+       Settings
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-usd"
+      />
+       Payments
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="secondary"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-file"
+      />
+       Projects
+      
+      <bbadge-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="primary"
+      >
+        42
+      </bbadge-stub>
+    </bdropdownitem-stub>
+     
+    <bdropdowndivider-stub
+      tag="div"
+    />
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-shield"
+      />
+       Lock Account
+    </bdropdownitem-stub>
+     
+    <bdropdownitem-stub
+      activeclass="active"
+      event="click"
+      exactactiveclass="active"
+      routertag="a"
+      target="_self"
+    >
+      <i
+        class="fa fa-lock"
+      />
+       Logout
+    </bdropdownitem-stub>
+  </template>
+</appheaderdropdown-stub>
+`;
diff --git a/tests/unit/shared/classes.spec.js b/tests/unit/shared/classes.spec.js
new file mode 100644
index 00000000..d20e55bd
--- /dev/null
+++ b/tests/unit/shared/classes.spec.js
@@ -0,0 +1,33 @@
+import {sidebarCssClasses, asideMenuCssClasses, validBreakpoints, checkBreakpoint} from '@/shared/classes'
+
+test('sidebarCssClasses', () => {
+  expect(sidebarCssClasses.constructor === Array).toBe(true);
+  expect(sidebarCssClasses.length).toBe(5);
+  expect(sidebarCssClasses).toContain('sidebar-show');
+  expect(sidebarCssClasses).toContain('sidebar-sm-show');
+  expect(sidebarCssClasses).toContain('sidebar-md-show');
+  expect(sidebarCssClasses).toContain('sidebar-lg-show');
+  expect(sidebarCssClasses).toContain('sidebar-xl-show');
+});
+test('asideMenuCssClasses', () => {
+  expect(asideMenuCssClasses.constructor === Array).toBe(true);
+  expect(asideMenuCssClasses.length).toBe(5);
+  expect(asideMenuCssClasses).toContain('aside-menu-show');
+  expect(asideMenuCssClasses).toContain('aside-menu-sm-show');
+  expect(asideMenuCssClasses).toContain('aside-menu-md-show');
+  expect(asideMenuCssClasses).toContain('aside-menu-lg-show');
+  expect(asideMenuCssClasses).toContain('aside-menu-xl-show');
+});
+test('validBreakpoints', () => {
+  expect(validBreakpoints.constructor === Array).toBe(true);
+  expect(validBreakpoints.length).toBe(4);
+  expect(validBreakpoints).toContain('sm');
+  expect(validBreakpoints).toContain('md');
+  expect(validBreakpoints).toContain('lg');
+  expect(validBreakpoints).toContain('xl');
+});
+test('checkBreakpoint', () => {
+  expect(checkBreakpoint.constructor === Function).toBe(true);
+  expect(checkBreakpoint('sm', validBreakpoints)).toBe(true);
+  expect(checkBreakpoint('xs', validBreakpoints)).toBe(false);
+});
diff --git a/tests/unit/shared/toggle-classes.spec.js b/tests/unit/shared/toggle-classes.spec.js
new file mode 100644
index 00000000..8412233a
--- /dev/null
+++ b/tests/unit/shared/toggle-classes.spec.js
@@ -0,0 +1,22 @@
+import { sidebarCssClasses } from '@/shared/classes'
+import toggleClasses from '@/shared/toggle-classes'
+
+test('toggleClasses', () => {
+  const cssClass = `sidebar-show`
+  expect(toggleClasses.constructor === Function).toBe(true)
+  toggleClasses(cssClass, sidebarCssClasses )
+  console.log(document.body.classList)
+  expect(document.body.classList).toMatchObject({ '0': 'sidebar-show' })
+  toggleClasses("sidebar-xl-show", sidebarCssClasses )
+  console.log(document.body.classList)
+  toggleClasses("sidebar-lg-show", sidebarCssClasses )
+  console.log(document.body.classList)
+  toggleClasses("sidebar-md-show", sidebarCssClasses )
+  expect(document.body.classList).toMatchObject({ '0': 'sidebar-xl-show', '1': 'sidebar-lg-show', '2': 'sidebar-md-show' })
+  console.log(document.body.classList)
+  toggleClasses("sidebar-xl-show", sidebarCssClasses )
+  console.log(document.body.classList)
+  toggleClasses(cssClass, sidebarCssClasses )
+  expect(document.body.classList).toMatchObject({ '0': 'sidebar-show' })
+  console.log(document.body.classList)
+});
diff --git a/tests/unit/shared/utils.spec.js b/tests/unit/shared/utils.spec.js
new file mode 100644
index 00000000..5c40d760
--- /dev/null
+++ b/tests/unit/shared/utils.spec.js
@@ -0,0 +1,23 @@
+import { random, shuffleArray } from '@/shared/utils'
+
+test('random', () => {
+  expect(random.constructor === Function).toBe(true)
+  expect(random(10,10)).toBe(10);
+  let nRandom = random(50,200)
+  expect(nRandom).toBeGreaterThanOrEqual(50)
+  expect(nRandom).toBeLessThanOrEqual(200)
+  nRandom = random(80,100)
+  expect(nRandom).toBeGreaterThanOrEqual(80)
+  expect(nRandom).toBeLessThanOrEqual(100)
+  nRandom = random(100,101)
+  expect(nRandom).toBeGreaterThanOrEqual(100)
+  expect(nRandom).toBeLessThanOrEqual(101)
+});
+
+test('shuffleArray', () => {
+  expect(shuffleArray.constructor === Function).toBe(true)
+  let testArray = [1,2,3]
+  expect(shuffleArray(testArray).constructor === Array).toBe(true)
+  testArray = [{a:1},{a:2},{a:3}]
+  expect(shuffleArray(testArray).constructor === Array).toBe(true)
+})
diff --git a/tests/unit/Charts.spec.js b/tests/unit/views/Charts.spec.js
similarity index 72%
rename from tests/unit/Charts.spec.js
rename to tests/unit/views/Charts.spec.js
index 33d63cf9..adce817b 100644
--- a/tests/unit/Charts.spec.js
+++ b/tests/unit/views/Charts.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Charts from '@/views/Charts'
 
@@ -17,4 +17,8 @@ describe('Charts.vue', () => {
     const wrapper = shallowMount(Charts)
     expect(wrapper.is(Charts)).toBe(true)
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Charts)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Dashboard.spec.js b/tests/unit/views/Dashboard.spec.js
similarity index 62%
rename from tests/unit/Dashboard.spec.js
rename to tests/unit/views/Dashboard.spec.js
index a89b7e3f..4c7077a3 100644
--- a/tests/unit/Dashboard.spec.js
+++ b/tests/unit/views/Dashboard.spec.js
@@ -29,4 +29,17 @@ describe('Dashboard.vue', () => {
     const wrapper = shallowMount(Dashboard)
     expect(wrapper.find('#traffic').text()).toMatch('Traffic')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    expect(typeof Dashboard.methods.variant  ).toEqual('function')
+    expect(Dashboard.methods.variant(25)).toBe('info')
+    expect(Dashboard.methods.variant(50)).toBe('success')
+    expect(Dashboard.methods.variant(75)).toBe('warning')
+    expect(Dashboard.methods.variant(100)).toBe('danger')
+    expect(typeof Dashboard.methods.flag ).toEqual('function')
+    expect(Dashboard.methods.flag('us')).toBe('flag-icon flag-icon-us')
+  })
 })
diff --git a/tests/unit/Widgets.spec.js b/tests/unit/views/Widgets.spec.js
similarity index 86%
rename from tests/unit/Widgets.spec.js
rename to tests/unit/views/Widgets.spec.js
index 27fe9e32..cd4a62cc 100644
--- a/tests/unit/Widgets.spec.js
+++ b/tests/unit/views/Widgets.spec.js
@@ -25,4 +25,8 @@ describe('Widgets.vue', () => {
     const wrapper = shallowMount(Widgets)
     expect(wrapper.is(Widgets)).toBe(true)
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Widgets)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/__snapshots__/Charts.spec.js.snap b/tests/unit/views/__snapshots__/Charts.spec.js.snap
new file mode 100644
index 00000000..7204dbe5
--- /dev/null
+++ b/tests/unit/views/__snapshots__/Charts.spec.js.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Charts.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <bcardgroup-stub
+    class="card-columns"
+    columns="true"
+    tag="div"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Line Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <lineexample-stub
+          chartid="chart-line-01"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Bar Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <barexample-stub
+          chartid="chart-bar-01"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Doughnut Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <doughnutexample-stub
+          chartid="chart-doughnut-01"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Radar Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <radarexample-stub
+          chartid="chart-radar-01"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Pie Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <pieexample-stub
+          chartid="chart-pie-01"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Polar Area Chart"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="chart-wrapper"
+      >
+        <polarareaexample-stub
+          chartid="chart-polar-area-01"
+        />
+      </div>
+    </bcard-stub>
+  </bcardgroup-stub>
+</div>
+`;
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
new file mode 100644
index 00000000..e479a0ac
--- /dev/null
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -0,0 +1,1657 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="bg-primary"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="pb-0"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bdropdown-stub
+            boundary="scrollParent"
+            class="float-right"
+            right=""
+            role="menu"
+            toggletext="Toggle Dropdown"
+            variant="transparent p-0"
+          >
+            <template>
+              <i
+                class="icon-settings"
+              />
+            </template>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Another action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Something else here...
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Disabled action
+            </bdropdownitem-stub>
+          </bdropdown-stub>
+           
+          <h4
+            class="mb-0"
+          >
+            9.823
+          </h4>
+           
+          <p>
+            Members online
+          </p>
+        </bcardbody-stub>
+         
+        <cardline1chartexample-stub
+          chartid="card-chart-01"
+          class="chart-wrapper px-3"
+          height="70"
+          style="height: 70px;"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="bg-info"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="pb-0"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bdropdown-stub
+            boundary="scrollParent"
+            class="float-right"
+            nocaret="true"
+            right=""
+            role="menu"
+            toggletext="Toggle Dropdown"
+            variant="transparent p-0"
+          >
+            <template>
+              <i
+                class="icon-location-pin"
+              />
+            </template>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Another action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Something else here...
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Disabled action
+            </bdropdownitem-stub>
+          </bdropdown-stub>
+           
+          <h4
+            class="mb-0"
+          >
+            9.823
+          </h4>
+           
+          <p>
+            Members online
+          </p>
+        </bcardbody-stub>
+         
+        <cardline2chartexample-stub
+          chartid="card-chart-02"
+          class="chart-wrapper px-3"
+          height="70"
+          style="height: 70px;"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="bg-warning"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="pb-0"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bdropdown-stub
+            boundary="scrollParent"
+            class="float-right"
+            right=""
+            role="menu"
+            toggletext="Toggle Dropdown"
+            variant="transparent p-0"
+          >
+            <template>
+              <i
+                class="icon-settings"
+              />
+            </template>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Another action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Something else here...
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Disabled action
+            </bdropdownitem-stub>
+          </bdropdown-stub>
+           
+          <h4
+            class="mb-0"
+          >
+            9.823
+          </h4>
+           
+          <p>
+            Members online
+          </p>
+        </bcardbody-stub>
+         
+        <cardline3chartexample-stub
+          chartid="card-chart-03"
+          class="chart-wrapper"
+          height="70"
+          style="height: 70px;"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="bg-danger"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="pb-0"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bdropdown-stub
+            boundary="scrollParent"
+            class="float-right"
+            right=""
+            role="menu"
+            toggletext="Toggle Dropdown"
+            variant="transparent p-0"
+          >
+            <template>
+              <i
+                class="icon-settings"
+              />
+            </template>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Another action
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Something else here...
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              Disabled action
+            </bdropdownitem-stub>
+          </bdropdown-stub>
+           
+          <h4
+            class="mb-0"
+          >
+            9.823
+          </h4>
+           
+          <p>
+            Members online
+          </p>
+        </bcardbody-stub>
+         
+        <cardbarchartexample-stub
+          chartid="card-chart-04"
+          class="chart-wrapper px-3"
+          height="70"
+          style="height: 70px;"
+        />
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        sm="5"
+        tag="div"
+      >
+        <h4
+          class="card-title mb-0"
+          id="traffic"
+        >
+          Traffic
+        </h4>
+         
+        <div
+          class="small text-muted"
+        >
+          November 2017
+        </div>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="d-none d-md-block"
+        sm="7"
+        tag="div"
+      >
+        <bbutton-stub
+          activeclass="active"
+          class="float-right"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="primary"
+        >
+          <i
+            class="icon-cloud-download"
+          />
+        </bbutton-stub>
+         
+        <bbuttontoolbar-stub
+          aria-label="Toolbar with buttons group"
+          class="float-right"
+        >
+          <bformradiogroup-stub
+            buttons="true"
+            buttonvariant="outline-secondary"
+            class="mr-3"
+            id="radiosBtn"
+            name="radiosBtn"
+          >
+            <bformradio-stub
+              class="mx-0"
+              value="Day"
+            >
+              Day
+            </bformradio-stub>
+             
+            <bformradio-stub
+              class="mx-0"
+              value="Month"
+            >
+              Month
+            </bformradio-stub>
+             
+            <bformradio-stub
+              class="mx-0"
+              value="Year"
+            >
+              Year
+            </bformradio-stub>
+          </bformradiogroup-stub>
+        </bbuttontoolbar-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <mainchartexample-stub
+      chartid="main-chart-01"
+      class="chart-wrapper"
+      height="300"
+      style="height: 300px; margin-top: 40px;"
+    />
+     
+    <div
+      slot="footer"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-sm-2 mb-0"
+          tag="div"
+        >
+          <div
+            class="text-muted"
+          >
+            Visits
+          </div>
+           
+          <strong>
+            29.703 Users (40%)
+          </strong>
+           
+          <bprogress-stub
+            class="progress-xs mt-2"
+            height="{}"
+            max="100"
+            precision="1"
+            value="40"
+            variant="success"
+          />
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-sm-2 mb-0 d-md-down-none"
+          tag="div"
+        >
+          <div
+            class="text-muted"
+          >
+            Unique
+          </div>
+           
+          <strong>
+            24.093 Users (20%)
+          </strong>
+           
+          <bprogress-stub
+            class="progress-xs mt-2"
+            height="{}"
+            max="100"
+            precision="1"
+            value="20"
+            variant="info"
+          />
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-sm-2 mb-0"
+          tag="div"
+        >
+          <div
+            class="text-muted"
+          >
+            Pageviews
+          </div>
+           
+          <strong>
+            78.706 Views (60%)
+          </strong>
+           
+          <bprogress-stub
+            class="progress-xs mt-2"
+            height="{}"
+            max="100"
+            precision="1"
+            value="60"
+            variant="warning"
+          />
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-sm-2 mb-0"
+          tag="div"
+        >
+          <div
+            class="text-muted"
+          >
+            New Users
+          </div>
+           
+          <strong>
+            22.123 Users (80%)
+          </strong>
+           
+          <bprogress-stub
+            class="progress-xs mt-2"
+            height="{}"
+            max="100"
+            precision="1"
+            value="80"
+            variant="danger"
+          />
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-sm-2 mb-0 d-md-down-none"
+          tag="div"
+        >
+          <div
+            class="text-muted"
+          >
+            Bounce Rate
+          </div>
+           
+          <strong>
+            Average Rate (40.15%)
+          </strong>
+           
+          <bprogress-stub
+            class="progress-xs mt-2"
+            height="{}"
+            max="100"
+            precision="1"
+            value="40"
+          />
+        </bcol-stub>
+      </brow-stub>
+    </div>
+  </bcard-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-facebook"
+        >
+          <i
+            class="fa fa-facebook"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              chartid="box-chart-01"
+              data="65,59,84,84,51,55,40"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              89k
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              friends
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              459
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              feeds
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-twitter"
+        >
+          <i
+            class="fa fa-twitter"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              chartid="box-chart-02"
+              data="1,13,9,17,34,41,38"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              973k
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              followers
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              1.792
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              tweets
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-linkedin"
+        >
+          <i
+            class="fa fa-linkedin"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              chartid="box-chart-03"
+              data="78,81,80,45,34,12,40"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              500+
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              contacts
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              292
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              feeds
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-google-plus"
+        >
+          <i
+            class="fa fa-google-plus"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              chartid="box-chart-04"
+              data="35,23,56,22,97,23,64"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              894
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              followers
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              92
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              circles
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="12"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        header="Traffic & Sales"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            lg="6"
+            sm="12"
+            tag="div"
+          >
+            <brow-stub
+              tag="div"
+            >
+              <bcol-stub
+                sm="6"
+                tag="div"
+              >
+                <callout-stub
+                  variant="info"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    New Clients
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="h4"
+                  >
+                    9,123
+                  </strong>
+                   
+                  <div
+                    class="chart-wrapper"
+                    style="top: -10px;"
+                  >
+                    <calloutchartexample-stub
+                      chartid="callout-chart-01"
+                      data="35,23,56,22,97,23,64"
+                      height="30"
+                      variant="info"
+                      width="80"
+                    />
+                  </div>
+                </callout-stub>
+              </bcol-stub>
+               
+              <bcol-stub
+                sm="6"
+                tag="div"
+              >
+                <callout-stub
+                  variant="danger"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    Recurring Clients
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="h4"
+                  >
+                    22,643
+                  </strong>
+                   
+                  <div
+                    class="chart-wrapper"
+                    style="top: -10px;"
+                  >
+                    <calloutchartexample-stub
+                      chartid="callout-chart-02"
+                      data="65,59,84,84,51,55,40"
+                      height="30"
+                      variant="danger"
+                      width="80"
+                    />
+                  </div>
+                </callout-stub>
+              </bcol-stub>
+            </brow-stub>
+             
+            <hr
+              class="mt-0"
+            />
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Monday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="34"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="78"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Tuesday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="56"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="94"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Wednesday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="12"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="67"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Thursday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="43"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="91"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Friday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="22"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="73"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Saturday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="53"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="82"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="progress-group mb-4"
+            >
+              <div
+                class="progress-group-prepend"
+              >
+                <span
+                  class="progress-group-text"
+                >
+                  
+                  Sunday
+                
+                </span>
+              </div>
+               
+              <div
+                class="progress-group-bars"
+              >
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="9"
+                  variant="info"
+                />
+                 
+                <bprogress-stub
+                  class="progress-xs"
+                  height="{}"
+                  max="100"
+                  precision="0"
+                  value="69"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="legend text-center"
+            >
+              <small>
+                <sup>
+                  <bbadge-stub
+                    activeclass="active"
+                    event="click"
+                    exactactiveclass="active"
+                    pill="true"
+                    routertag="a"
+                    tag="span"
+                    target="_self"
+                    variant="info"
+                  >
+                     
+                  </bbadge-stub>
+                </sup>
+                
+                New clients
+                  
+                
+                <sup>
+                  <bbadge-stub
+                    activeclass="active"
+                    event="click"
+                    exactactiveclass="active"
+                    pill="true"
+                    routertag="a"
+                    tag="span"
+                    target="_self"
+                    variant="danger"
+                  >
+                     
+                  </bbadge-stub>
+                </sup>
+                
+                Recurring clients
+              
+              </small>
+            </div>
+          </bcol-stub>
+           
+          <bcol-stub
+            lg="6"
+            sm="12"
+            tag="div"
+          >
+            <brow-stub
+              tag="div"
+            >
+              <bcol-stub
+                sm="6"
+                tag="div"
+              >
+                <callout-stub
+                  variant="warning"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    Pageviews
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="h4"
+                  >
+                    78,623
+                  </strong>
+                   
+                  <div
+                    class="chart-wrapper"
+                    style="top: -10px;"
+                  >
+                    <calloutchartexample-stub
+                      chartid="callout-chart-03"
+                      data="35,23,56,22,97,23,64"
+                      height="30"
+                      variant="#f8cb00"
+                      width="80"
+                    />
+                  </div>
+                </callout-stub>
+              </bcol-stub>
+               
+              <bcol-stub
+                sm="6"
+                tag="div"
+              >
+                <callout-stub
+                  variant="success"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    Organic
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="h4"
+                  >
+                    49,123
+                  </strong>
+                   
+                  <div
+                    class="chart-wrapper"
+                    style="top: -10px;"
+                  >
+                    <calloutchartexample-stub
+                      chartid="callout-chart-04"
+                      data="65,59,84,84,51,55,40"
+                      height="30"
+                      variant="#4dbd74"
+                      width="80"
+                    />
+                  </div>
+                </callout-stub>
+              </bcol-stub>
+            </brow-stub>
+             
+            <hr
+              class="mt-0"
+            />
+             
+            <ul
+              class="horizontal-bars type-2"
+            >
+              <div
+                class="progress-group"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-user progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    Male
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    43%
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="43"
+                    variant="warning"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="progress-group mb-5"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-user-female progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    Female
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    37%
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="37"
+                    variant="warning"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="progress-group"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-globe progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    Organic Search
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    191,235 
+                    <span
+                      class="text-muted small"
+                    >
+                      (56%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="56"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="progress-group"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-social-facebook progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    Facebook
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    51,223 
+                    <span
+                      class="text-muted small"
+                    >
+                      (15%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="15"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="progress-group"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-social-twitter progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    Twitter
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    37,564 
+                    <span
+                      class="text-muted small"
+                    >
+                      (11%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="11"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="progress-group"
+              >
+                <div
+                  class="progress-group-header"
+                >
+                  <i
+                    class="icon-social-linkedin progress-group-icon"
+                  />
+                   
+                  <span
+                    class="title"
+                  >
+                    LinkedIn
+                  </span>
+                   
+                  <span
+                    class="ml-auto font-weight-bold"
+                  >
+                    27,319 
+                    <span
+                      class="text-muted small"
+                    >
+                       (8%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="progress-group-bars"
+                >
+                  <bprogress-stub
+                    class="progress-xs"
+                    height="{}"
+                    max="100"
+                    precision="0"
+                    value="8"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="divider text-center"
+              >
+                <bbutton-stub
+                  activeclass="active"
+                  class="text-muted"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  size="sm"
+                  target="_self"
+                  type="button"
+                  variant="link"
+                >
+                  <i
+                    class="icon-options"
+                  />
+                </bbutton-stub>
+              </div>
+            </ul>
+          </bcol-stub>
+        </brow-stub>
+         
+        <br />
+         
+        <btable-stub
+          apiurl=""
+          class="mb-0 table-outline"
+          currentpage="1"
+          emptyfilteredtext="There are no records matching your request"
+          emptytext="There are no records to show"
+          fields="[object Object]"
+          footvariant=""
+          headvariant="light"
+          hover="true"
+          items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+          labelsortasc="Click to sort Ascending"
+          labelsortdesc="Click to sort Descending"
+          perpage="0"
+          responsive="sm"
+          sortdirection="asc"
+          value=""
+        >
+          <i
+            class="flag-icon flag-icon-pw h1"
+            id="pw"
+            title="pw"
+          />
+        </btable-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/views/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/__snapshots__/Widgets.spec.js.snap
new file mode 100644
index 00000000..0d06576c
--- /dev/null
+++ b/tests/unit/views/__snapshots__/Widgets.spec.js.snap
@@ -0,0 +1,2032 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Widgets.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          89.9%
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="success"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          12.124
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="info"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          $98.111,00
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="warning"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          2 TB
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="danger"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-primary"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          89.9%
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-white progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-warning"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          12.124
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-white progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-danger"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          $98.111,00
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-white progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-info"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h4 m-0"
+        >
+          2 TB
+        </div>
+         
+        <div>
+          Lorem ipsum...
+        </div>
+         
+        <bprogress-stub
+          class="progress-white progress-xs my-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+         
+        <small
+          class="text-muted"
+        >
+          Lorem ipsum dolor sit amet enim.
+        </small>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-primary mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-info mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-warning mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-danger mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footerclass="px-3 py-2"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-primary mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+         
+        <div
+          slot="footer"
+        >
+          <blink-stub
+            activeclass="active"
+            class="font-weight-bold font-xs btn-block text-muted"
+            event="click"
+            exactactiveclass="active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            View More 
+            <i
+              class="fa fa-angle-right float-right font-lg"
+            />
+          </blink-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footerclass="px-3 py-2"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-info mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+         
+        <div
+          slot="footer"
+        >
+          <blink-stub
+            activeclass="active"
+            class="font-weight-bold font-xs btn-block text-muted"
+            event="click"
+            exactactiveclass="active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            View More 
+            <i
+              class="fa fa-angle-right float-right font-lg"
+            />
+          </blink-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footerclass="px-3 py-2"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-warning mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+         
+        <div
+          slot="footer"
+        >
+          <blink-stub
+            activeclass="active"
+            class="font-weight-bold font-xs btn-block text-muted"
+            event="click"
+            exactactiveclass="active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            View More 
+            <i
+              class="fa fa-angle-right float-right font-lg"
+            />
+          </blink-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footerclass="px-3 py-2"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-3 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-danger mb-0 mt-2"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+         
+        <div
+          slot="footer"
+        >
+          <blink-stub
+            activeclass="active"
+            class="font-weight-bold font-xs btn-block text-muted"
+            event="click"
+            exactactiveclass="active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            View More 
+            <i
+              class="fa fa-angle-right float-right font-lg"
+            />
+          </blink-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-primary mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-info mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-warning mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-danger mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-primary mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-info mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-warning mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      cols="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0 clearfix"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <i
+            class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"
+          />
+           
+          <div
+            class="h5 text-danger mb-0 pt-3"
+          >
+            $1.999,50
+          </div>
+           
+          <div
+            class="text-muted text-uppercase font-weight-bold font-xs"
+          >
+            Income
+          </div>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-facebook"
+        >
+          <i
+            class="fa fa-facebook"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              data="65,59,84,84,51,55,40"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              89k
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              friends
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              459
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              feeds
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-twitter"
+        >
+          <i
+            class="fa fa-twitter"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              data="1,13,9,17,34,41,38"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              973k
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              followers
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              1.792
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              tweets
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-linkedin"
+        >
+          <i
+            class="fa fa-linkedin"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              data="78,81,80,45,34,12,40"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              500+
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              contacts
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              292
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              feeds
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="3"
+      sm="6"
+      tag="div"
+    >
+      <div
+        class="brand-card"
+      >
+        <div
+          class="brand-card-header bg-google-plus"
+        >
+          <i
+            class="fa fa-google-plus"
+          />
+           
+          <div
+            class="chart-wrapper"
+          >
+            <socialboxchartexample-stub
+              data="35,23,56,22,97,23,64"
+              height="100"
+            />
+          </div>
+        </div>
+         
+        <div
+          class="brand-card-body"
+        >
+          <div>
+            <div
+              class="text-value"
+            >
+              894
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              followers
+            </div>
+          </div>
+           
+          <div>
+            <div
+              class="text-value"
+            >
+              92
+            </div>
+             
+            <div
+              class="text-uppercase text-muted small"
+            >
+              circles
+            </div>
+          </div>
+        </div>
+      </div>
+    </bcol-stub>
+  </brow-stub>
+   
+  <bcardgroup-stub
+    class="mb-4"
+    tag="div"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="h1 text-muted text-right mb-4"
+      >
+        <i
+          class="icon-people"
+        />
+      </div>
+       
+      <div
+        class="h4 mb-0"
+      >
+        87.500
+      </div>
+       
+      <small
+        class="text-muted text-uppercase font-weight-bold"
+      >
+        Visitors
+      </small>
+       
+      <bprogress-stub
+        class="progress-xs mt-3 mb-0"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+        variant="info"
+      />
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="h1 text-muted text-right mb-4"
+      >
+        <i
+          class="icon-user-follow"
+        />
+      </div>
+       
+      <div
+        class="h4 mb-0"
+      >
+        385
+      </div>
+       
+      <small
+        class="text-muted text-uppercase font-weight-bold"
+      >
+        New Clients
+      </small>
+       
+      <bprogress-stub
+        class="progress-xs mt-3 mb-0"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+        variant="success"
+      />
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="h1 text-muted text-right mb-4"
+      >
+        <i
+          class="icon-basket-loaded"
+        />
+      </div>
+       
+      <div
+        class="h4 mb-0"
+      >
+        1238
+      </div>
+       
+      <small
+        class="text-muted text-uppercase font-weight-bold"
+      >
+        Products sold
+      </small>
+       
+      <bprogress-stub
+        class="progress-xs mt-3 mb-0"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+        variant="warning"
+      />
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="h1 text-muted text-right mb-4"
+      >
+        <i
+          class="icon-pie-chart"
+        />
+      </div>
+       
+      <div
+        class="h4 mb-0"
+      >
+        28%
+      </div>
+       
+      <small
+        class="text-muted text-uppercase font-weight-bold"
+      >
+        Returning Visitors
+      </small>
+       
+      <bprogress-stub
+        class="progress-xs mt-3 mb-0"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+      />
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        class="h1 text-muted text-right mb-4"
+      >
+        <i
+          class="icon-speedometer"
+        />
+      </div>
+       
+      <div
+        class="h4 mb-0"
+      >
+        5:34:11
+      </div>
+       
+      <small
+        class="text-muted text-uppercase font-weight-bold"
+      >
+        Avg. Time
+      </small>
+       
+      <bprogress-stub
+        class="progress-xs mt-3 mb-0"
+        height="{}"
+        max="100"
+        precision="0"
+        value="25"
+        variant="danger"
+      />
+    </bcard-stub>
+  </bcardgroup-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-people"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          87.500
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Visitors
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="info"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-user-follow"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          385
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          New Clients
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="success"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-basket-loaded"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          1238
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Products sold
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="warning"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-pie-chart"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          28%
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Returning Visitors
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-speedometer"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          5:34:11
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Avg. Time
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="danger"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-speech"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          972
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Comments
+        </small>
+         
+        <bprogress-stub
+          class="progress-xs mt-3 mb-0"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+          variant="info"
+        />
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-info"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-people"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          87.500
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Visitors
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-success"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-user-follow"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          385
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          New Clients
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-warning"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-basket-loaded"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          1238
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Products sold
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-primary"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-pie-chart"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          28%
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Returning Visitors
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-danger"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-speedometer"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          5:34:11
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Avg. Time
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        class="text-white bg-info"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          class="h1 text-muted text-right mb-4"
+        >
+          <i
+            class="icon-speech"
+          />
+        </div>
+         
+        <div
+          class="h4 mb-0"
+        >
+          972
+        </div>
+         
+        <small
+          class="text-muted text-uppercase font-weight-bold"
+        >
+          Comments
+        </small>
+         
+        <bprogress-stub
+          class="progress-white progress-xs mt-3"
+          height="{}"
+          max="100"
+          precision="0"
+          value="25"
+        />
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/Breadcrumbs.spec.js b/tests/unit/views/base/Breadcrumbs.spec.js
similarity index 89%
rename from tests/unit/Breadcrumbs.spec.js
rename to tests/unit/views/base/Breadcrumbs.spec.js
index 9530498b..f6d5820b 100644
--- a/tests/unit/Breadcrumbs.spec.js
+++ b/tests/unit/views/base/Breadcrumbs.spec.js
@@ -29,4 +29,8 @@ describe('Breadcrumbs.vue', () => {
     const wrapper = mount(Breadcrumbs)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Breadcrumb')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Breadcrumbs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Cards.spec.js b/tests/unit/views/base/Cards.spec.js
similarity index 88%
rename from tests/unit/Cards.spec.js
rename to tests/unit/views/base/Cards.spec.js
index d8513f10..0771813c 100644
--- a/tests/unit/Cards.spec.js
+++ b/tests/unit/views/base/Cards.spec.js
@@ -29,4 +29,8 @@ describe('Cards.vue', () => {
     const wrapper = mount(Cards)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Card title')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Cards)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Carousels.spec.js b/tests/unit/views/base/Carousels.spec.js
similarity index 70%
rename from tests/unit/Carousels.spec.js
rename to tests/unit/views/base/Carousels.spec.js
index 1c717084..09138d9c 100644
--- a/tests/unit/Carousels.spec.js
+++ b/tests/unit/views/base/Carousels.spec.js
@@ -29,4 +29,14 @@ describe('Carousels.vue', () => {
     const wrapper = mount(Carousels)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Carousel')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Carousels)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    expect(typeof Carousels.methods.onSlideStart ).toEqual('function')
+    expect(Carousels.methods.onSlideStart(1)).toBeUndefined()
+    expect(typeof Carousels.methods.onSlideEnd ).toEqual('function')
+    expect(Carousels.methods.onSlideEnd(1)).toBeUndefined()
+  })
 })
diff --git a/tests/unit/Collapses.spec.js b/tests/unit/views/base/Collapses.spec.js
similarity index 89%
rename from tests/unit/Collapses.spec.js
rename to tests/unit/views/base/Collapses.spec.js
index 628898eb..6eb4749e 100644
--- a/tests/unit/Collapses.spec.js
+++ b/tests/unit/views/base/Collapses.spec.js
@@ -29,4 +29,8 @@ describe('Collapses.vue', () => {
     const wrapper = mount(Collapses)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Collapses)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Forms.spec.js b/tests/unit/views/base/Forms.spec.js
similarity index 88%
rename from tests/unit/Forms.spec.js
rename to tests/unit/views/base/Forms.spec.js
index 6aa71fe3..8b38fce5 100644
--- a/tests/unit/Forms.spec.js
+++ b/tests/unit/views/base/Forms.spec.js
@@ -29,4 +29,8 @@ describe('Forms.vue', () => {
     const wrapper = mount(Forms)
     expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Credit Card')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Forms)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Jumbotrons.spec.js b/tests/unit/views/base/Jumbotrons.spec.js
similarity index 85%
rename from tests/unit/Jumbotrons.spec.js
rename to tests/unit/views/base/Jumbotrons.spec.js
index 9fe2613e..a18879c9 100644
--- a/tests/unit/Jumbotrons.spec.js
+++ b/tests/unit/views/base/Jumbotrons.spec.js
@@ -21,4 +21,8 @@ describe('Jumbotrons.vue', () => {
     const wrapper = mount(Jumbotrons)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Jumbotron')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Jumbotrons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/ListGroups.spec.js b/tests/unit/views/base/ListGroups.spec.js
similarity index 85%
rename from tests/unit/ListGroups.spec.js
rename to tests/unit/views/base/ListGroups.spec.js
index 6363ca57..79c7a99b 100644
--- a/tests/unit/ListGroups.spec.js
+++ b/tests/unit/views/base/ListGroups.spec.js
@@ -21,4 +21,8 @@ describe('ListGroups.vue', () => {
     const wrapper = mount(ListGroups)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap list group')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(ListGroups)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Navbars.spec.js b/tests/unit/views/base/Navbars.spec.js
similarity index 84%
rename from tests/unit/Navbars.spec.js
rename to tests/unit/views/base/Navbars.spec.js
index f9f98b67..38f22a63 100644
--- a/tests/unit/Navbars.spec.js
+++ b/tests/unit/views/base/Navbars.spec.js
@@ -21,4 +21,8 @@ describe('Navbars.vue', () => {
     const wrapper = mount(Navbars)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Navbar')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Navbars)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Navs.spec.js b/tests/unit/views/base/Navs.spec.js
similarity index 84%
rename from tests/unit/Navs.spec.js
rename to tests/unit/views/base/Navs.spec.js
index e04de89b..872d3e35 100644
--- a/tests/unit/Navs.spec.js
+++ b/tests/unit/views/base/Navs.spec.js
@@ -21,4 +21,8 @@ describe('Navs.vue', () => {
     const wrapper = mount(Navs)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Navs')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Navs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Paginations.spec.js b/tests/unit/views/base/Paginations.spec.js
similarity index 88%
rename from tests/unit/Paginations.spec.js
rename to tests/unit/views/base/Paginations.spec.js
index bf888d42..08d6b996 100644
--- a/tests/unit/Paginations.spec.js
+++ b/tests/unit/views/base/Paginations.spec.js
@@ -29,4 +29,8 @@ describe('Paginations.vue', () => {
     const wrapper = mount(Paginations)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Pagination')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Paginations)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Popovers.spec.js b/tests/unit/views/base/Popovers.spec.js
similarity index 54%
rename from tests/unit/Popovers.spec.js
rename to tests/unit/views/base/Popovers.spec.js
index a7d78edc..2b253cc1 100644
--- a/tests/unit/Popovers.spec.js
+++ b/tests/unit/views/base/Popovers.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import BootstrapVue from 'bootstrap-vue'
 import Popovers from '@/views/base/Popovers'
 
@@ -18,15 +18,30 @@ describe('Popovers.vue', () => {
     expect(defaultData.show).toBe(false)
   })
   it('is Vue instance', () => {
-    const wrapper = mount(Popovers)
+    const wrapper = shallowMount(Popovers)
     expect(wrapper.isVueInstance()).toBe(true)
   })
   it('is Popovers', () => {
-    const wrapper = mount(Popovers)
+    const wrapper = shallowMount(Popovers)
     expect(wrapper.is(Popovers)).toBe(true)
   })
   it('should render correct content', () => {
     const wrapper = mount(Popovers)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Popovers')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Popovers)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    const wrapper = mount(Popovers)
+    expect(typeof Popovers.methods.onOpen).toEqual('function')
+    expect(wrapper.vm.onOpen()).toBeUndefined()
+    expect(typeof Popovers.methods.onClose).toEqual('function')
+    expect(wrapper.vm.onClose()).toBeUndefined()
+    expect(typeof Popovers.methods.onEnable).toEqual('function')
+    expect(wrapper.vm.onEnable()).toBeUndefined()
+    expect(typeof Popovers.methods.onDisable).toEqual('function')
+    expect(wrapper.vm.onDisable()).toBeUndefined()
+  })
 })
diff --git a/tests/unit/ProgressBars.spec.js b/tests/unit/views/base/ProgressBars.spec.js
similarity index 67%
rename from tests/unit/ProgressBars.spec.js
rename to tests/unit/views/base/ProgressBars.spec.js
index f172ecb3..d9400a4e 100644
--- a/tests/unit/ProgressBars.spec.js
+++ b/tests/unit/views/base/ProgressBars.spec.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import ProgressBars from '@/views/base/ProgressBars'
 
 Vue.use(BootstrapVue)
 
+jest.useFakeTimers()
+
 describe('ProgressBars.vue', () => {
   it('has a name', () => {
     expect(ProgressBars.name).toMatch('progress-bars')
@@ -29,4 +31,16 @@ describe('ProgressBars.vue', () => {
     const wrapper = mount(ProgressBars)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Progress')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(ProgressBars)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should be destroyed', () => {
+    const wrapper = mount(ProgressBars)
+    wrapper.destroy()
+  })
+  it('should have methods', () => {
+    expect(typeof ProgressBars.methods.clicked  ).toEqual('function')
+    expect(ProgressBars.methods.clicked()).toBeUndefined()
+  })
 })
diff --git a/tests/unit/Switches.spec.js b/tests/unit/views/base/Switches.spec.js
similarity index 84%
rename from tests/unit/Switches.spec.js
rename to tests/unit/views/base/Switches.spec.js
index 281ce213..1c950c43 100644
--- a/tests/unit/Switches.spec.js
+++ b/tests/unit/views/base/Switches.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Switches from '@/views/base/Switches'
 
@@ -30,4 +30,8 @@ describe('Switches.vue', () => {
     const wrapper = mount(Switches)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Switch default')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Switches)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Table.spec.js b/tests/unit/views/base/Table.spec.js
similarity index 82%
rename from tests/unit/Table.spec.js
rename to tests/unit/views/base/Table.spec.js
index 4b3efc4a..04e163b2 100644
--- a/tests/unit/Table.spec.js
+++ b/tests/unit/views/base/Table.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Table from '@/views/base/Table'
 
@@ -29,4 +29,8 @@ describe('Table.vue', () => {
     const wrapper = mount(Table)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Table')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Table)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Tables.spec.js b/tests/unit/views/base/Tables.spec.js
similarity index 77%
rename from tests/unit/Tables.spec.js
rename to tests/unit/views/base/Tables.spec.js
index 25a22240..9d3b54a7 100644
--- a/tests/unit/Tables.spec.js
+++ b/tests/unit/views/base/Tables.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Tables from '@/views/base/Tables'
 
@@ -21,4 +21,8 @@ describe('Tables.vue', () => {
     const wrapper = mount(Tables)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Simple Table')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tables)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Tabs.spec.js b/tests/unit/views/base/Tabs.spec.js
similarity index 84%
rename from tests/unit/Tabs.spec.js
rename to tests/unit/views/base/Tabs.spec.js
index c75358ef..9f7d95bb 100644
--- a/tests/unit/Tabs.spec.js
+++ b/tests/unit/views/base/Tabs.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Tabs from '@/views/base/Tabs'
 
@@ -30,4 +30,8 @@ describe('Tabs.vue', () => {
     const wrapper = mount(Tabs)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Tabs')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tabs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Tooltips.spec.js b/tests/unit/views/base/Tooltips.spec.js
similarity index 56%
rename from tests/unit/Tooltips.spec.js
rename to tests/unit/views/base/Tooltips.spec.js
index ab1d20db..8c935b0d 100644
--- a/tests/unit/Tooltips.spec.js
+++ b/tests/unit/views/base/Tooltips.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils';
 import BootstrapVue from 'bootstrap-vue'
 import Tooltips from '@/views/base/Tooltips'
 
@@ -19,15 +19,30 @@ describe('Tooltips.vue', () => {
     expect(defaultData.disabled).toBe(false)
   })
   it('is Vue instance', () => {
-    const wrapper = mount(Tooltips)
+    const wrapper = shallowMount(Tooltips)
     expect(wrapper.isVueInstance()).toBe(true)
   })
   it('is Tooltips', () => {
-    const wrapper = mount(Tooltips)
+    const wrapper = shallowMount(Tooltips)
     expect(wrapper.is(Tooltips)).toBe(true)
   })
   it('should render correct content', () => {
     const wrapper = mount(Tooltips)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Tooltips')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tooltips)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    const wrapper = mount(Tooltips)
+    expect(typeof Tooltips.methods.onOpen).toEqual('function')
+    expect(wrapper.vm.onOpen()).toBeUndefined()
+    expect(typeof Tooltips.methods.onClose).toEqual('function')
+    expect(wrapper.vm.onClose()).toBeUndefined()
+    expect(typeof Tooltips.methods.disableByRef).toEqual('function')
+    expect(wrapper.vm.disableByRef()).toBeUndefined()
+    wrapper.vm.disabled = true
+    expect(wrapper.vm.disableByRef()).toBeUndefined()
+  })
 })
diff --git a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
new file mode 100644
index 00000000..1d93a591
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Breadcrumb
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/breadcrumb"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <ol
+              class="breadcrumb"
+            >
+              <li
+                class="breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  Admin
+                </a>
+              </li>
+              <li
+                class="breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  Manage
+                </a>
+              </li>
+              <li
+                class="breadcrumb-item active"
+                role="presentation"
+              >
+                <span
+                  aria-current="location"
+                >
+                  Library
+                </span>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
new file mode 100644
index 00000000..0abb993a
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
@@ -0,0 +1,842 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cards.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+        show-footer=""
+      >
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        
+        </div>
+        <div
+          class="card-footer"
+        >
+          <div>
+            Card footer
+          </div>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            <i
+              class="fa fa-check"
+            />
+             Card with icon
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            
+          Card with switch
+          
+            <label
+              class="switch switch-sm switch-text switch-info float-right mb-0"
+            >
+              <input
+                class="switch-input"
+                type="checkbox"
+              />
+               
+              <span
+                class="switch-label"
+                data-off="Off"
+                data-on="On"
+              />
+               
+              <span
+                class="switch-handle"
+              />
+            </label>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            
+          Card with label
+          
+            <span
+              class="badge float-right badge-success"
+            >
+              Success
+            </span>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            
+          Card with label
+          
+            <span
+              class="badge float-right badge-danger badge-pill"
+            >
+              42
+            </span>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-primary"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline primary
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-secondary"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline secondary
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-success"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline success
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-info"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline info
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-warning"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline warning
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card border-danger"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card outline danger
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-primary"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with primary accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-secondary"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with secondary accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-success"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with success accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-info"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with info accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-warning"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with warning accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card card-accent-danger"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card with danger accent
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-primary text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-success text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-info text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-warning text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-danger text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-secondary text-center"
+      >
+        <div
+          class="card-body"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-primary"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-success"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-info"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-warning"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-danger"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            Card title
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+          
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-4"
+    >
+      <div
+        class="card bg-secondary"
+        name="fade"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            
+            Card with header actions
+            
+            <div
+              class="card-header-actions"
+            >
+              <a
+                class="card-header-action btn-setting"
+                href="#"
+                target="_self"
+              >
+                <i
+                  class="icon-settings"
+                />
+              </a>
+               
+              <a
+                aria-controls="collapse1"
+                aria-expanded="true"
+                class="card-header-action btn-minimize"
+                href="#"
+                role="button"
+                target="_self"
+              >
+                <i
+                  class="icon-arrow-up"
+                />
+              </a>
+               
+              <a
+                class="card-header-action btn-close"
+                href="#"
+                target="_self"
+              >
+                <i
+                  class="icon-close"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+         
+        <div
+          class="collapse show"
+          id="collapse1"
+        >
+          <div
+            class="card-body"
+          >
+            
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
new file mode 100644
index 00000000..75dadced
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousels.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-12 col-lg-9"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Carousel
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/carousel"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                aria-busy="false"
+                class="carousel slide"
+                id="carousel1"
+                role="region"
+                style="text-shadow: 1px 1px 2px #333; background: rgb(171, 171, 171);"
+              >
+                <div
+                  class="carousel-inner"
+                  id="carousel1___BV_inner_"
+                  role="list"
+                >
+                  <div
+                    aria-current="true"
+                    aria-posinset="1"
+                    aria-setsize="5"
+                    class="carousel-item active"
+                    id="__BVID__27"
+                    role="listitem"
+                    tabindex="-1"
+                  >
+                    <img
+                      class="img-fluid w-100 d-block"
+                      height="480"
+                      src="https://lorempixel.com/1024/480/technics/2/"
+                      width="1024"
+                    />
+                    <div
+                      class="carousel-caption"
+                    >
+                      <h3>
+                        First slide
+                      </h3>
+                      <p>
+                        Nulla vitae elit libero, a pharetra augue mollis interdum.
+                      </p>
+                    </div>
+                  </div>
+                   
+                  <div
+                    aria-current="false"
+                    aria-posinset="2"
+                    aria-setsize="5"
+                    class="carousel-item"
+                    id="__BVID__28"
+                    role="listitem"
+                    tabindex="-1"
+                  >
+                    <img
+                      class="img-fluid w-100 d-block"
+                      height="480"
+                      src="https://lorempixel.com/1024/480/technics/4/"
+                      width="1024"
+                    />
+                    <div
+                      class="carousel-caption"
+                    >
+                      <!---->
+                      <!---->
+                      <h1>
+                        Hello world!
+                      </h1>
+                    </div>
+                  </div>
+                   
+                  <div
+                    aria-current="false"
+                    aria-posinset="3"
+                    aria-setsize="5"
+                    class="carousel-item"
+                    id="__BVID__29"
+                    role="listitem"
+                    tabindex="-1"
+                  >
+                    <img
+                      class="img-fluid w-100 d-block"
+                      height="480"
+                      src="https://lorempixel.com/1024/480/technics/8/"
+                      width="1024"
+                    />
+                    <div
+                      class="carousel-caption"
+                    >
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                   
+                  <div
+                    aria-current="false"
+                    aria-posinset="4"
+                    aria-setsize="5"
+                    class="carousel-item"
+                    id="__BVID__30"
+                    role="listitem"
+                    tabindex="-1"
+                  >
+                    <img
+                      alt="image slot"
+                      class="d-block img-fluid w-100"
+                      height="480"
+                      src="https://lorempixel.com/1024/480/technics/5/"
+                      width="1024"
+                    />
+                    <div
+                      class="carousel-caption"
+                    >
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                   
+                  <div
+                    aria-current="false"
+                    aria-posinset="5"
+                    aria-setsize="5"
+                    class="carousel-item"
+                    id="__BVID__31"
+                    role="listitem"
+                    tabindex="-1"
+                  >
+                    <img
+                      alt="Blank image"
+                      class="img-fluid w-100 d-block"
+                      height="480"
+                      src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%221024%22%20height%3D%22480%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Atransparent%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E"
+                      width="1024"
+                    />
+                    <div
+                      class="carousel-caption"
+                    >
+                      <h3>
+                        Blank Image
+                      </h3>
+                      <!---->
+                      <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>
+                    </div>
+                  </div>
+                </div>
+                <a
+                  aria-controls="carousel1___BV_inner_"
+                  class="carousel-control-prev"
+                  href="#"
+                  role="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="carousel-control-prev-icon"
+                  />
+                  <span
+                    class="sr-only"
+                  >
+                    Previous Slide
+                  </span>
+                </a>
+                <a
+                  aria-controls="carousel1___BV_inner_"
+                  class="carousel-control-next"
+                  href="#"
+                  role="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="carousel-control-next-icon"
+                  />
+                  <span
+                    class="sr-only"
+                  >
+                    Next Slide
+                  </span>
+                </a>
+                <ol
+                  aria-hidden="false"
+                  aria-label="Select a slide to display"
+                  aria-owns="carousel1___BV_inner_"
+                  class="carousel-indicators"
+                  id="carousel1___BV_indicators_"
+                />
+              </div>
+               
+              <p
+                class="mt-4"
+              >
+                
+              Slide #: 0
+                <br />
+                
+              Sliding: 
+            
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
new file mode 100644
index 00000000..39ae2442
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
@@ -0,0 +1,583 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapses.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Collapse 
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/collapse"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <button
+                aria-controls="collapse1"
+                aria-expanded="false"
+                class="btn btn-primary collapsed"
+                type="button"
+              >
+                Toggle Collapse
+              </button>
+               
+              <div
+                class="mt-2 collapse"
+                id="collapse1"
+                style="display: none;"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    <p
+                      class="card-text"
+                    >
+                      Collapse contents Here
+                    </p>
+                     
+                    <button
+                      aria-controls="collapse1_inner"
+                      aria-expanded="false"
+                      class="btn btn-secondary btn-sm collapsed"
+                      type="button"
+                    >
+                      Toggle Inner Collapse
+                    </button>
+                     
+                    <div
+                      class="mt-2 collapse"
+                      id="collapse1_inner"
+                      style="display: none;"
+                    >
+                      <div
+                        class="card"
+                      >
+                        <div
+                          class="card-body"
+                        >
+                          Hello!
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Collapse 
+              </strong>
+               
+              <small>
+                with 
+                <code>
+                  v-b-toggle
+                </code>
+                 directive
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <button
+                aria-controls="collapse2"
+                aria-expanded="false"
+                class="btn m-1 btn-secondary collapsed"
+                type="button"
+              >
+                Toggle Collapse
+              </button>
+               
+              <button
+                aria-controls="collapse2"
+                aria-expanded="false"
+                class="btn m-1 btn-secondary collapsed"
+                type="button"
+              >
+                Toggle Collapse
+              </button>
+               
+              <div
+                class="collapse"
+                id="collapse2"
+                style="display: none;"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    
+                I am collapsible content!
+              
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Collapse 
+              </strong>
+               
+              <small>
+                with 
+                <code>
+                  visibility
+                </code>
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <button
+                aria-controls="collapse3"
+                aria-expanded="true"
+                class="btn m-1 btn-secondary"
+                type="button"
+              >
+                Toggle Collapse
+              </button>
+               
+              <div
+                class="collapse show"
+                id="collapse3"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    
+                I should start open!
+              
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Collapse 
+              </strong>
+               
+              <small>
+                with 
+                <code>
+                  v-model
+                </code>
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <button
+                aria-controls="collapse4"
+                aria-expanded="true"
+                class="btn btn-secondary collapsed"
+                type="button"
+              >
+                
+              Toggle Collapse
+            
+              </button>
+               
+              <div
+                class="mt-2 collapse show"
+                id="collapse4"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    
+                I should start open!
+              
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Collapse 
+              </strong>
+               
+              <small>
+                multiple elements
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <button
+                aria-controls="collapseA collapseB"
+                aria-expanded="false"
+                class="btn btn-secondary collapsed"
+                type="button"
+              >
+                Toggle Both Collapse A and B
+              </button>
+               
+              <div
+                class="mt-2 collapse"
+                id="collapseA"
+                style="display: none;"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    
+                I am collapsable content A!
+              
+                  </div>
+                </div>
+              </div>
+               
+              <div
+                class="mt-2 collapse"
+                id="collapseB"
+                style="display: none;"
+              >
+                <div
+                  class="card"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    
+                I am collapsable content B!
+              
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Collapse 
+              </strong>
+               
+              <small>
+                <code>
+                  accordion
+                </code>
+                 support
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div
+              role="tablist"
+            >
+              <div
+                class="card mb-1"
+              >
+                <header
+                  class="card-header p-1"
+                  role="tab"
+                >
+                  <a
+                    aria-controls="accordion1"
+                    aria-expanded="true"
+                    class="btn btn-info btn-block"
+                    href="#"
+                    role="button"
+                    target="_self"
+                  >
+                    Accordion 1
+                  </a>
+                </header>
+                 
+                <div
+                  class="collapse show"
+                  id="accordion1"
+                  role="tabpanel"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    <p
+                      class="card-text"
+                    >
+                      
+                    I start opened because 
+                      <code>
+                        visible
+                      </code>
+                       is 
+                      <code>
+                        true
+                      </code>
+                    </p>
+                     
+                    <p
+                      class="card-text"
+                    >
+                      
+                    
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
+        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
+        tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
+        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
+        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
+        synth nesciunt you probably haven't heard of them accusamus labore VHS.
+      
+                  
+                    </p>
+                  </div>
+                </div>
+              </div>
+               
+              <div
+                class="card mb-1"
+              >
+                <header
+                  class="card-header p-1"
+                  role="tab"
+                >
+                  <a
+                    aria-controls="accordion2"
+                    aria-expanded="false"
+                    class="btn btn-info btn-block collapsed"
+                    href="#"
+                    role="button"
+                    target="_self"
+                  >
+                    Accordion 2
+                  </a>
+                </header>
+                 
+                <div
+                  class="collapse"
+                  id="accordion2"
+                  role="tabpanel"
+                  style="display: none;"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    <p
+                      class="card-text"
+                    >
+                      
+                    
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
+        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
+        tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
+        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
+        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
+        synth nesciunt you probably haven't heard of them accusamus labore VHS.
+      
+                  
+                    </p>
+                  </div>
+                </div>
+              </div>
+               
+              <div
+                class="card mb-1"
+              >
+                <header
+                  class="card-header p-1"
+                  role="tab"
+                >
+                  <a
+                    aria-controls="accordion3"
+                    aria-expanded="false"
+                    class="btn btn-info btn-block collapsed"
+                    href="#"
+                    role="button"
+                    target="_self"
+                  >
+                    Accordion 3
+                  </a>
+                </header>
+                 
+                <div
+                  class="collapse"
+                  id="accordion3"
+                  role="tabpanel"
+                  style="display: none;"
+                >
+                  <div
+                    class="card-body"
+                  >
+                    <p
+                      class="card-text"
+                    >
+                      
+                    
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
+        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
+        tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
+        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
+        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
+        synth nesciunt you probably haven't heard of them accusamus labore VHS.
+      
+                  
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Forms.spec.js.snap b/tests/unit/views/base/__snapshots__/Forms.spec.js.snap
new file mode 100644
index 00000000..048d57d1
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Forms.spec.js.snap
@@ -0,0 +1,3544 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Forms.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Credit Card 
+          </strong>
+           
+          <small>
+            Form
+          </small>
+        </div>
+         
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            sm="12"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="name"
+              >
+                Name
+              </label>
+               
+              <bforminput-stub
+                id="name"
+                placeholder="Enter your name"
+                type="text"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            sm="12"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="ccnumber"
+              >
+                Credit Card Number
+              </label>
+               
+              <bforminput-stub
+                id="ccnumber"
+                placeholder="0000 0000 0000 0000"
+                type="text"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            sm="4"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="month1"
+              >
+                Month
+              </label>
+               
+              <bformselect-stub
+                id="month1"
+                options="1,2,3,4,5,6,7,8,9,10,11,12"
+                plain="true"
+                selectsize="0"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+           
+          <bcol-stub
+            sm="4"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="year1"
+              >
+                Year
+              </label>
+               
+              <bformselect-stub
+                id="year1"
+                options="2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025"
+                plain="true"
+                selectsize="0"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+           
+          <bcol-stub
+            sm="4"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="cvv"
+              >
+                CVV/CVC
+              </label>
+               
+              <bforminput-stub
+                id="cvv"
+                placeholder="123"
+                type="text"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+        </brow-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      sm="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Company 
+          </strong>
+          <small>
+            Form
+          </small>
+        </div>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <label
+            for="company"
+          >
+            Company
+          </label>
+           
+          <bforminput-stub
+            id="company"
+            placeholder="Enter your company name"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <label
+            for="vat"
+          >
+            VAT
+          </label>
+           
+          <bforminput-stub
+            id="vat"
+            placeholder="PL1234567890"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <label
+            for="street"
+          >
+            Street
+          </label>
+           
+          <bforminput-stub
+            id="street"
+            placeholder="Enter street name"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            sm="8"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="city"
+              >
+                City
+              </label>
+               
+              <bforminput-stub
+                id="city"
+                placeholder="Enter your city"
+                type="text"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+           
+          <bcol-stub
+            sm="4"
+            tag="div"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                for="postal-code"
+              >
+                Postal Code
+              </label>
+               
+              <bforminput-stub
+                id="postal-code"
+                placeholder="Postal Code"
+                type="text"
+              />
+            </bformgroup-stub>
+          </bcol-stub>
+        </brow-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <label
+            for="country"
+          >
+            Country
+          </label>
+           
+          <bforminput-stub
+            id="country"
+            placeholder="Country name"
+            type="text"
+          />
+        </bformgroup-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Basic Form
+          </strong>
+           Elements
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Let us know your full name."
+            horizontal="true"
+            label="Enter your name"
+            labelcols="3"
+            labelfor="basicName"
+          >
+            <bforminput-stub
+              autocomplete="name"
+              id="basicName"
+              type="text"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Static"
+            labelcols="3"
+            labelfor="basicStatic"
+          >
+            <bforminput-stub
+              id="basicStatic"
+              plaintext="true"
+              type="text"
+              value="Username"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            description="This is a help text"
+            horizontal="true"
+            label="Text Input"
+            labelcols="3"
+            labelfor="basicText"
+          >
+            <bforminput-stub
+              id="basicText"
+              placeholder="Text"
+              type="text"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Date"
+            labelcols="3"
+            labelfor="date"
+          >
+            <bforminput-stub
+              id="date"
+              type="date"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter your email"
+            horizontal="true"
+            label="Email Input"
+            labelcols="3"
+            labelfor="basicEmail"
+          >
+            <bforminput-stub
+              autocomplete="email"
+              id="basicEmail"
+              placeholder="Enter your email"
+              type="email"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter a complex password"
+            horizontal="true"
+            label="Password Input"
+            labelcols="3"
+            labelfor="basicPassword"
+          >
+            <bforminput-stub
+              autocomplete="current-password"
+              id="basicPassword"
+              placeholder="Enter your password"
+              type="password"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Disabled Input"
+            labelcols="3"
+            labelfor="basicInputDisabled"
+          >
+            <bforminput-stub
+              disabled="true"
+              id="basicInputDisabled"
+              placeholder="Disabled"
+              type="text"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Textarea"
+            labelcols="3"
+            labelfor="basicTextarea"
+          >
+            <bforminput-stub
+              id="basicTextarea"
+              placeholder="Content.."
+              rows="9"
+              textarea="true"
+              type="text"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Select"
+            labelcols="3"
+            labelfor="basicSelect"
+          >
+            <bformselect-stub
+              id="basicSelect"
+              options="Please select,Option 1,Option 2,Option 3"
+              plain="true"
+              selectsize="0"
+              value="Please select"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Select large"
+            labelcols="3"
+            labelfor="basicSelectLg"
+          >
+            <bformselect-stub
+              id="basicSelectLg"
+              options="Please select,Option 1,Option 2,Option 3"
+              plain="true"
+              selectsize="0"
+              size="lg"
+              value="Please select"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Select small"
+            labelcols="3"
+            labelfor="basicSelectSm"
+          >
+            <bformselect-stub
+              id="basicSelectSm"
+              options="Please select,Option 1,Option 2,Option 3"
+              plain="true"
+              selectsize="0"
+              size="sm"
+              value="Please select"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Disabled select"
+            labelcols="3"
+            labelfor="basicSelectDisabled"
+          >
+            <bformselect-stub
+              disabled="true"
+              id="basicSelectDisabled"
+              options="Please select,Option 1,Option 2,Option 3"
+              plain="true"
+              selectsize="0"
+              value="Please select"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Select"
+            labelcols="3"
+            labelfor="basicMultiSelect"
+          >
+            <bformselect-stub
+              id="basicMultiSelect"
+              multiple="true"
+              options="[object Object],[object Object],[object Object],[object Object],[object Object]"
+              plain="true"
+              selectsize="0"
+              value=",c"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Radios"
+            labelcols="3"
+            labelfor="basicRadios"
+          >
+            <bformradiogroup-stub
+              buttonvariant="secondary"
+              checked="2"
+              id="basicRadios"
+              options="[object Object],[object Object],[object Object]"
+              plain="true"
+              stacked="true"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Inline radios"
+            labelcols="3"
+            labelfor="basicInlineRadios"
+          >
+            <bformradiogroup-stub
+              buttonvariant="secondary"
+              checked="3"
+              id="basicInlineRadios"
+              options="[object Object],[object Object],[object Object]"
+              plain="true"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Checkboxes"
+            labelcols="3"
+            labelfor="basicCheckboxes"
+          >
+            <bformcheckboxgroup-stub
+              buttonvariant="secondary"
+              checked="2,3"
+              id="basicCheckboxes"
+              name="Checkboxes"
+              plain="true"
+              stacked="true"
+            >
+              <bformcheckbox-stub
+                value="1"
+              >
+                Option 1
+              </bformcheckbox-stub>
+               
+              <bformcheckbox-stub
+                value="2"
+              >
+                Option 2
+              </bformcheckbox-stub>
+               
+              <bformcheckbox-stub
+                value="3"
+              >
+                Option 3
+              </bformcheckbox-stub>
+            </bformcheckboxgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Inline checkboxes"
+            labelcols="3"
+            labelfor="basicInlineCheckboxes"
+          >
+            <bformcheckboxgroup-stub
+              buttonvariant="secondary"
+              checked="1,3"
+              id="basicInlineCheckboxes"
+              name="InlineCheckboxes"
+              plain="true"
+            >
+              <bformcheckbox-stub
+                plain="true"
+                value="1"
+              >
+                Option 1
+              </bformcheckbox-stub>
+               
+              <bformcheckbox-stub
+                plain="true"
+                value="2"
+              >
+                Option 2
+              </bformcheckbox-stub>
+               
+              <bformcheckbox-stub
+                plain="true"
+                value="3"
+              >
+                Option 3
+              </bformcheckbox-stub>
+            </bformcheckboxgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Radios - custom"
+            labelcols="3"
+            labelfor="basicRadiosCustom"
+          >
+            <bformradiogroup-stub
+              buttonvariant="secondary"
+              id="basicRadiosCustom"
+              stacked="true"
+              value="1"
+            >
+              <div
+                class="custom-control custom-radio"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customRadio1"
+                  name="customRadio"
+                  type="radio"
+                  value="1"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadio1"
+                >
+                  Option 1
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-radio"
+              >
+                <input
+                  checked="checked"
+                  class="custom-control-input"
+                  id="customRadio2"
+                  name="customRadio"
+                  type="radio"
+                  value="2"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadio2"
+                >
+                  Option 2
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-radio"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customRadio3"
+                  name="customRadio"
+                  type="radio"
+                  value="3"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadio3"
+                >
+                  Option 3
+                </label>
+              </div>
+            </bformradiogroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Inline radios - custom"
+            labelcols="3"
+            labelfor="basicCustomRadios1"
+          >
+            <bformradiogroup-stub
+              buttonvariant="secondary"
+              id="basicCustomRadios1"
+              name="customRadioInline1"
+            >
+              <div
+                class="custom-control custom-radio custom-control-inline"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customRadioInline1"
+                  name="customRadioInline1"
+                  type="radio"
+                  value="1"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadioInline1"
+                >
+                  Option 1
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-radio custom-control-inline"
+              >
+                <input
+                  checked="checked"
+                  class="custom-control-input"
+                  id="customRadioInline2"
+                  name="customRadioInline1"
+                  type="radio"
+                  value="2"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadioInline2"
+                >
+                  Option 2
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-radio custom-control-inline"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customRadioInline3"
+                  name="customRadioInline1"
+                  type="radio"
+                  value="3"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customRadioInline3"
+                >
+                  Option 3
+                </label>
+              </div>
+            </bformradiogroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Checkboxes - custom"
+            labelcols="3"
+            labelfor="basicCustomCheckboxes"
+          >
+            <bformcheckboxgroup-stub
+              buttonvariant="secondary"
+              id="basicCustomCheckboxes"
+              stacked="true"
+            >
+              <div
+                class="custom-control custom-checkbox"
+              >
+                <input
+                  checked="checked"
+                  class="custom-control-input"
+                  id="customChk1"
+                  type="checkbox"
+                  value="1"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customChk1"
+                >
+                  Option 1
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-checkbox"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customChk2"
+                  type="checkbox"
+                  value="2"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customChk2"
+                >
+                  Option 2
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-checkbox"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customChk3"
+                  type="checkbox"
+                  value="3"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customChk3"
+                >
+                  Option 3
+                </label>
+              </div>
+            </bformcheckboxgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Inline checkboxes - custom"
+            labelcols="3"
+            labelfor="basicInlineCustomCheckboxes"
+          >
+            <bformcheckboxgroup-stub
+              buttonvariant="secondary"
+              id="basicInlineCustomCheckboxes"
+            >
+              <div
+                class="custom-control custom-checkbox custom-control-inline"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customInChk1"
+                  type="checkbox"
+                  value="1"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customInChk1"
+                >
+                  Option 1
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-checkbox custom-control-inline"
+              >
+                <input
+                  checked="checked"
+                  class="custom-control-input"
+                  id="customInChk2"
+                  type="checkbox"
+                  value="2"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customInChk2"
+                >
+                  Option 2
+                </label>
+              </div>
+               
+              <div
+                class="custom-control custom-checkbox custom-control-inline"
+              >
+                <input
+                  class="custom-control-input"
+                  id="customInChk3"
+                  type="checkbox"
+                  value="3"
+                />
+                 
+                <label
+                  class="custom-control-label"
+                  for="customInChk3"
+                >
+                  Option 3
+                </label>
+              </div>
+            </bformcheckboxgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="File input"
+            labelcols="3"
+            labelfor="fileInput"
+          >
+            <bformfile-stub
+              accept=""
+              id="fileInput"
+              plain="true"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            horizontal="true"
+            label="Multiple file input"
+            labelcols="3"
+            labelfor="fileInputMulti"
+          >
+            <bformfile-stub
+              accept=""
+              id="fileInputMulti"
+              multiple="true"
+              plain="true"
+            />
+          </bformgroup-stub>
+           
+          <div
+            slot="footer"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="submit"
+              variant="primary"
+            >
+              <i
+                class="fa fa-dot-circle-o"
+              />
+               Submit
+            </bbutton-stub>
+             
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="reset"
+              variant="danger"
+            >
+              <i
+                class="fa fa-ban"
+              />
+               Reset
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+       
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Inline
+          </strong>
+           Form
+        
+        </div>
+         
+        <bform-stub
+          inline="true"
+        >
+          <label
+            class="mr-sm-2"
+            for="inlineInput1"
+          >
+            Name: 
+          </label>
+           
+          <binput-stub
+            id="inlineInput1"
+            placeholder="Jane Doe"
+            type="text"
+          />
+           
+          <label
+            class="mx-sm-2"
+            for="inlineInput2"
+          >
+            Email: 
+          </label>
+           
+          <binput-stub
+            autocomplete="email"
+            id="inlineInput2"
+            placeholder="jane.doe@example.com"
+            type="email"
+          />
+        </bform-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="primary"
+          >
+            <i
+              class="fa fa-dot-circle-o"
+            />
+             Submit
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Horizontal
+          </strong>
+           Form
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter your email."
+            horizontal="true"
+            label="Email"
+            labelcols="3"
+            labelfor="horizEmail"
+          >
+            <bforminput-stub
+              autocomplete="username email"
+              id="horizEmail"
+              placeholder="Enter Email.."
+              type="email"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter your password."
+            horizontal="true"
+            label="Password"
+            labelcols="3"
+            labelfor="horizPass"
+          >
+            <bforminput-stub
+              autocomplete="current-password"
+              id="horizPass"
+              placeholder="Enter Password.."
+              type="password"
+            />
+          </bformgroup-stub>
+           
+          <div
+            slot="footer"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="submit"
+              variant="primary"
+            >
+              <i
+                class="fa fa-dot-circle-o"
+              />
+               Submit
+            </bbutton-stub>
+             
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="reset"
+              variant="danger"
+            >
+              <i
+                class="fa fa-ban"
+              />
+               Reset
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+       
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Normal
+          </strong>
+           Form
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter your email."
+            label="Email"
+            labelcols="3"
+            labelfor="normalEmail"
+            validated="true"
+          >
+            <bforminput-stub
+              autocomplete="email"
+              id="normalEmail"
+              placeholder="Enter Email.."
+              required=""
+              type="email"
+            />
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            description="Please enter your password."
+            label="Password"
+            labelcols="3"
+            labelfor="normalPass"
+            validated="true"
+          >
+            <bforminput-stub
+              autocomplete="current-password"
+              id="normalPass"
+              placeholder="Enter Password.."
+              required=""
+              type="password"
+            />
+          </bformgroup-stub>
+           
+          <div
+            slot="footer"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="submit"
+              variant="primary"
+            >
+              <i
+                class="fa fa-dot-circle-o"
+              />
+               Submit
+            </bbutton-stub>
+             
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="reset"
+              variant="danger"
+            >
+              <i
+                class="fa fa-ban"
+              />
+               Reset
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+       
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        no-block="true"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Input 
+          <strong>
+            Grid
+          </strong>
+        </div>
+         
+        <bcardbody-stub
+          bodytag="div"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="3"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-3"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="4"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-4"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="5"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-5"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="6"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-6"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="7"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-7"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="8"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-8"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="9"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-9"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="10"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-10"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="11"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-11"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+           
+          <brow-stub
+            class="form-group"
+            tag="div"
+          >
+            <bcol-stub
+              sm="12"
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder=".col-sm-12"
+                type="text"
+              />
+            </bcol-stub>
+          </brow-stub>
+        </bcardbody-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="primary"
+          >
+            <i
+              class="fa fa-user"
+            />
+             Login
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+       
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Input 
+          <strong>
+            Sizes
+          </strong>
+        </div>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          horizontal="true"
+          label="Small input"
+          labelcols="5"
+          labelfor="smInput"
+          labelsize="sm"
+        >
+          <bforminput-stub
+            id="smInput"
+            placeholder="size='sm'"
+            size="sm"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          horizontal="true"
+          label="Default input"
+          labelcols="5"
+          labelfor="defaultInput"
+        >
+          <bforminput-stub
+            id="defaultInput"
+            placeholder="normal"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          horizontal="true"
+          label="Large input"
+          labelcols="5"
+          labelfor="lgInput"
+          labelsize="lg"
+        >
+          <bforminput-stub
+            id="lgInput"
+            placeholder="size='lg'"
+            size="lg"
+            type="text"
+          />
+        </bformgroup-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="primary"
+          >
+            <i
+              class="fa fa-dot-circle-o"
+            />
+             Submit
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="6"
+      sm="12"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        no-block="true"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Validation feedback
+          </strong>
+           Form
+        
+        </div>
+         
+        <bcardbody-stub
+          bodytag="div"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bform-stub>
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+              validated="true"
+            >
+              <label
+                class="col-form-label"
+                for="inputIsValid"
+              >
+                Input is valid
+              </label>
+               
+              <input
+                class="form-control is-valid"
+                id="inputIsValid"
+                type="text"
+              />
+               
+              <bformvalidfeedback-stub
+                tag="div"
+              >
+                
+                Input is valid.
+              
+              </bformvalidfeedback-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              labelcols="3"
+            >
+              <label
+                class="col-form-label"
+                for="inputIsInvalid"
+              >
+                Input is invalid
+              </label>
+               
+              <input
+                class="form-control is-invalid"
+                id="inputIsInvalid"
+                type="text"
+              />
+               
+              <bforminvalidfeedback-stub
+                tag="div"
+              >
+                
+                Please provide a valid information.
+              
+              </bforminvalidfeedback-stub>
+            </bformgroup-stub>
+          </bform-stub>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      sm="12"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        no-block="true"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Validation feedback
+          </strong>
+           Form
+        
+        </div>
+         
+        <bcardbody-stub
+          bodytag="div"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <bform-stub
+            novalidate="true"
+            validated="true"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              label="Non-required input"
+              labelcols="3"
+              labelfor="inputSuccess2"
+            >
+              <bforminput-stub
+                class="form-control-success"
+                id="inputSuccess2"
+                type="text"
+              />
+               
+              <bformvalidfeedback-stub
+                tag="div"
+              >
+                
+                Input is not required.
+              
+              </bformvalidfeedback-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              label="Required input"
+              labelcols="3"
+              labelfor="inputError2"
+            >
+              <bforminput-stub
+                class="form-control-warning"
+                id="inputError2"
+                required=""
+                type="text"
+              />
+               
+              <bformvalidfeedback-stub
+                tag="div"
+              >
+                
+                Input provided.
+              
+              </bformvalidfeedback-stub>
+               
+              <bforminvalidfeedback-stub
+                tag="div"
+              >
+                
+                Please provide a required input.
+              
+              </bforminvalidfeedback-stub>
+            </bformgroup-stub>
+          </bform-stub>
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Icon/Text
+          </strong>
+           Groups
+        
+        </div>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <binputgrouptext-stub
+                tag="div"
+              >
+                <i
+                  class="fa fa-user"
+                />
+              </binputgrouptext-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              placeholder="Username"
+              type="text"
+            />
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <bforminput-stub
+              autocomplete="email"
+              placeholder="Email"
+              type="email"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <binputgrouptext-stub
+                tag="div"
+              >
+                <i
+                  class="fa fa-envelope-o"
+                />
+              </binputgrouptext-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <binputgrouptext-stub
+                tag="div"
+              >
+                <i
+                  class="fa fa-euro"
+                />
+              </binputgrouptext-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              placeholder="ex. $1.000.000"
+              type="text"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <binputgrouptext-stub
+                tag="div"
+              >
+                .00
+              </binputgrouptext-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="success"
+          >
+            <i
+              class="fa fa-dot-circle-o"
+            />
+             Submit
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Buttons
+          </strong>
+           Groups
+        
+        </div>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                <i
+                  class="fa fa-search"
+                />
+                 Search
+              
+              </bbutton-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              placeholder="Username"
+              type="text"
+            />
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <bforminput-stub
+              autocomplete="email"
+              placeholder="Email"
+              type="email"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                Submit
+              </bbutton-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                <i
+                  class="fa fa-facebook"
+                />
+              </bbutton-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              autocomplete="email"
+              placeholder="Email"
+              type="email"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                <i
+                  class="fa fa-twitter"
+                />
+              </bbutton-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="success"
+          >
+            <i
+              class="fa fa-dot-circle-o"
+            />
+             Submit
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Dropdowns
+          </strong>
+           Groups
+        
+        </div>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <bdropdown-stub
+                boundary="scrollParent"
+                role="menu"
+                text="Action"
+                toggletext="Toggle Dropdown"
+                variant="primary"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Another action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Something else here...
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  disabled="true"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Disabled action
+                </bdropdownitem-stub>
+              </bdropdown-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              placeholder="Username"
+              type="text"
+            />
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder="Email"
+              type="text"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <bdropdown-stub
+                boundary="scrollParent"
+                right=""
+                role="menu"
+                text="Action"
+                toggletext="Toggle Dropdown"
+                variant="primary"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Another action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Something else here...
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  disabled="true"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Disabled action
+                </bdropdownitem-stub>
+              </bdropdown-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <bformgroup-stub
+          breakpoint="sm"
+          labelcols="3"
+        >
+          <binputgroup-stub
+            tag="div"
+          >
+            <binputgroupprepend-stub
+              tag="div"
+            >
+              <bdropdown-stub
+                boundary="scrollParent"
+                role="menu"
+                split="true"
+                text="Split"
+                toggletext="Toggle Dropdown"
+                variant="primary"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  Action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  Another action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  Something else here...
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  disabled="true"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Disabled action
+                </bdropdownitem-stub>
+              </bdropdown-stub>
+            </binputgroupprepend-stub>
+             
+            <bforminput-stub
+              placeholder="..."
+              type="text"
+            />
+             
+            <binputgroupappend-stub
+              append="true"
+              tag="div"
+            >
+              <bdropdown-stub
+                boundary="scrollParent"
+                right=""
+                role="menu"
+                text="Action"
+                toggletext="Toggle Dropdown"
+                variant="primary"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Another action
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Something else here...
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  disabled="true"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Disabled action
+                </bdropdownitem-stub>
+              </bdropdown-stub>
+            </binputgroupappend-stub>
+          </binputgroup-stub>
+        </bformgroup-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="success"
+          >
+            <i
+              class="fa fa-dot-circle-o"
+            />
+             Submit
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="reset"
+            variant="danger"
+          >
+            <i
+              class="fa fa-ban"
+            />
+             Reset
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Use the grid for big devices! 
+          <small>
+            <code>
+              .col-lg-*
+            </code>
+             
+            <code>
+              .col-md-*
+            </code>
+             
+            <code>
+              .col-sm-*
+            </code>
+          </small>
+        </div>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            md="8"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-8"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            md="4"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-4"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            md="7"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-7"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            md="5"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-5"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            md="6"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-6"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            md="6"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-6"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            md="5"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-5"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            md="7"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-7"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            md="4"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-4"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            md="8"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-md-8"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="primary"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="btn btn-sm btn-warning"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="btn btn-sm btn-info"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Action
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Input Grid for small devices! 
+          <small>
+            <code>
+              .col-*
+            </code>
+          </small>
+        </div>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            cols="4"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-4"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            cols="8"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-8"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            cols="5"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-5"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            cols="7"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-7"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            cols="6"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-6"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            cols="6"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-6"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            cols="7"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-5"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            cols="5"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-5"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <brow-stub
+          class="form-group"
+          tag="div"
+        >
+          <bcol-stub
+            cols="8"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-8"
+              type="text"
+            />
+          </bcol-stub>
+           
+          <bcol-stub
+            cols="4"
+            tag="div"
+          >
+            <bforminput-stub
+              placeholder=".col-4"
+              type="text"
+            />
+          </bcol-stub>
+        </brow-stub>
+         
+        <div
+          slot="footer"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="submit"
+            variant="primary"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="btn btn-sm btn-warning"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="btn btn-sm btn-info"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Action
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Action
+          </bbutton-stub>
+        </div>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Example Form
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  Username
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                type="text"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-user"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  Email
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                autocomplete="email"
+                type="email"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-envelope"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  Password
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                autocomplete="current-password"
+                type="password"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-asterisk"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <div
+            class="form-group form-actions"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="submit"
+              variant="primary"
+            >
+              Submit
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Example Form
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <bforminput-stub
+                placeholder="Username"
+                type="text"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-user"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <bforminput-stub
+                autocomplete="email"
+                placeholder="Email"
+                type="email"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-envelope"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <bforminput-stub
+                autocomplete="current-password"
+                placeholder="Password"
+                type="password"
+              />
+               
+              <binputgroupappend-stub
+                append="true"
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-asterisk"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupappend-stub>
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <div
+            class="form-group form-actions"
+          >
+            <bbutton-stub
+              activeclass="active"
+              class="btn btn-sm btn-secondary"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="submit"
+            >
+              Submit
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      sm="4"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Example Form
+        
+        </div>
+         
+        <bform-stub>
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-user"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                placeholder="Username"
+                type="text"
+              />
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-envelope"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                autocomplete="email"
+                placeholder="Email"
+                type="email"
+              />
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <bformgroup-stub
+            breakpoint="sm"
+            labelcols="3"
+          >
+            <binputgroup-stub
+              tag="div"
+            >
+              <binputgroupprepend-stub
+                tag="div"
+              >
+                <binputgrouptext-stub
+                  tag="div"
+                >
+                  <i
+                    class="fa fa-asterisk"
+                  />
+                </binputgrouptext-stub>
+              </binputgroupprepend-stub>
+               
+              <bforminput-stub
+                autocomplete="current-password"
+                placeholder="Password"
+                type="password"
+              />
+            </binputgroup-stub>
+          </bformgroup-stub>
+           
+          <div
+            class="form-group form-actions"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              size="sm"
+              target="_self"
+              type="submit"
+              variant="success"
+            >
+              Submit
+            </bbutton-stub>
+          </div>
+        </bform-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="12"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        name="fade"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <i
+            class="fa fa-edit"
+          />
+           Form Elements
+            
+          <div
+            class="card-header-actions"
+          >
+            <blink-stub
+              activeclass="active"
+              class="card-header-action btn-setting"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+            >
+              <i
+                class="icon-settings"
+              />
+            </blink-stub>
+             
+            <blink-stub
+              activeclass="active"
+              class="card-header-action btn-minimize"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              <i
+                class="icon-arrow-up"
+              />
+            </blink-stub>
+             
+            <blink-stub
+              activeclass="active"
+              class="card-header-action btn-close"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+            >
+              <i
+                class="icon-close"
+              />
+            </blink-stub>
+          </div>
+        </div>
+         
+        <bcollapse-stub
+          id="collapse1"
+          tag="div"
+          visible="true"
+        >
+          <bcardbody-stub
+            bodytag="div"
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <bformgroup-stub
+              breakpoint="sm"
+              description="Here's some help text"
+              label="Prepended text"
+              labelcols="3"
+              labelfor="elementsEmail"
+            >
+              <binputgroup-stub
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    @
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  autocomplete="email"
+                  id="elementsEmail"
+                  type="email"
+                />
+              </binputgroup-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              description="Here's some help text"
+              label="Appended text"
+              labelcols="3"
+              labelfor="elementsAppend"
+            >
+              <binputgroup-stub
+                tag="div"
+              >
+                <bforminput-stub
+                  id="elementsAppend"
+                  type="text"
+                />
+                 
+                <binputgroupappend-stub
+                  append="true"
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    .00
+                  </binputgrouptext-stub>
+                </binputgroupappend-stub>
+              </binputgroup-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              description="Here's some help text"
+              label="Append and prepend"
+              labelcols="3"
+              labelfor="elementsPrependAppend"
+            >
+              <binputgroup-stub
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    $
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  id="elementsPrependAppend"
+                  type="text"
+                />
+                 
+                <binputgroupappend-stub
+                  append="true"
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    .00
+                  </binputgrouptext-stub>
+                </binputgroupappend-stub>
+              </binputgroup-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              description="Here's some help text"
+              label="Append with button"
+              labelcols="3"
+              labelfor="elementsAppendButton"
+            >
+              <binputgroup-stub
+                tag="div"
+              >
+                <bforminput-stub
+                  id="elementsAppendButton"
+                  type="text"
+                />
+                 
+                <binputgroupappend-stub
+                  append="true"
+                  tag="div"
+                >
+                  <bbutton-stub
+                    activeclass="active"
+                    event="click"
+                    exactactiveclass="active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="primary"
+                  >
+                    Go!
+                  </bbutton-stub>
+                </binputgroupappend-stub>
+              </binputgroup-stub>
+            </bformgroup-stub>
+             
+            <bformgroup-stub
+              breakpoint="sm"
+              label="Two-buttons append"
+              labelcols="3"
+              labelfor="elementsTwoButtons"
+            >
+              <binputgroup-stub
+                tag="div"
+              >
+                <bforminput-stub
+                  id="elementsTwoButtons"
+                  type="text"
+                />
+                 
+                <binputgroupappend-stub
+                  append="true"
+                  tag="div"
+                >
+                  <bbutton-stub
+                    activeclass="active"
+                    event="click"
+                    exactactiveclass="active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="primary"
+                  >
+                    Search
+                  </bbutton-stub>
+                   
+                  <bbutton-stub
+                    activeclass="active"
+                    event="click"
+                    exactactiveclass="active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="danger"
+                  >
+                    Options
+                  </bbutton-stub>
+                </binputgroupappend-stub>
+              </binputgroup-stub>
+            </bformgroup-stub>
+             
+            <div
+              class="form-actions"
+            >
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="submit"
+                variant="primary"
+              >
+                Save changes
+              </bbutton-stub>
+               
+              <bbutton-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </bbutton-stub>
+            </div>
+          </bcardbody-stub>
+        </bcollapse-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
new file mode 100644
index 00000000..1157f527
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Jumbotrons.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Jumbotron 
+            </strong>
+             
+            <div
+              class="card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://bootstrap-vue.js.org/docs/components/jumbotron"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </div>
+           
+          <div>
+            <bjumbotron-stub
+              header="Bootstrap 4"
+              headerlevel="3"
+              headertag="h1"
+              lead="Bootstrap 4 Components for Vue.js 2"
+              leadtag="p"
+              tag="div"
+            >
+              <p>
+                For more information visit website
+              </p>
+               
+              <bbtn-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                More Info
+              </bbtn-stub>
+            </bjumbotron-stub>
+          </div>
+        </bcard-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Jumbotron 
+            </strong>
+             
+            <small>
+              with slots
+            </small>
+          </div>
+           
+          <div>
+            <bjumbotron-stub
+              headerlevel="3"
+              headertag="h1"
+              leadtag="p"
+              tag="div"
+            >
+              <template>
+                
+                Bootstrap 4
+              
+              </template>
+               
+              <template>
+                
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              
+              </template>
+               
+              <hr
+                class="my-4"
+              />
+               
+              <p>
+                
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              
+              </p>
+               
+              <bbtn-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                Do Something
+              </bbtn-stub>
+               
+              <bbtn-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="success"
+              >
+                Do Something Else
+              </bbtn-stub>
+            </bjumbotron-stub>
+          </div>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Jumbotron 
+            </strong>
+             
+            <small>
+              variants
+            </small>
+          </div>
+           
+          <div>
+            <bjumbotron-stub
+              bgvariant="info"
+              bordervariant="dark"
+              headerlevel="3"
+              headertag="h1"
+              leadtag="p"
+              tag="div"
+              textvariant="white"
+            >
+              <template>
+                
+                Bootstrap 4
+              
+              </template>
+               
+              <template>
+                
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              
+              </template>
+               
+              <hr
+                class="my-4"
+              />
+               
+              <p>
+                
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              
+              </p>
+            </bjumbotron-stub>
+          </div>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
new file mode 100644
index 00000000..104d30f8
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -0,0 +1,1188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListGroups.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               Bootstrap list group 
+            </strong>
+             
+            <div
+              class="card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://bootstrap-vue.js.org/docs/components/list-group"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              active items
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              active="true"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              disabled items
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Cras justo odio
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Dapibus ac facilisis in
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Morbi leo risus
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Porta ac consectetur ac
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Vestibulum at eros
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              actionable items
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#some-link"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Awesome link
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              active="true"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Link with active state
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Action links are easy
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#foobar"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Disabled link
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              buttons
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              button="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Button item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              button="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              I am a button
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              button="true"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              Disabled button
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              button="true"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              This is a button too
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              with badges
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Cras justo odio
+              
+              <bbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                14
+              </bbadge-stub>
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Dapibus ac facilisis in
+              
+              <bbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                2
+              </bbadge-stub>
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              class="d-flex justify-content-between align-items-center"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              
+              Morbi leo risus
+              
+              <bbadge-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                pill="true"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                1
+              </bbadge-stub>
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              variants
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              This is a default list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="primary"
+            >
+              This is a primary list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="secondary"
+            >
+              This is a secondary list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="success"
+            >
+              This is a success list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="danger"
+            >
+              This is a danger list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="warning"
+            >
+              This is a warning list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="info"
+            >
+              This is a info list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="light"
+            >
+              This is a light list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="dark"
+            >
+              This is a dark list group item
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              variants active
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              This is a default list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="primary"
+            >
+              This is a primary list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="secondary"
+            >
+              This is a secondary list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="success"
+            >
+              This is a success list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="danger"
+            >
+              This is a danger list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="warning"
+            >
+              This is a warning list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="info"
+            >
+              This is a info list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="light"
+            >
+              This is a light list group item
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+              variant="dark"
+            >
+              This is a dark list group item
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        cols="12"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              inside cards
+            </small>
+          </div>
+           
+          <bcardgroup-stub
+            deck="true"
+            tag="div"
+          >
+            <bcard-stub
+              bodytag="div"
+              footertag="div"
+              header=<b>Card with list group</b>
+              headertag="div"
+              subtitletag="h6"
+              tag="div"
+              titletag="h4"
+            >
+              <blistgroup-stub
+                tag="div"
+              >
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Cras justo odio
+                </blistgroupitem-stub>
+                 
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Dapibus ac facilisis in
+                </blistgroupitem-stub>
+                 
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Vestibulum at eros
+                </blistgroupitem-stub>
+              </blistgroup-stub>
+               
+              <p
+                class="card-text mt-2"
+              >
+                
+                Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                ad sit ipsum anim Lorem.
+              
+              </p>
+            </bcard-stub>
+             
+            <bcard-stub
+              bodytag="div"
+              footertag="div"
+              header=<b>Card with flush list group</b>
+              headertag="div"
+              nobody="true"
+              subtitletag="h6"
+              tag="div"
+              titletag="h4"
+            >
+              <blistgroup-stub
+                flush="true"
+                tag="div"
+              >
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Cras justo odio
+                </blistgroupitem-stub>
+                 
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Dapibus ac facilisis in
+                </blistgroupitem-stub>
+                 
+                <blistgroupitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  tag="div"
+                  target="_self"
+                >
+                  Vestibulum at eros
+                </blistgroupitem-stub>
+              </blistgroup-stub>
+               
+              <bcardbody-stub
+                bodytag="div"
+                subtitletag="h6"
+                titletag="h4"
+              >
+                
+                Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                ad sit ipsum anim Lorem.
+              
+              </bcardbody-stub>
+            </bcard-stub>
+          </bcardgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="footer"
+          headertag="header"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <div
+            slot="header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               List group 
+            </strong>
+            <small>
+              custom content
+            </small>
+          </div>
+           
+          <blistgroup-stub
+            tag="div"
+          >
+            <blistgroupitem-stub
+              active="true"
+              activeclass="active"
+              class="flex-column align-items-start"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              <div
+                class="d-flex w-100 justify-content-between"
+              >
+                <h5
+                  class="mb-1"
+                >
+                  List group item heading
+                </h5>
+                 
+                <small>
+                  3 days ago
+                </small>
+              </div>
+               
+              <p
+                class="mb-1"
+              >
+                
+                Donec id elit non mi porta gravida at eget metus. Maecenas
+                sed diam eget risus varius blandit.
+              
+              </p>
+               
+              <small>
+                Donec id elit non mi porta.
+              </small>
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              class="flex-column align-items-start"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              <div
+                class="d-flex w-100 justify-content-between"
+              >
+                <h5
+                  class="mb-1"
+                >
+                  List group item heading
+                </h5>
+                 
+                <small
+                  class="text-muted"
+                >
+                  3 days ago
+                </small>
+              </div>
+               
+              <p
+                class="mb-1"
+              >
+                
+                Donec id elit non mi porta gravida at eget metus. Maecenas
+                sed diam eget risus varius blandit.
+              
+              </p>
+               
+              <small
+                class="text-muted"
+              >
+                Donec id elit non mi porta.
+              </small>
+            </blistgroupitem-stub>
+             
+            <blistgroupitem-stub
+              activeclass="active"
+              class="flex-column align-items-start"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              tag="div"
+              target="_self"
+            >
+              <div
+                class="d-flex w-100 justify-content-between"
+              >
+                <h5
+                  class="mb-1"
+                >
+                  Disabled List group item
+                </h5>
+                 
+                <small
+                  class="text-muted"
+                >
+                  3 days ago
+                </small>
+              </div>
+               
+              <p
+                class="mb-1"
+              >
+                
+                Donec id elit non mi porta gravida at eget metus. Maecenas
+                sed diam eget risus varius blandit.
+              
+              </p>
+               
+              <small
+                class="text-muted"
+              >
+                Donec id elit non mi porta.
+              </small>
+            </blistgroupitem-stub>
+          </blistgroup-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
new file mode 100644
index 00000000..427bf1b9
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
@@ -0,0 +1,590 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbars.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navbar 
+        </strong>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/navbar"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <bnavbar-stub
+        tag="nav"
+        toggleable="md"
+        type="dark"
+        variant="info"
+      >
+        <bnavbartoggle-stub
+          label="Toggle navigation"
+          target="nav_collapse"
+        />
+         
+        <bnavbarbrand-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          href="#"
+          routertag="a"
+          tag="div"
+          target="_self"
+        >
+          NavBar
+        </bnavbarbrand-stub>
+         
+        <bcollapse-stub
+          id="nav_collapse"
+          isnav="true"
+          tag="div"
+        >
+          <bnavbarnav-stub
+            tag="ul"
+          >
+            <bnavitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+            >
+              Link
+            </bnavitem-stub>
+             
+            <bnavitem-stub
+              activeclass="active"
+              disabled="true"
+              event="click"
+              exactactiveclass="active"
+              href="#"
+              routertag="a"
+              target="_self"
+            >
+              Disabled
+            </bnavitem-stub>
+          </bnavbarnav-stub>
+           
+          <bnavbarnav-stub
+            class="ml-auto"
+            tag="ul"
+          >
+            <bnavform-stub>
+              <bforminput-stub
+                class="mr-sm-2"
+                placeholder="Search"
+                size="sm"
+                type="text"
+              />
+               
+              <bbutton-stub
+                activeclass="active"
+                class="my-2 my-sm-0"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                size="sm"
+                target="_self"
+                type="submit"
+              >
+                Search
+              </bbutton-stub>
+            </bnavform-stub>
+             
+            <bnavitemdropdown-stub
+              extramenuclasses=""
+              extratoggleclasses=""
+              right=""
+              role="menu"
+              text="Lang"
+            >
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                EN
+              </bdropdownitem-stub>
+               
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                ES
+              </bdropdownitem-stub>
+               
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                RU
+              </bdropdownitem-stub>
+               
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                FA
+              </bdropdownitem-stub>
+            </bnavitemdropdown-stub>
+             
+            <bnavitemdropdown-stub
+              extramenuclasses=""
+              extratoggleclasses=""
+              right=""
+              role="menu"
+            >
+              <template>
+                <em>
+                  User
+                </em>
+              </template>
+               
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                Profile
+              </bdropdownitem-stub>
+               
+              <bdropdownitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                Signout
+              </bdropdownitem-stub>
+            </bnavitemdropdown-stub>
+          </bnavbarnav-stub>
+        </bcollapse-stub>
+      </bnavbar-stub>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          brand
+        </small>
+      </div>
+       
+      <div>
+        <bnavbar-stub
+          tag="nav"
+          type="light"
+          variant="faded"
+        >
+          <bnavbarbrand-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            href="#"
+            routertag="a"
+            tag="h1"
+            target="_self"
+          >
+            <img
+              alt="BV"
+              class="d-inline-block align-top"
+              src="https://placekitten.com/g/30/30"
+            />
+            
+            BootstrapVue
+          
+          </bnavbarbrand-stub>
+        </bnavbar-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          text
+        </small>
+      </div>
+       
+      <div>
+        <bnavbar-stub
+          tag="nav"
+          toggleable="true"
+          type="light"
+          variant="light"
+        >
+          <bnavbartoggle-stub
+            label="Toggle navigation"
+            target="nav_text_collapse"
+          />
+           
+          <bnavbarbrand-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            tag="div"
+            target="_self"
+          >
+            BootstrapVue
+          </bnavbarbrand-stub>
+           
+          <bcollapse-stub
+            id="nav_text_collapse"
+            isnav="true"
+            tag="div"
+          >
+            <bnavbarnav-stub
+              tag="ul"
+            >
+              <bnavtext-stub
+                tag="span"
+              >
+                Navbar text
+              </bnavtext-stub>
+            </bnavbarnav-stub>
+          </bcollapse-stub>
+        </bnavbar-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          dropdown
+        </small>
+      </div>
+       
+      <div>
+        <bnavbar-stub
+          tag="nav"
+          toggleable="true"
+          type="dark"
+          variant="primary"
+        >
+          <bnavbartoggle-stub
+            label="Toggle navigation"
+            target="nav_dropdown_collapse"
+          />
+           
+          <bcollapse-stub
+            id="nav_dropdown_collapse"
+            isnav="true"
+            tag="div"
+          >
+            <bnavbarnav-stub
+              tag="ul"
+            >
+              <bnavitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                Home
+              </bnavitem-stub>
+               
+              <bnavitem-stub
+                activeclass="active"
+                event="click"
+                exactactiveclass="active"
+                href="#"
+                routertag="a"
+                target="_self"
+              >
+                Link
+              </bnavitem-stub>
+               
+              <bnavitemdropdown-stub
+                extramenuclasses=""
+                extratoggleclasses=""
+                right=""
+                role="menu"
+                text="Lang"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  EN
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  ES
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  RU
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  FA
+                </bdropdownitem-stub>
+              </bnavitemdropdown-stub>
+               
+              <bnavitemdropdown-stub
+                extramenuclasses=""
+                extratoggleclasses=""
+                right=""
+                role="menu"
+                text="User"
+              >
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  Account
+                </bdropdownitem-stub>
+                 
+                <bdropdownitem-stub
+                  activeclass="active"
+                  event="click"
+                  exactactiveclass="active"
+                  href="#"
+                  routertag="a"
+                  target="_self"
+                >
+                  Settings
+                </bdropdownitem-stub>
+              </bnavitemdropdown-stub>
+            </bnavbarnav-stub>
+          </bcollapse-stub>
+        </bnavbar-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          form
+        </small>
+      </div>
+       
+      <div>
+        <bnavbar-stub
+          tag="nav"
+          type="light"
+          variant="light"
+        >
+          <bnavform-stub>
+            <bforminput-stub
+              class="mr-sm-2"
+              placeholder="Search"
+              type="text"
+            />
+             
+            <bbutton-stub
+              activeclass="active"
+              class="my-2 my-sm-0"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="submit"
+              variant="outline-success"
+            >
+              Search
+            </bbutton-stub>
+          </bnavform-stub>
+        </bnavbar-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          input group
+        </small>
+      </div>
+       
+      <div>
+        <bnavbar-stub
+          tag="nav"
+          type="light"
+          variant="light"
+        >
+          <bnavform-stub>
+            <binputgroup-stub
+              left="@"
+              tag="div"
+            >
+              <bforminput-stub
+                class="mr-sm-2"
+                placeholder="Username"
+                type="text"
+              />
+            </binputgroup-stub>
+          </bnavform-stub>
+        </bnavbar-stub>
+      </div>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
new file mode 100644
index 00000000..1c3dc4df
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -0,0 +1,553 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navs.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs
+        </strong>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/nav"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <div>
+        <bnav-stub
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Another Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          tab style
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          tabs="true"
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Another Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          pill style
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          pills="true"
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Another Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          fill tabs
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          fill="true"
+          tabs="true"
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link with a long name 
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          justified tabs
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          justified="true"
+          tabs="true"
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link with a long name 
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          dropdown support
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          pills="true"
+          tag="ul"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitemdropdown-stub
+            extramenuclasses=""
+            extratoggleclasses=""
+            id="nav7_ddown"
+            right=""
+            role="menu"
+            text="Dropdown"
+          >
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              one
+            </bdropdownitem-stub>
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              two
+            </bdropdownitem-stub>
+             
+            <bdropdowndivider-stub
+              tag="div"
+            />
+             
+            <bdropdownitem-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+            >
+              three
+            </bdropdownitem-stub>
+          </bnavitemdropdown-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs 
+        </strong>
+        <small>
+          vertical variation
+        </small>
+      </div>
+       
+      <div>
+        <bnav-stub
+          class="w-25"
+          tag="ul"
+          vertical="true"
+        >
+          <bnavitem-stub
+            active="true"
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Active
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Another Link
+          </bnavitem-stub>
+           
+          <bnavitem-stub
+            activeclass="active"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+          >
+            Disabled
+          </bnavitem-stub>
+        </bnav-stub>
+      </div>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
new file mode 100644
index 00000000..ed954b47
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paginations.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Pagination
+        </strong>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/pagination"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <div>
+        <h6>
+          Default
+        </h6>
+         
+        <bpagination-stub
+          perpage="10"
+          size="md"
+          totalrows="100"
+        />
+         
+        <br />
+         
+        <h6>
+          Small
+        </h6>
+         
+        <bpagination-stub
+          perpage="10"
+          size="sm"
+          totalrows="100"
+        />
+         
+        <br />
+         
+        <div
+          class="d-sm-down-none"
+        >
+          <h6>
+            Large
+          </h6>
+           
+          <bpagination-stub
+            perpage="10"
+            size="lg"
+            totalrows="100"
+          />
+           
+          <br />
+        </div>
+         
+        <div>
+          currentPage: 3
+        </div>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Pagination 
+        </strong>
+         
+        <small>
+          alignment
+        </small>
+      </div>
+       
+      <div>
+        <h6>
+          Left alignment (default)
+        </h6>
+         
+        <bpagination-stub
+          perpage="10"
+          totalrows="100"
+        />
+         
+        <br />
+         
+        <h6>
+          Center alignment
+        </h6>
+         
+        <bpagination-stub
+          align="center"
+          perpage="10"
+          totalrows="100"
+        />
+         
+        <br />
+         
+        <h6>
+          Right (end) alignment
+        </h6>
+         
+        <bpagination-stub
+          align="right"
+          perpage="10"
+          totalrows="100"
+        />
+         
+        <br />
+         
+        <div>
+          currentPage: 3
+        </div>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Pagination 
+        </strong>
+         
+        <small>
+          navigation
+        </small>
+      </div>
+       
+      <div>
+        <h6>
+          Default
+        </h6>
+         
+        <bpaginationnav-stub
+          activeclass="active"
+          baseurl="#"
+          numberofpages="10"
+        />
+         
+        <h6
+          class="mt-4"
+        >
+          With link generator function
+        </h6>
+         
+        <bpaginationnav-stub
+          activeclass="active"
+          baseurl="/"
+          linkgen="function () { [native code] }"
+          numberofpages="10"
+        />
+         
+        <br />
+         
+        <div
+          class="mt-4"
+        >
+          currentPage: 3
+        </div>
+      </div>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Popovers.spec.js.snap b/tests/unit/views/base/__snapshots__/Popovers.spec.js.snap
new file mode 100644
index 00000000..0aa52af9
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Popovers.spec.js.snap
@@ -0,0 +1,941 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popovers.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Popovers
+        </strong>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/popovers"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <brow-stub
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          tag="div"
+        >
+          <div
+            class="my-3 text-center"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              title="Popover Title"
+              type="button"
+            >
+              
+              Hover Me
+            
+            </bbtn-stub>
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          tag="div"
+        >
+          <div
+            class="my-3 text-center"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="popoverButton-open"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              Button
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content=""
+              placement="right"
+              show=""
+              target="popoverButton-open"
+              title="Popover"
+              triggers="click"
+            >
+              
+              I start 
+              <strong>
+                open
+              </strong>
+            </bpopover-stub>
+          </div>
+        </bcol-stub>
+      </brow-stub>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popovers 
+        </strong>
+         
+        <small>
+          placement
+        </small>
+      </div>
+       
+      <div
+        class="my-3"
+      >
+        <brow-stub
+          tag="div"
+        >
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-topright"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              topright
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement topright"
+              placement="topright"
+              target="exPopover1-topright"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-top"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              top
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement top"
+              placement="top"
+              target="exPopover1-top"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-topleft"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              topleft
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement topleft"
+              placement="topleft"
+              target="exPopover1-topleft"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-bottomright"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottomright
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement bottomright"
+              placement="bottomright"
+              target="exPopover1-bottomright"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-bottom"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement bottom"
+              placement="bottom"
+              target="exPopover1-bottom"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-bottomleft"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottomleft
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement bottomleft"
+              placement="bottomleft"
+              target="exPopover1-bottomleft"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-righttop"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              righttop
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement righttop"
+              placement="righttop"
+              target="exPopover1-righttop"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-right"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement right"
+              placement="right"
+              target="exPopover1-right"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-lefttop"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              lefttop
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement lefttop"
+              placement="lefttop"
+              target="exPopover1-lefttop"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-rightbottom"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              rightbottom
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement rightbottom"
+              placement="rightbottom"
+              target="exPopover1-rightbottom"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-left"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement left"
+              placement="left"
+              target="exPopover1-left"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+          <bcol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="exPopover1-leftbottom"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              leftbottom
+            
+            </bbtn-stub>
+             
+            <bpopover-stub
+              content="Placement leftbottom"
+              placement="leftbottom"
+              target="exPopover1-leftbottom"
+              title="Popover!"
+              triggers="hover focus"
+            />
+          </bcol-stub>
+        </brow-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      class="d-sm-down-none"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popovers 
+        </strong>
+         
+        <small>
+          via properties or slots
+        </small>
+      </div>
+       
+      <brow-stub
+        tag="div"
+      >
+        <bcol-stub
+          class="py-4 text-center"
+          md="6"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="exPopover2"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Using properties
+          </bbtn-stub>
+           
+          <bpopover-stub
+            content="Embedding content using properties is easy"
+            placement="right"
+            target="exPopover2"
+            title="Prop Examples"
+            triggers="hover focus"
+          />
+        </bcol-stub>
+         
+        <bcol-stub
+          class="py-4 text-center"
+          md="6"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="exPopover3"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Using slots
+          </bbtn-stub>
+           
+          <bpopover-stub
+            content=""
+            placement="right"
+            target="exPopover3"
+            title=""
+            triggers="hover focus"
+          >
+            <template>
+              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.
+          
+          </bpopover-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popovers 
+        </strong>
+         
+        <small>
+          show
+        </small>
+      </div>
+       
+      <div
+        class="d-flex flex-column text-md-center"
+      >
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="popoverButton-sync"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            I have a popover
+          </bbtn-stub>
+        </div>
+         
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Toggle Popover
+          </bbtn-stub>
+           
+          <bpopover-stub
+            content=""
+            placement="right"
+            target="popoverButton-sync"
+            title="Popover"
+            triggers="click"
+          >
+            
+            Hello 
+            <strong>
+              World!
+            </strong>
+          </bpopover-stub>
+        </div>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popover 
+        </strong>
+         
+        <small>
+          open/close events
+        </small>
+      </div>
+       
+      <div
+        class="d-flex flex-column text-md-center"
+      >
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="popoverButton-event"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            I have a popover
+          </bbtn-stub>
+        </div>
+         
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Open
+          </bbtn-stub>
+           
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Close
+          </bbtn-stub>
+        </div>
+         
+        <bpopover-stub
+          content=""
+          placement="right"
+          target="popoverButton-event"
+          title="Popover"
+          triggers="click"
+        >
+          
+          Hello 
+          <strong>
+            World!
+          </strong>
+        </bpopover-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popover 
+        </strong>
+         
+        <small>
+          enable/disable events
+        </small>
+      </div>
+       
+      <div
+        class="d-flex flex-column text-md-center"
+      >
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="popoverButton-disableevent"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            I have a popover
+          </bbtn-stub>
+        </div>
+         
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Enable
+          </bbtn-stub>
+           
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Disable
+          </bbtn-stub>
+        </div>
+         
+        <bpopover-stub
+          content=""
+          placement="right"
+          target="popoverButton-disableevent"
+          title="Popover"
+          triggers="click"
+        >
+          
+          Hello 
+          <strong>
+            World!
+          </strong>
+        </bpopover-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Popover 
+        </strong>
+        <small>
+          <code>
+            v-b-popover
+          </code>
+           directive
+        </small>
+      </div>
+       
+      <brow-stub
+        tag="div"
+      >
+        <bcol-stub
+          class="py-3 text-center"
+          md="3"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            title="Popover!"
+            type="button"
+            variant="primary"
+          >
+            Top
+          </bbtn-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="py-3 text-center"
+          md="3"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            title="Popover!"
+            type="button"
+            variant="primary"
+          >
+            Left
+          </bbtn-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="py-3 text-center"
+          md="3"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            title="Popover!"
+            type="button"
+            variant="primary"
+          >
+            Right
+          </bbtn-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="py-3 text-center"
+          md="3"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            title="Popover!"
+            type="button"
+            variant="primary"
+          >
+            Bottom
+          </bbtn-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
new file mode 100644
index 00000000..7e8a1ef3
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
@@ -0,0 +1,745 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBars.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Progress
+        </strong>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/progress"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <div>
+        <bprogress-stub
+          animated="true"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="45"
+        />
+         
+        <bprogress-stub
+          class="mt-1"
+          max="100"
+          precision="0"
+          showvalue="true"
+          value="0"
+        >
+          <bprogressbar-stub
+            value="27"
+            variant="success"
+          />
+           
+          <bprogressbar-stub
+            value="11.25"
+            variant="warning"
+          />
+           
+          <bprogressbar-stub
+            value="6.75"
+            variant="danger"
+          />
+        </bprogress-stub>
+         
+        <bbtn-stub
+          activeclass="active"
+          class="mt-4"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+        >
+          Click me
+        </bbtn-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          labels
+        </small>
+      </div>
+       
+      <div>
+        <h6>
+          No label
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="50"
+          precision="0"
+          value="33.333333333"
+        />
+         
+        <h6>
+          Value label
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="50"
+          precision="0"
+          showvalue="true"
+          value="33.333333333"
+        />
+         
+        <h6>
+          Progress label
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="50"
+          precision="0"
+          showprogress="true"
+          value="33.333333333"
+        />
+         
+        <h6>
+          Value label with precision
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="50"
+          precision="2"
+          showvalue="true"
+          value="33.333333333"
+        />
+         
+        <h6>
+          Progress label with precision
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="50"
+          precision="2"
+          showprogress="true"
+          value="33.333333333"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          width
+        </small>
+      </div>
+       
+      <div>
+        <h6>
+          Default width
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          value="75"
+        />
+         
+        <h6>
+          Custom widths
+        </h6>
+         
+        <bprogress-stub
+          class="w-75 mb-2"
+          max="100"
+          precision="0"
+          value="75"
+        />
+         
+        <bprogress-stub
+          class="w-50 mb-2"
+          max="100"
+          precision="0"
+          value="75"
+        />
+         
+        <bprogress-stub
+          class="w-25"
+          max="100"
+          precision="0"
+          value="75"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          height
+        </small>
+      </div>
+       
+      <div>
+        <h6>
+          Default height
+        </h6>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+        />
+         
+        <h6>
+          Custom heights
+        </h6>
+         
+        <bprogress-stub
+          class="mb-2"
+          height="2rem"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+        />
+         
+        <bprogress-stub
+          class="mb-2"
+          height="20px"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+        />
+         
+        <bprogress-stub
+          height="2px"
+          max="100"
+          precision="0"
+          value="75"
+        />
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          variants
+        </small>
+      </div>
+       
+      <div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            success:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="success"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            info:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="info"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            warning:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="warning"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            danger:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="danger"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            primary:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="primary"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            secondary:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="secondary"
+            />
+          </div>
+        </div>
+        <div
+          class="row mb-1"
+        >
+          <div
+            class="col-sm-2"
+          >
+            dark:
+          </div>
+           
+          <div
+            class="col-sm-10 pt-1"
+          >
+            <bprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="dark"
+            />
+          </div>
+        </div>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          striped
+        </small>
+      </div>
+       
+      <div>
+        <bprogress-stub
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="25"
+          variant="success"
+        />
+         
+        <bprogress-stub
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="50"
+          variant="info"
+        />
+         
+        <bprogress-stub
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="75"
+          variant="warning"
+        />
+         
+        <bprogress-stub
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="100"
+          variant="danger"
+        />
+         
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          
+          Remove Striped
+        
+        </bbutton-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          animated
+        </small>
+      </div>
+       
+      <div>
+        <bprogress-stub
+          animated="true"
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="25"
+          variant="success"
+        />
+         
+        <bprogress-stub
+          animated="true"
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="50"
+          variant="info"
+        />
+         
+        <bprogress-stub
+          animated="true"
+          class="mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="75"
+          variant="warning"
+        />
+         
+        <bprogress-stub
+          animated="true"
+          class="mb-3"
+          max="100"
+          precision="0"
+          value="100"
+          variant="danger"
+        />
+         
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          
+          Stop Animation
+        
+        </bbutton-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          multiple bars
+        </small>
+      </div>
+       
+      <div>
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          value="0"
+        >
+          <bprogressbar-stub
+            value="15"
+            variant="primary"
+          />
+           
+          <bprogressbar-stub
+            value="30"
+            variant="success"
+          />
+           
+          <bprogressbar-stub
+            value="20"
+            variant="info"
+          />
+        </bprogress-stub>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="0"
+        >
+          <bprogressbar-stub
+            value="15"
+            variant="primary"
+          />
+           
+          <bprogressbar-stub
+            value="30"
+            variant="success"
+          />
+           
+          <bprogressbar-stub
+            value="20"
+            variant="info"
+          />
+        </bprogress-stub>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          showvalue="true"
+          striped="true"
+          value="0"
+        >
+          <bprogressbar-stub
+            value="15"
+            variant="primary"
+          />
+           
+          <bprogressbar-stub
+            value="30"
+            variant="success"
+          />
+           
+          <bprogressbar-stub
+            value="20"
+            variant="info"
+          />
+        </bprogress-stub>
+         
+        <bprogress-stub
+          class="mb-3"
+          max="100"
+          precision="0"
+          value="0"
+        >
+          <bprogressbar-stub
+            showprogress="true"
+            value="15"
+            variant="primary"
+          />
+           
+          <bprogressbar-stub
+            animated="true"
+            showprogress="true"
+            value="30"
+            variant="success"
+          />
+           
+          <bprogressbar-stub
+            showprogress="true"
+            striped="true"
+            value="20"
+            variant="info"
+          />
+        </bprogress-stub>
+      </div>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
new file mode 100644
index 00000000..4ca85481
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -0,0 +1,3283 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switches.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch default
+          
+          <bbadge-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            yes
+          </bbadge-stub>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-668"
+          name="switch1"
+          uncheckedvalue="no"
+          value="yes"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-669"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-670"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-671"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-672"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-673"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-674"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-675"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-676"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch pills
+        
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-677"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-678"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-679"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-680"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-681"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-682"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-683"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-684"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-685"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch
+        
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-686"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-687"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-688"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-689"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-690"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-691"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-692"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-693"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-694"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch 
+          <small>
+            <code>
+              disabled
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-695"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-696"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-697"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-698"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-699"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-700"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-701"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-702"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-703"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch 
+          <small>
+            <code>
+              outline="alt"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-704"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-705"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-706"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-707"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-708"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-709"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-710"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-711"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-712"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch 
+          <small>
+            <code>
+              label
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-713"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-714"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-715"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-716"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-717"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-718"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-719"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-720"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-721"
+          label="true"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch 
+          <small>
+            <code>
+              outline="alt" label
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-722"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-723"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-724"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-725"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-726"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-727"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-728"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          defaultchecked="true"
+          id="switch-id-729"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-730"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          3d Switch 
+          <small>
+            <code>
+              outline="alt" label
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-731"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-732"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-733"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-734"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-735"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-736"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-737"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          defaultchecked="true"
+          id="switch-id-738"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-739"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="3d"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-740"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-741"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-742"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-743"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-744"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-745"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-746"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-747"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-748"
+          outline="true"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              outline variant="pill"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-749"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-750"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-751"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-752"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-753"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-754"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-755"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-756"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-757"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              outline="alt"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-758"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-759"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-760"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-761"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-762"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-763"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-764"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-765"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-766"
+          outline="alt"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              outline="alt" variant="pill"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-767"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-768"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-769"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-770"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-771"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-772"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-773"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-774"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-775"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-776"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-777"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-778"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-779"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-780"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-781"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-782"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-783"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-784"
+          label="true"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label variant="pill"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-785"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-786"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-787"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-788"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-789"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-790"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-791"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-792"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-793"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-794"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-795"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-796"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-797"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-798"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-799"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-800"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-801"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-802"
+          label="true"
+          outline="true"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-803"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-804"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-805"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-806"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-807"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-808"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-809"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-810"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-811"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-812"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-813"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-814"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-815"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-816"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-817"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-818"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-819"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-820"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-821"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-822"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-823"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-824"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-825"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-826"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-827"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="Off"
+          dataon="On"
+          id="switch-id-828"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="Off"
+          dataon="On"
+          disabled="true"
+          id="switch-id-829"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="no"
+          dataon="yes"
+          id="switch-id-830"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-831"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-832"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-833"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-834"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-835"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-836"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-837"
+          label="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-838"
+          label="true"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label variant="pill"
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-839"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-840"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-841"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-842"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-843"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-844"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-845"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-846"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-847"
+          label="true"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-848"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-849"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-850"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-851"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-852"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-853"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-854"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-855"
+          label="true"
+          outline="true"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-856"
+          label="true"
+          outline="true"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-857"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-858"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-859"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-860"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-861"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-862"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-863"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-864"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-865"
+          label="true"
+          outline="true"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-866"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-867"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-868"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-869"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-870"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-871"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-872"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-873"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-874"
+          label="true"
+          outline="alt"
+          value="true"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Switch 
+          <small>
+            <code>
+              label outline
+            </code>
+          </small>
+        </div>
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="primary"
+          dataoff="no"
+          dataon="yes"
+          id="switch-id-875"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="secondary"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-876"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="success"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-877"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="warning"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-878"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="info"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-879"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="danger"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-880"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="light"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-881"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          checked="true"
+          class="mx-1"
+          color="dark"
+          dataoff="✕"
+          dataon="✓"
+          id="switch-id-882"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+         
+        <cswitch-stub
+          class="mx-1"
+          color="primary"
+          dataoff="✕"
+          dataon="✓"
+          disabled="true"
+          id="switch-id-883"
+          label="true"
+          outline="alt"
+          value="true"
+          variant="pill"
+        />
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="12"
+      tag="div"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        nobody="true"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Sizes
+        
+        </div>
+         
+        <bcardbody-stub
+          bodytag="div"
+          class="p-0"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <btable-stub
+            apiurl=""
+            class="table-align-middle mb-0"
+            currentpage="1"
+            emptyfilteredtext="There are no records matching your request"
+            emptytext="There are no records to show"
+            fields="[object Object],[object Object],[object Object]"
+            footvariant=""
+            headvariant=""
+            hover="true"
+            items="[object Object],[object Object],[object Object]"
+            labelsortasc="Click to sort Ascending"
+            labelsortdesc="Click to sort Descending"
+            perpage="0"
+            responsive="sm"
+            sortdirection="asc"
+            striped="true"
+            value=""
+          />
+        </bcardbody-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Table.spec.js.snap b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
new file mode 100644
index 00000000..51be7909
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table.vue renders correctly 1`] = `
+<bcard-stub
+  bodytag="div"
+  footertag="div"
+  header="Table"
+  headertag="div"
+  subtitletag="h6"
+  tag="div"
+  titletag="h4"
+>
+  <btable-stub
+    apiurl=""
+    currentpage="1"
+    emptyfilteredtext="There are no records matching your request"
+    emptytext="There are no records to show"
+    fields=""
+    footvariant=""
+    headvariant=""
+    items=""
+    labelsortasc="Click to sort Ascending"
+    labelsortdesc="Click to sort Descending"
+    perpage="5"
+    responsive="sm"
+    sortdirection="asc"
+    value=""
+  />
+   
+  <nav>
+    <bpagination-stub
+      hide-goto-end-buttons=""
+      next-text="Next"
+      perpage="5"
+      prev-text="Prev"
+      totalrows="0"
+    />
+  </nav>
+</bcard-stub>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
new file mode 100644
index 00000000..228da1e6
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
@@ -0,0 +1,642 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tables.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctable-stub
+        caption=<i class='fa fa-align-justify'></i> Simple Table
+        fields="[object Object],[object Object],[object Object],[object Object]"
+        perpage="5"
+        tabledata="function someData() {
+    /* istanbul ignore next */cov_10ilegof86.f[1]++;
+    cov_10ilegof86.s[7]++;
+
+    return (0, _utils.shuffleArray)([{
+      username: 'Samppa Nori',
+      registered: '2012/01/01',
+      role: 'Member',
+      status: 'Active',
+      _rowVariant: 'success'
+    }, {
+      username: 'Estavan Lykos',
+      registered: '2012/02/01',
+      role: 'Staff',
+      status: 'Banned',
+      _rowVariant: 'danger'
+    }, {
+      username: 'Chetan Mohamed',
+      registered: '2012/02/01',
+      role: 'Admin',
+      status: 'Inactive',
+      _rowVariant: 'info'
+    }, {
+      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'
+    }]);
+  }"
+      />
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctable-stub
+        caption=<i class='fa fa-align-justify'></i> Striped Table
+        fields=""
+        perpage="5"
+        striped="true"
+        tabledata="function someData() {
+    /* istanbul ignore next */cov_10ilegof86.f[1]++;
+    cov_10ilegof86.s[7]++;
+
+    return (0, _utils.shuffleArray)([{
+      username: 'Samppa Nori',
+      registered: '2012/01/01',
+      role: 'Member',
+      status: 'Active',
+      _rowVariant: 'success'
+    }, {
+      username: 'Estavan Lykos',
+      registered: '2012/02/01',
+      role: 'Staff',
+      status: 'Banned',
+      _rowVariant: 'danger'
+    }, {
+      username: 'Chetan Mohamed',
+      registered: '2012/02/01',
+      role: 'Admin',
+      status: 'Inactive',
+      _rowVariant: 'info'
+    }, {
+      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'
+    }]);
+  }"
+      />
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctable-stub
+        caption=<i class='fa fa-align-justify'></i> Condensed Table
+        fields=""
+        perpage="5"
+        small="true"
+        tabledata="function someData() {
+    /* istanbul ignore next */cov_10ilegof86.f[1]++;
+    cov_10ilegof86.s[7]++;
+
+    return (0, _utils.shuffleArray)([{
+      username: 'Samppa Nori',
+      registered: '2012/01/01',
+      role: 'Member',
+      status: 'Active',
+      _rowVariant: 'success'
+    }, {
+      username: 'Estavan Lykos',
+      registered: '2012/02/01',
+      role: 'Staff',
+      status: 'Banned',
+      _rowVariant: 'danger'
+    }, {
+      username: 'Chetan Mohamed',
+      registered: '2012/02/01',
+      role: 'Admin',
+      status: 'Inactive',
+      _rowVariant: 'info'
+    }, {
+      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'
+    }]);
+  }"
+      />
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctable-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Bordered Table
+        fields=""
+        fixed="true"
+        perpage="5"
+        tabledata="function someData() {
+    /* istanbul ignore next */cov_10ilegof86.f[1]++;
+    cov_10ilegof86.s[7]++;
+
+    return (0, _utils.shuffleArray)([{
+      username: 'Samppa Nori',
+      registered: '2012/01/01',
+      role: 'Member',
+      status: 'Active',
+      _rowVariant: 'success'
+    }, {
+      username: 'Estavan Lykos',
+      registered: '2012/02/01',
+      role: 'Staff',
+      status: 'Banned',
+      _rowVariant: 'danger'
+    }, {
+      username: 'Chetan Mohamed',
+      registered: '2012/02/01',
+      role: 'Admin',
+      status: 'Inactive',
+      _rowVariant: 'info'
+    }, {
+      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'
+    }]);
+  }"
+      />
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      sm="12"
+      tag="div"
+    >
+      <ctable-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Combined All Table
+        fields=""
+        fixed="true"
+        hover="true"
+        perpage="10"
+        small="true"
+        striped="true"
+        tabledata="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+      />
+    </bcol-stub>
+  </brow-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      sm="12"
+      tag="div"
+    >
+      <ctable-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Dark Table
+        dark="true"
+        fields=""
+        fixed="true"
+        hover="true"
+        perpage="10"
+        small="true"
+        striped="true"
+        tabledata="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+      />
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
new file mode 100644
index 00000000..b6c5c026
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
@@ -0,0 +1,383 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Tabs
+        
+        </div>
+         
+        <btabs-stub
+          tag="div"
+        >
+          <btab-stub
+            active="true"
+            buttonid=""
+            href="#"
+            tag="div"
+            title="Home"
+          >
+            <br />
+             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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            href="#"
+            tag="div"
+            title="Profile"
+          >
+            <br />
+            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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            disabled="true"
+            href="#"
+            tag="div"
+            title="Disabled"
+          >
+            <br />
+            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.
+          
+          </btab-stub>
+        </btabs-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Tabs with icons
+        
+        </div>
+         
+        <btabs-stub
+          tag="div"
+        >
+          <btab-stub
+            active="true"
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-calculator"
+              />
+            </template>
+             
+            <br />
+             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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-basket-loaded"
+              />
+            </template>
+             
+            <br />
+            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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-pie-chart"
+              />
+            </template>
+             
+            <br />
+            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.
+          
+          </btab-stub>
+        </btabs-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Tabs with icons
+        
+        </div>
+         
+        <btabs-stub
+          tag="div"
+          value="0"
+        >
+          <btab-stub
+            active="true"
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-calculator"
+              />
+               Calculator
+            
+            </template>
+             
+            <br />
+             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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-basket-loaded"
+              />
+               Shopping cart
+            
+            </template>
+             
+            <br />
+            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.
+          
+          </btab-stub>
+           
+          <btab-stub
+            buttonid=""
+            href="#"
+            tag="div"
+            title=""
+          >
+            <template>
+              <i
+                class="icon-pie-chart"
+              />
+               Charts
+            
+            </template>
+             
+            <br />
+            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.
+          
+          </btab-stub>
+        </btabs-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          
+          Tabs vertical
+        
+        </div>
+         
+        <bcard-stub
+          bodytag="div"
+          footertag="div"
+          headertag="div"
+          nobody="true"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <btabs-stub
+            card="true"
+            navwrapperclass="w-40"
+            pills="true"
+            tag="div"
+            value="0"
+            vertical="true"
+          >
+            <btab-stub
+              active="true"
+              buttonid=""
+              href="#"
+              tag="div"
+              title=""
+            >
+              <template>
+                <i
+                  class="icon-calculator"
+                />
+                 Calculator
+            
+              </template>
+              
+            1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          
+            </btab-stub>
+             
+            <btab-stub
+              buttonid=""
+              href="#"
+              tag="div"
+              title=""
+            >
+              <template>
+                <i
+                  class="icon-basket-loaded"
+                />
+                 Shopping cart
+            
+              </template>
+              
+            2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          
+            </btab-stub>
+             
+            <btab-stub
+              buttonid=""
+              href="#"
+              tag="div"
+              title=""
+            >
+              <template>
+                <i
+                  class="icon-pie-chart"
+                />
+                 Charts
+            
+              </template>
+              
+            3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          
+            </btab-stub>
+          </btabs-stub>
+        </bcard-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
new file mode 100644
index 00000000..a7e6ebc9
--- /dev/null
+++ b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
@@ -0,0 +1,451 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltips.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Tooltips 
+        </strong>
+        <small>
+          <code>
+            v-b-tooltip
+          </code>
+           directive
+        </small>
+         
+        <div
+          class="card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://bootstrap-vue.js.org/docs/components/tooltip"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </div>
+       
+      <brow-stub
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              title="I am a tooltip!"
+              type="button"
+            >
+              Hover Me
+            </bbtn-stub>
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <bbtn-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              id="tooltipButton-2"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              Button
+            </bbtn-stub>
+             
+            <btooltip-stub
+              placement="top"
+              show=""
+              target="tooltipButton-2"
+              title=""
+              triggers="hover focus"
+            >
+              
+              I start open
+            
+            </btooltip-stub>
+          </div>
+        </bcol-stub>
+      </brow-stub>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Tooltips 
+        </strong>
+        <small>
+          <code>
+            b-tooltip
+          </code>
+           component
+        </small>
+      </div>
+       
+      <brow-stub
+        tag="div"
+      >
+        <bcol-stub
+          class="py-4 text-center"
+          md="6"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="exButton1"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-success"
+          >
+            Live chat
+          </bbtn-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="py-4 text-center"
+          md="6"
+          tag="div"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="exButton2"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-success"
+          >
+            Html chat
+          </bbtn-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <btooltip-stub
+        placement="top"
+        target="exButton1"
+        title="Online!"
+        triggers="hover focus"
+      />
+       
+      <btooltip-stub
+        placement="bottom"
+        target="exButton2"
+        title=""
+        triggers="hover focus"
+      >
+        
+        Hello 
+        <strong>
+          World!
+        </strong>
+      </btooltip-stub>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Tooltips 
+        </strong>
+        <small>
+          <code>
+            show
+          </code>
+           prop
+        </small>
+      </div>
+       
+      <div
+        class="text-center"
+      >
+        <bbtn-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          id="tooltipButton-1"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="primary"
+        >
+          I have a tooltip
+        </bbtn-stub>
+         
+        <br />
+        <br />
+         
+        <bbtn-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+        >
+          Toggle Tooltip
+        </bbtn-stub>
+         
+        <btooltip-stub
+          placement="top"
+          show="true"
+          target="tooltipButton-1"
+          title=""
+          triggers="hover focus"
+        >
+          
+          Hello 
+          <strong>
+            World!
+          </strong>
+        </btooltip-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Tooltips 
+        </strong>
+        <small>
+          <code>
+            open close
+          </code>
+           events
+        </small>
+      </div>
+       
+      <div
+        class="d-flex flex-column text-md-center"
+      >
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="tooltipButton-showEvent"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            I have a tooltip
+          </bbtn-stub>
+        </div>
+         
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            class="px-1 mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Open
+          </bbtn-stub>
+           
+          <bbtn-stub
+            activeclass="active"
+            class="px-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            Close
+          </bbtn-stub>
+        </div>
+         
+        <btooltip-stub
+          placement="top"
+          target="tooltipButton-showEvent"
+          title=""
+          triggers="hover focus"
+        >
+          
+          Hello 
+          <strong>
+            World!
+          </strong>
+        </btooltip-stub>
+      </div>
+    </bcard-stub>
+     
+    <bcard-stub
+      bodytag="div"
+      footertag="footer"
+      headertag="header"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <div
+        slot="header"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Tooltips 
+        </strong>
+        <small>
+          <code>
+            enable disable
+          </code>
+           events
+        </small>
+      </div>
+       
+      <div
+        class="d-flex flex-column text-md-center"
+      >
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            id="tooltipButton-disable"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            I have a tooltip
+          </bbtn-stub>
+        </div>
+         
+        <div
+          class="p-2"
+        >
+          <bbtn-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            
+            Disable Tooltip by prop
+          
+          </bbtn-stub>
+           
+          <bbtn-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            
+            Disable Tooltip by $ref event
+          
+          </bbtn-stub>
+           
+          <btooltip-stub
+            placement="top"
+            target="tooltipButton-disable"
+            title=""
+            triggers="hover focus"
+          >
+            
+            Hello 
+            <strong>
+              World!
+            </strong>
+          </btooltip-stub>
+        </div>
+      </div>
+    </bcard-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/BrandButtons.spec.js b/tests/unit/views/buttons/BrandButtons.spec.js
similarity index 85%
rename from tests/unit/BrandButtons.spec.js
rename to tests/unit/views/buttons/BrandButtons.spec.js
index b4b8b002..1d0859a0 100644
--- a/tests/unit/BrandButtons.spec.js
+++ b/tests/unit/views/buttons/BrandButtons.spec.js
@@ -21,4 +21,8 @@ describe('BrandButtons.vue', () => {
     const wrapper = mount(BrandButtons)
     expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Brand Button')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(BrandButtons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/ButtonDropdowns.spec.js b/tests/unit/views/buttons/ButtonDropdowns.spec.js
similarity index 85%
rename from tests/unit/ButtonDropdowns.spec.js
rename to tests/unit/views/buttons/ButtonDropdowns.spec.js
index 53b802ce..018cf970 100644
--- a/tests/unit/ButtonDropdowns.spec.js
+++ b/tests/unit/views/buttons/ButtonDropdowns.spec.js
@@ -21,4 +21,8 @@ describe('Dropdowns.vue', () => {
     const wrapper = mount(Dropdowns)
     expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Dropdown')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Dropdowns)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/ButtonGroups.spec.js b/tests/unit/views/buttons/ButtonGroups.spec.js
similarity index 85%
rename from tests/unit/ButtonGroups.spec.js
rename to tests/unit/views/buttons/ButtonGroups.spec.js
index 6f6ad3b1..b2acb1ae 100644
--- a/tests/unit/ButtonGroups.spec.js
+++ b/tests/unit/views/buttons/ButtonGroups.spec.js
@@ -21,4 +21,8 @@ describe('ButtonGroups.vue', () => {
     const wrapper = mount(ButtonGroups)
     expect(wrapper.find('header.card-header').text()).toMatch('Bootstrap button group')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(ButtonGroups)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/StandardButtons.spec.js b/tests/unit/views/buttons/StandardButtons.spec.js
similarity index 89%
rename from tests/unit/StandardButtons.spec.js
rename to tests/unit/views/buttons/StandardButtons.spec.js
index 28fbb612..487f93b7 100644
--- a/tests/unit/StandardButtons.spec.js
+++ b/tests/unit/views/buttons/StandardButtons.spec.js
@@ -30,4 +30,8 @@ describe('StandardButtons.vue', () => {
     expect(wrapper.find('div.card-header > strong').text()).toMatch('Standard buttons')
     expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Toggle pressed state')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(StandardButtons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
new file mode 100644
index 00000000..8efd8b35
--- /dev/null
+++ b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
@@ -0,0 +1,2460 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BrandButtons.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <div
+    class="row"
+  >
+    <div
+      class="col-12"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            <strong>
+              Brand Button
+            </strong>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+           
+          <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>
+           
+          <hr />
+           
+          <h6>
+            Size Small 
+            <small>
+              Add 
+              <code>
+                size="sm"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+           
+          <h6>
+            Size Normal
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+           
+          <h6>
+            Size Large 
+            <small>
+              Add 
+              <code>
+                size="lg"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-12"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            <strong>
+              Brand Button 
+            </strong>
+             
+            <small>
+              Icons only
+            </small>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+           
+          <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>
+           
+          <hr />
+           
+          <h6>
+            Size Small 
+            <small>
+              Add 
+              <code>
+                size="sm"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo icon btn-sm"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+            </button>
+          </p>
+           
+          <h6>
+            Size Normal
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook icon"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter icon"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin icon"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr icon"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr icon"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing icon"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github icon"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 icon"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid icon"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow icon"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 icon"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube icon"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble icon"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus icon"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram icon"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest icon"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk icon"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo icon"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance icon"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox icon"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit icon"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify icon"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine icon"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare icon"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo icon"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+            </button>
+          </p>
+           
+          <h6>
+            Size Large 
+            <small>
+              Add 
+              <code>
+                size="lg"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-facebook"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-twitter"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-linkedin"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-flickr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-tumblr"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-xing"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-github"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-html5"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-openid"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-stack-overflow"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-css3"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-youtube"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-dribbble"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-google-plus"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-instagram"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-pinterest"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vk"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-yahoo"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-behance"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-dropbox"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-reddit"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-spotify"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vine"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-foursquare"
+              />
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo icon btn-lg"
+              type="button"
+            >
+              <i
+                class="fa fa-vimeo"
+              />
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="col-12"
+    >
+      <div
+        class="card"
+      >
+        <div
+          class="card-header"
+        >
+          <div>
+            <strong>
+              Brand Button 
+            </strong>
+             
+            <small>
+              Text only
+            </small>
+          </div>
+        </div>
+        <div
+          class="card-body"
+        >
+           
+          <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>
+           
+          <hr />
+           
+          <h6>
+            Size Small 
+            <small>
+              Add 
+              <code>
+                size="sm"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook text btn-sm"
+              type="button"
+            >
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter text btn-sm"
+              type="button"
+            >
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin text btn-sm"
+              type="button"
+            >
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr text btn-sm"
+              type="button"
+            >
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr text btn-sm"
+              type="button"
+            >
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing text btn-sm"
+              type="button"
+            >
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github text btn-sm"
+              type="button"
+            >
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 text btn-sm"
+              type="button"
+            >
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid text btn-sm"
+              type="button"
+            >
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow text btn-sm"
+              type="button"
+            >
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 text btn-sm"
+              type="button"
+            >
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube text btn-sm"
+              type="button"
+            >
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble text btn-sm"
+              type="button"
+            >
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus text btn-sm"
+              type="button"
+            >
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram text btn-sm"
+              type="button"
+            >
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest text btn-sm"
+              type="button"
+            >
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk text btn-sm"
+              type="button"
+            >
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo text btn-sm"
+              type="button"
+            >
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance text btn-sm"
+              type="button"
+            >
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox text btn-sm"
+              type="button"
+            >
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit text btn-sm"
+              type="button"
+            >
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify text btn-sm"
+              type="button"
+            >
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine text btn-sm"
+              type="button"
+            >
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare text btn-sm"
+              type="button"
+            >
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo text btn-sm"
+              type="button"
+            >
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+           
+          <h6>
+            Size Normal
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook text"
+              type="button"
+            >
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter text"
+              type="button"
+            >
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin text"
+              type="button"
+            >
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr text"
+              type="button"
+            >
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr text"
+              type="button"
+            >
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing text"
+              type="button"
+            >
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github text"
+              type="button"
+            >
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 text"
+              type="button"
+            >
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid text"
+              type="button"
+            >
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow text"
+              type="button"
+            >
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 text"
+              type="button"
+            >
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube text"
+              type="button"
+            >
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble text"
+              type="button"
+            >
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus text"
+              type="button"
+            >
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram text"
+              type="button"
+            >
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest text"
+              type="button"
+            >
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk text"
+              type="button"
+            >
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo text"
+              type="button"
+            >
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance text"
+              type="button"
+            >
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox text"
+              type="button"
+            >
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit text"
+              type="button"
+            >
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify text"
+              type="button"
+            >
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine text"
+              type="button"
+            >
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare text"
+              type="button"
+            >
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo text"
+              type="button"
+            >
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+           
+          <h6>
+            Size Large 
+            <small>
+              Add 
+              <code>
+                size="lg"
+              </code>
+            </small>
+          </h6>
+           
+          <p>
+            <button
+              class="btn mr-1 btn-brand btn-facebook text btn-lg"
+              type="button"
+            >
+              <span>
+                Facebook
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-twitter text btn-lg"
+              type="button"
+            >
+              <span>
+                Twitter
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-linkedin text btn-lg"
+              type="button"
+            >
+              <span>
+                LinkedIn
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-flickr text btn-lg"
+              type="button"
+            >
+              <span>
+                Flickr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-tumblr text btn-lg"
+              type="button"
+            >
+              <span>
+                Tumblr
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-xing text btn-lg"
+              type="button"
+            >
+              <span>
+                Xing
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-github text btn-lg"
+              type="button"
+            >
+              <span>
+                Github
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-html5 text btn-lg"
+              type="button"
+            >
+              <span>
+                HTML5
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-openid text btn-lg"
+              type="button"
+            >
+              <span>
+                OpenID
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-stack-overflow text btn-lg"
+              type="button"
+            >
+              <span>
+                StackOverflow
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-css3 text btn-lg"
+              type="button"
+            >
+              <span>
+                CSS3
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-youtube text btn-lg"
+              type="button"
+            >
+              <span>
+                YouTube
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dribbble text btn-lg"
+              type="button"
+            >
+              <span>
+                Dribbble
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-google-plus text btn-lg"
+              type="button"
+            >
+              <span>
+                Google+
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-instagram text btn-lg"
+              type="button"
+            >
+              <span>
+                Instagram
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-pinterest text btn-lg"
+              type="button"
+            >
+              <span>
+                Pinterest
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vk text btn-lg"
+              type="button"
+            >
+              <span>
+                VK
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-yahoo text btn-lg"
+              type="button"
+            >
+              <span>
+                Yahoo
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-behance text btn-lg"
+              type="button"
+            >
+              <span>
+                Behance
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-dropbox text btn-lg"
+              type="button"
+            >
+              <span>
+                Dropbox
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-reddit text btn-lg"
+              type="button"
+            >
+              <span>
+                Reddit
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-spotify text btn-lg"
+              type="button"
+            >
+              <span>
+                Spotify
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vine text btn-lg"
+              type="button"
+            >
+              <span>
+                Vine
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-foursquare text btn-lg"
+              type="button"
+            >
+              <span>
+                Forsquare
+              </span>
+            </button>
+             
+            <button
+              class="btn mr-1 btn-brand btn-vimeo text btn-lg"
+              type="button"
+            >
+              <span>
+                Vimeo
+              </span>
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
new file mode 100644
index 00000000..ad7a2c57
--- /dev/null
+++ b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
@@ -0,0 +1,1486 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdowns.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Dropdown
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/dropdown"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown1"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle"
+                  id="ddown1__BV_toggle_"
+                  type="button"
+                >
+                  Dropdown Button
+                </button>
+                <div
+                  aria-labelledby="ddown1__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    First Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Second Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Third Action
+                  </a>
+                   
+                  <div
+                    class="dropdown-divider"
+                    role="separator"
+                  />
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here...
+                  </a>
+                   
+                  <a
+                    aria-disabled="true"
+                    class="dropdown-item disabled"
+                    href="#"
+                    role="menuitem"
+                    tabindex="-1"
+                    target="_self"
+                  >
+                    Disabled action
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-buttons"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle"
+                  id="ddown-buttons__BV_toggle_"
+                  type="button"
+                >
+                  Dropdown using buttons as menu items
+                </button>
+                <div
+                  aria-labelledby="ddown-buttons__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    I'm a button
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    I'm also a button
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    disabled="disabled"
+                    role="menuitem"
+                    type="button"
+                  >
+                    I'm a button, but disabled!
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    I don't look like a button, but I am!
+                  </button>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-divider"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle"
+                  id="ddown-divider__BV_toggle_"
+                  type="button"
+                >
+                  Dropdown with divider
+                </button>
+                <div
+                  aria-labelledby="ddown-divider__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    First item
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Second item
+                  </button>
+                   
+                  <div
+                    class="dropdown-divider"
+                    role="separator"
+                  />
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Separated Item
+                  </button>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-header"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle"
+                  id="ddown-header__BV_toggle_"
+                  type="button"
+                >
+                  Dropdown with header
+                </button>
+                <div
+                  aria-labelledby="ddown-header__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <h6
+                    class="dropdown-header"
+                  >
+                    Dropdown header
+                  </h6>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    First item
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Second Item
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Dropdown 
+              </strong>
+              <small>
+                positioning
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-left"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-primary dropdown-toggle"
+                  id="ddown-left__BV_toggle_"
+                  type="button"
+                >
+                  Left align
+                </button>
+                <div
+                  aria-labelledby="ddown-left__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+               
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-right"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-primary dropdown-toggle"
+                  id="ddown-right__BV_toggle_"
+                  type="button"
+                >
+                  Right align
+                </button>
+                <div
+                  aria-labelledby="ddown-right__BV_toggle_"
+                  class="dropdown-menu dropdown-menu-right"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown dropup"
+                id="ddown-dropup"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-info dropdown-toggle"
+                  id="ddown-dropup__BV_toggle_"
+                  type="button"
+                >
+                  Drop-Up
+                </button>
+                <div
+                  aria-labelledby="ddown-dropup__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-offset"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle"
+                  id="ddown-offset__BV_toggle_"
+                  type="button"
+                >
+                  Offset Dropdown
+                </button>
+                <div
+                  aria-labelledby="ddown-offset__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-split"
+              >
+                <button
+                  class="btn btn-secondary"
+                  id="ddown-split__BV_button_"
+                  type="button"
+                >
+                  Split Dropdown
+                </button>
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                  id="ddown-split__BV_toggle_"
+                  type="button"
+                >
+                  <span
+                    class="sr-only"
+                  >
+                    Toggle Dropdown
+                  </span>
+                </button>
+                <div
+                  aria-labelledby="ddown-split__BV_button_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here...
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Dropdown 
+              </strong>
+              <small>
+                hidden caret
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="btn-group b-dropdown dropdown"
+                id="__BVID__89"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-link btn-lg"
+                  id="__BVID__89__BV_toggle_"
+                  type="button"
+                >
+                  
+                🔍
+                  <span
+                    class="sr-only"
+                  >
+                    Search
+                  </span>
+                </button>
+                <div
+                  aria-labelledby="__BVID__89__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here...
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Dropdown 
+              </strong>
+              <small>
+                sizing
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-lg"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary btn-lg dropdown-toggle"
+                  id="ddown-lg__BV_toggle_"
+                  type="button"
+                >
+                  Large
+                </button>
+                <div
+                  aria-labelledby="ddown-lg__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Another action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Something else here
+                  </button>
+                </div>
+              </div>
+               
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-lg-split"
+              >
+                <button
+                  class="btn btn-secondary btn-lg"
+                  id="ddown-lg-split__BV_button_"
+                  type="button"
+                >
+                  Large Split
+                </button>
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary btn-lg dropdown-toggle dropdown-toggle-split"
+                  id="ddown-lg-split__BV_toggle_"
+                  type="button"
+                >
+                  <span
+                    class="sr-only"
+                  >
+                    Toggle Dropdown
+                  </span>
+                </button>
+                <div
+                  aria-labelledby="ddown-lg-split__BV_button_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Another action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Something else here...
+                  </button>
+                </div>
+              </div>
+               
+              <br />
+               
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-sm"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary btn-sm dropdown-toggle"
+                  id="ddown-sm__BV_toggle_"
+                  type="button"
+                >
+                  Small
+                </button>
+                <div
+                  aria-labelledby="ddown-sm__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Another action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Something else here...
+                  </button>
+                </div>
+              </div>
+               
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-sm-split"
+              >
+                <button
+                  class="btn btn-secondary btn-sm"
+                  id="ddown-sm-split__BV_button_"
+                  type="button"
+                >
+                  Small Split
+                </button>
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split"
+                  id="ddown-sm-split__BV_toggle_"
+                  type="button"
+                >
+                  <span
+                    class="sr-only"
+                  >
+                    Toggle Dropdown
+                  </span>
+                </button>
+                <div
+                  aria-labelledby="ddown-sm-split__BV_button_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Another action
+                  </button>
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Something else here...
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Dropdown 
+              </strong>
+              <small>
+                headers and accessibility
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="m-2 btn-group b-dropdown dropdown"
+                id="ddown-aria"
+              >
+                <!---->
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-primary dropdown-toggle"
+                  id="ddown-aria__BV_toggle_"
+                  type="button"
+                >
+                  Dropdown ARIA
+                </button>
+                <div
+                  aria-labelledby="ddown-aria__BV_toggle_"
+                  class="dropdown-menu"
+                  role="menu"
+                >
+                  <div
+                    aria-lableledby="header1"
+                    role="group"
+                  >
+                    <h6
+                      class="dropdown-header"
+                      id="header1"
+                    >
+                      Groups
+                    </h6>
+                     
+                    <button
+                      aria-describedby="header1"
+                      class="dropdown-item"
+                      role="menuitem"
+                      type="button"
+                    >
+                      Add
+                    </button>
+                     
+                    <button
+                      aria-describedby="header1"
+                      class="dropdown-item"
+                      role="menuitem"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                   
+                  <div
+                    aria-lableledby="header2"
+                    role="group"
+                  >
+                    <h6
+                      class="dropdown-header"
+                      id="header2"
+                    >
+                      Users
+                    </h6>
+                     
+                    <button
+                      aria-describedby="header2"
+                      class="dropdown-item"
+                      role="menuitem"
+                      type="button"
+                    >
+                      Add
+                    </button>
+                     
+                    <button
+                      aria-describedby="header2"
+                      class="dropdown-item"
+                      role="menuitem"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                   
+                  <div
+                    class="dropdown-divider"
+                    role="separator"
+                  />
+                   
+                  <button
+                    class="dropdown-item"
+                    role="menuitem"
+                    type="button"
+                  >
+                    Something 
+                    <strong>
+                      not
+                    </strong>
+                     associated with user
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Dropdown 
+              </strong>
+              <small>
+                <code>
+                  variant
+                </code>
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_primary"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-primary btn-sm dropdown-toggle"
+                id="ddown_primary__BV_toggle_"
+                type="button"
+              >
+                Primary
+              </button>
+              <div
+                aria-labelledby="ddown_primary__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_secondary"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-secondary btn-sm dropdown-toggle"
+                id="ddown_secondary__BV_toggle_"
+                type="button"
+              >
+                Secondary
+              </button>
+              <div
+                aria-labelledby="ddown_secondary__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_success"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-success btn-sm dropdown-toggle"
+                id="ddown_success__BV_toggle_"
+                type="button"
+              >
+                Success
+              </button>
+              <div
+                aria-labelledby="ddown_success__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_warning"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-warning btn-sm dropdown-toggle"
+                id="ddown_warning__BV_toggle_"
+                type="button"
+              >
+                Warning
+              </button>
+              <div
+                aria-labelledby="ddown_warning__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_danger"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-danger btn-sm dropdown-toggle"
+                id="ddown_danger__BV_toggle_"
+                type="button"
+              >
+                Danger
+              </button>
+              <div
+                aria-labelledby="ddown_danger__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_info"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-info btn-sm dropdown-toggle"
+                id="ddown_info__BV_toggle_"
+                type="button"
+              >
+                Info
+              </button>
+              <div
+                aria-labelledby="ddown_info__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_light"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-light btn-sm dropdown-toggle"
+                id="ddown_light__BV_toggle_"
+                type="button"
+              >
+                Light
+              </button>
+              <div
+                aria-labelledby="ddown_light__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_dark"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-dark btn-sm dropdown-toggle"
+                id="ddown_dark__BV_toggle_"
+                type="button"
+              >
+                Dark
+              </button>
+              <div
+                aria-labelledby="ddown_dark__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+             
+            <div
+              class="m-0 btn-group b-dropdown dropdown"
+              id="ddown_link"
+            >
+              <!---->
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-link btn-sm dropdown-toggle"
+                id="ddown_link__BV_toggle_"
+                type="button"
+              >
+                Link
+              </button>
+              <div
+                aria-labelledby="ddown_link__BV_toggle_"
+                class="dropdown-menu"
+                role="menu"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  First Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Second Action
+                </a>
+                 
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  role="menuitem"
+                  target="_self"
+                >
+                  Third Action
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
new file mode 100644
index 00000000..21ca2887
--- /dev/null
+++ b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
@@ -0,0 +1,836 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroups.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap button group
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/button-group"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="btn-group"
+                role="group"
+              >
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  One
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Two
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Three
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Four
+                </button>
+                 
+                <button
+                  class="btn d-sm-down-none btn-secondary"
+                  type="button"
+                >
+                  Five
+                </button>
+              </div>
+               
+              <br />
+              <br />
+               
+              <div
+                class="btn-group"
+                role="group"
+              >
+                <button
+                  class="btn d-sm-down-none btn-success"
+                  type="button"
+                >
+                  Success
+                </button>
+                 
+                <button
+                  class="btn btn-info"
+                  type="button"
+                >
+                  Info
+                </button>
+                 
+                <button
+                  class="btn btn-warning"
+                  type="button"
+                >
+                  Warn
+                </button>
+                 
+                <button
+                  class="btn d-sm-down-none btn-primary"
+                  type="button"
+                >
+                  Primary
+                </button>
+                 
+                <button
+                  class="btn btn-danger"
+                  type="button"
+                >
+                  Danger
+                </button>
+                 
+                <button
+                  class="btn btn-link"
+                  type="button"
+                >
+                  Link
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Button group 
+              </strong>
+              sizing
+          
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="btn-group"
+                role="group"
+              >
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Left
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Middle
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Right
+                </button>
+              </div>
+               
+              <br />
+              <br />
+               
+              <div
+                class="btn-group btn-group-sm"
+                role="group"
+              >
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Left
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Middle
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Right
+                </button>
+              </div>
+               
+              <br />
+              <br />
+               
+              <div
+                class="btn-group btn-group-lg"
+                role="group"
+              >
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Left
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Middle
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Right
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Button group 
+              </strong>
+              dropdown support
+          
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="btn-group"
+                role="group"
+              >
+                <button
+                  class="btn d-sm-down-none btn-secondary"
+                  type="button"
+                >
+                  Button 1
+                </button>
+                 
+                <button
+                  class="btn d-sm-down-none btn-secondary"
+                  type="button"
+                >
+                  Button 2
+                </button>
+                 
+                <div
+                  class="btn-group b-dropdown dropdown"
+                  id="__BVID__32"
+                >
+                  <!---->
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    class="btn btn-success dropdown-toggle"
+                    id="__BVID__32__BV_toggle_"
+                    type="button"
+                  >
+                    Menu
+                  </button>
+                  <div
+                    aria-labelledby="__BVID__32__BV_toggle_"
+                    class="dropdown-menu dropdown-menu-right"
+                    role="menu"
+                  >
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 1
+                    </a>
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 2
+                    </a>
+                     
+                    <div
+                      class="dropdown-divider"
+                      role="separator"
+                    />
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 3
+                    </a>
+                  </div>
+                </div>
+                 
+                <button
+                  class="btn d-sm-down-none btn-secondary"
+                  type="button"
+                >
+                  Button 3
+                </button>
+                 
+                <div
+                  class="btn-group b-dropdown dropdown"
+                  id="__BVID__33"
+                >
+                  <button
+                    class="btn btn-info"
+                    id="__BVID__33__BV_button_"
+                    type="button"
+                  >
+                    Split Menu
+                  </button>
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    class="btn btn-info dropdown-toggle dropdown-toggle-split"
+                    id="__BVID__33__BV_toggle_"
+                    type="button"
+                  >
+                    <span
+                      class="sr-only"
+                    >
+                      Toggle Dropdown
+                    </span>
+                  </button>
+                  <div
+                    aria-labelledby="__BVID__33__BV_button_"
+                    class="dropdown-menu dropdown-menu-right"
+                    role="menu"
+                  >
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 1
+                    </a>
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 2
+                    </a>
+                     
+                    <div
+                      class="dropdown-divider"
+                      role="separator"
+                    />
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 3
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Button group 
+              </strong>
+              vertical variation
+          
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                class="btn-group-vertical"
+                role="group"
+              >
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Top
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Middle
+                </button>
+                 
+                <button
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  Bottom
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               
+              <strong>
+                Button toolbar
+              </strong>
+               
+              <small>
+                with button groups
+              </small>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/button-toolbar"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                aria-label="Toolbar with button groups"
+                class="btn-toolbar"
+                role="toolbar"
+                tabindex="0"
+              >
+                <div
+                  class="mx-1 btn-group"
+                  role="group"
+                >
+                  <button
+                    class="btn d-sm-down-none btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    «
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    ‹
+                  </button>
+                </div>
+                 
+                <div
+                  class="mx-1 btn-group"
+                  role="group"
+                >
+                  <button
+                    class="btn d-sm-down-none btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    Undo
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    Redo
+                  </button>
+                </div>
+                 
+                <div
+                  class="mx-1 btn-group"
+                  role="group"
+                >
+                  <button
+                    class="btn btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    ›
+                  </button>
+                   
+                  <button
+                    class="btn d-sm-down-none btn-secondary"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    »
+                  </button>
+                </div>
+              </div>
+            </div>
+             
+            <hr
+              class="d-sm-down-none"
+            />
+             
+            <div>
+              <div
+                aria-label="Toolbar with button groups and input groups"
+                class="d-sm-down-none btn-toolbar"
+                role="toolbar"
+              >
+                <div
+                  class="mx-1 btn-group btn-group-sm"
+                  role="group"
+                >
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    New
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                </div>
+                 
+                <div
+                  class="input-group w-25 mx-1 input-group-sm"
+                  role="group"
+                >
+                  <div
+                    class="input-group-prepend"
+                  >
+                    <div
+                      class="input-group-text"
+                    >
+                      $
+                    </div>
+                  </div>
+                   
+                  <input
+                    class="text-right form-control"
+                    id="__BVID__36"
+                    type="text"
+                    value="100"
+                  />
+                   
+                  <div
+                    class="input-group-append"
+                  >
+                    <div
+                      class="input-group-text"
+                    >
+                      .00
+                    </div>
+                  </div>
+                </div>
+                 
+                <div
+                  class="input-group w-25 mx-1 input-group-sm"
+                  role="group"
+                >
+                  <div
+                    class="input-group-prepend"
+                  >
+                    <div
+                      class="input-group-text"
+                    >
+                      Size
+                    </div>
+                  </div>
+                   
+                  <select
+                    class="form-control custom-select"
+                    id="__BVID__37"
+                  >
+                    <option
+                      value="Large"
+                    >
+                      Large
+                    </option>
+                    <option
+                      value="Medium"
+                    >
+                      Medium
+                    </option>
+                    <option
+                      value="Small"
+                    >
+                      Small
+                    </option>
+                  </select>
+                </div>
+                 
+                <div
+                  class="mx-1 btn-group btn-group-sm"
+                  role="group"
+                >
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Save
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+             
+            <hr />
+             
+            <div>
+              <div
+                aria-label="Toolbar with button groups and dropdown menu"
+                class="btn-toolbar"
+                role="toolbar"
+              >
+                <div
+                  class="mx-1 d-sm-down-none btn-group"
+                  role="group"
+                >
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    New
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Undo
+                  </button>
+                </div>
+                 
+                <div
+                  class="mx-1 btn-group b-dropdown dropdown"
+                  id="__BVID__39"
+                >
+                  <!---->
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    class="btn btn-secondary dropdown-toggle"
+                    id="__BVID__39__BV_toggle_"
+                    type="button"
+                  >
+                    menu
+                  </button>
+                  <div
+                    aria-labelledby="__BVID__39__BV_toggle_"
+                    class="dropdown-menu dropdown-menu-right"
+                    role="menu"
+                  >
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 1
+                    </a>
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 2
+                    </a>
+                     
+                    <a
+                      class="dropdown-item"
+                      href="#"
+                      role="menuitem"
+                      target="_self"
+                    >
+                      Item 3
+                    </a>
+                  </div>
+                </div>
+                 
+                <div
+                  class="mx-1 btn-group"
+                  role="group"
+                >
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Save
+                  </button>
+                   
+                  <button
+                    class="btn btn-secondary"
+                    type="button"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
new file mode 100644
index 00000000..3e3bd67e
--- /dev/null
+++ b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
@@ -0,0 +1,4397 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StandardButtons.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Standard buttons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Active State
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Disabled
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Outline Buttons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <p>
+        
+        Use 
+        <code>
+          variant="outline-*"
+        </code>
+         prop
+      
+      </p>
+       
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Active State
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Disabled
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Ghost Buttons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <p>
+        
+        Use
+        
+        <code>
+          .btn-ghost-*
+        </code>
+         class for ghost buttons.
+      
+      </p>
+       
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Active State
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Disabled
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        />
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Square Buttons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <p>
+        
+        Use
+        
+        <code>
+          .btn-square
+        </code>
+         class for square buttons.
+      
+      </p>
+       
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Active State
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Disabled
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-square"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Pill Buttons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <p>
+        
+        Use
+        
+        <code>
+          .btn-pill
+        </code>
+         class for pill buttons.
+      
+      </p>
+       
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Active State
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            aria-pressed="true"
+            block="true"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            pressed="true"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="12"
+          tag="div"
+          xl="true"
+        >
+          
+          Disabled
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Primary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Secondary
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Success
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Warning
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Danger
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Info
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="light"
+          >
+            Light
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="dark"
+          >
+            Dark
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="6"
+          md="2"
+          sm="4"
+          tag="div"
+          xl="true"
+        >
+          <bbutton-stub
+            activeclass="active"
+            block="true"
+            class="btn-pill"
+            disabled="true"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="link"
+          >
+            Link
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        Sizes
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <p>
+        Fancy larger or smaller buttons? Add 
+        <code>
+          size="lg"
+        </code>
+         or 
+        <code>
+          size="sm"
+        </code>
+         for additional sizes.
+      </p>
+       
+      <brow-stub
+        class="align-items-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="2"
+          tag="div"
+          xl="true"
+        >
+          
+          Small
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Standard Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Outline Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Ghost Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Square Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="sm"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Pill Button
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="2"
+          tag="div"
+          xl="true"
+        >
+          
+          Normal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Standard Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Outline Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Ghost Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Square Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Pill Button
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+       
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-3 mb-xl-0"
+          cols="2"
+          tag="div"
+          xl="true"
+        >
+          
+          Large
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="lg"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Standard Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="lg"
+            target="_self"
+            type="button"
+            variant="outline-secondary"
+          >
+            Outline Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="lg"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            Ghost Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="lg"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Square Button
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-3 mb-xl-0 text-center"
+          cols="2"
+          tag="div"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            size="lg"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Pill Button
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <bcardheader-stub
+      headertag="div"
+    >
+      <strong>
+        With Icons
+      </strong>
+    </bcardheader-stub>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="align-items-center mt-3"
+        tag="div"
+      >
+        <bcol-stub
+          class="text-center mt-3"
+          sm="true"
+          tag="div"
+          xs="12"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            <i
+              class="fa fa-lightbulb-o"
+            />
+             Standard Button
+          
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="text-center mt-3"
+          sm="true"
+          tag="div"
+          xs="12"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            outline=""
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            <i
+              class="fa fa-lightbulb-o"
+            />
+             Outline Button
+          
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="text-center mt-3"
+          sm="true"
+          tag="div"
+          xs="12"
+        >
+          <bbutton-stub
+            activeclass="active"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="ghost-success"
+          >
+            <i
+              class="fa fa-lightbulb-o"
+            />
+             Ghost Button
+          
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="text-center mt-3"
+          sm="true"
+          tag="div"
+          xs="12"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-square"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            <i
+              class="fa fa-lightbulb-o"
+            />
+             Square Button
+          
+          </bbutton-stub>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="text-center mt-3"
+          sm="true"
+          tag="div"
+          xs="12"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="btn-pill"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            <i
+              class="fa fa-lightbulb-o"
+            />
+             Pill Button
+          
+          </bbutton-stub>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      <strong>
+        Toggle pressed state
+      </strong>
+    </div>
+     
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-primary"
+        >
+          Primary Off
+        </bbutton-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-secondary"
+        >
+          Secondary Off
+        </bbutton-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-success"
+        >
+          Success Off
+        </bbutton-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-info"
+        >
+          Info Off
+        </bbutton-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-warning"
+        >
+          Warning Off
+        </bbutton-stub>
+      </bcol-stub>
+       
+      <bcol-stub
+        class="text-center mt-3"
+        sm="true"
+        tag="div"
+        xs="12"
+      >
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="outline-danger"
+        >
+          Danger Off
+        </bbutton-stub>
+      </bcol-stub>
+    </brow-stub>
+  </bcard-stub>
+   
+  <brow-stub
+    tag="div"
+  >
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Block Level b-buttons
+          </strong>
+           
+          <small>
+            Add this 
+            <code>
+              block
+            </code>
+          </small>
+        </div>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="primary"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="success"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="info"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="warning"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="danger"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="link"
+        >
+          Block level button
+        </bbutton-stub>
+      </bcard-stub>
+    </bcol-stub>
+     
+    <bcol-stub
+      md="6"
+      tag="div"
+      xs="12"
+    >
+      <bcard-stub
+        bodytag="div"
+        footertag="div"
+        headertag="div"
+        subtitletag="h6"
+        tag="div"
+        titletag="h4"
+      >
+        <div
+          slot="header"
+        >
+          <strong>
+            Block Level b-buttons
+          </strong>
+           
+          <small>
+            Add this 
+            <code>
+              block
+            </code>
+          </small>
+        </div>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-secondary"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-primary"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-success"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-info"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-warning"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="outline-danger"
+        >
+          Block level button
+        </bbutton-stub>
+         
+        <bbutton-stub
+          activeclass="active"
+          block="true"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          size="lg"
+          target="_self"
+          type="button"
+          variant="ghost-info"
+        >
+          Block level button
+        </bbutton-stub>
+      </bcard-stub>
+    </bcol-stub>
+  </brow-stub>
+</div>
+`;
diff --git a/tests/unit/CoreUIIcons.spec.js b/tests/unit/views/icons/CoreUIIcons.spec.js
similarity index 85%
rename from tests/unit/CoreUIIcons.spec.js
rename to tests/unit/views/icons/CoreUIIcons.spec.js
index 42a8f747..ee72ff8b 100644
--- a/tests/unit/CoreUIIcons.spec.js
+++ b/tests/unit/views/icons/CoreUIIcons.spec.js
@@ -21,4 +21,8 @@ describe('CoreUIIcons.vue', () => {
     const wrapper = mount(CoreUIIcons)
     expect(wrapper.find('div.card-header').text()).toMatch('CoreUI Icons New')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(CoreUIIcons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Flags.spec.js b/tests/unit/views/icons/Flags.spec.js
similarity index 84%
rename from tests/unit/Flags.spec.js
rename to tests/unit/views/icons/Flags.spec.js
index c50042dd..d9718b08 100644
--- a/tests/unit/Flags.spec.js
+++ b/tests/unit/views/icons/Flags.spec.js
@@ -21,4 +21,8 @@ describe('Flags.vue', () => {
     const wrapper = mount(Flags)
     expect(wrapper.find('div.card-header').text()).toMatch('Flags')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Flags)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/FontAwesome.spec.js b/tests/unit/views/icons/FontAwesome.spec.js
similarity index 84%
rename from tests/unit/FontAwesome.spec.js
rename to tests/unit/views/icons/FontAwesome.spec.js
index 35db6839..10a6a78f 100644
--- a/tests/unit/FontAwesome.spec.js
+++ b/tests/unit/views/icons/FontAwesome.spec.js
@@ -21,4 +21,8 @@ describe('FontAwesome.vue', () => {
     const wrapper = mount(FontAwesome)
     expect(wrapper.find('div.card-header').text()).toMatch('50 New Icons in 4.7')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(FontAwesome)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/SimpleLineIcons.spec.js b/tests/unit/views/icons/SimpleLineIcons.spec.js
similarity index 85%
rename from tests/unit/SimpleLineIcons.spec.js
rename to tests/unit/views/icons/SimpleLineIcons.spec.js
index 5f6b7ad9..3fb78876 100644
--- a/tests/unit/SimpleLineIcons.spec.js
+++ b/tests/unit/views/icons/SimpleLineIcons.spec.js
@@ -21,4 +21,8 @@ describe('SimpleLineIcons.vue', () => {
     const wrapper = mount(SimpleLineIcons)
     expect(wrapper.find('div.card-header').text()).toMatch('Simple Line Icons')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(SimpleLineIcons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
new file mode 100644
index 00000000..47216295
--- /dev/null
+++ b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
@@ -0,0 +1,1250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoreUIIcons.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      <i
+        class="fa fa-picture-o"
+      />
+      CoreUI Icons 
+      <span
+        class="badge badge-info"
+      >
+        New
+      </span>
+       
+      <div
+        class="card-header-actions"
+      >
+        <a
+          class="card-header-action"
+          href="https://github.com/coreui/coreui-icons"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <small
+            class="text-muted"
+          >
+            Github
+          </small>
+        </a>
+      </div>
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <div
+        class="row text-center"
+      >
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-account-logout icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            account-logout
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-action-redo icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            action-redo
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-action-undo icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            action-undo
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-align-center icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            align-center
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-align-left icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            align-left
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-align-right icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            align-right
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-arrow-bottom icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            arrow-bottom
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-arrow-left icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            arrow-left
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-arrow-right icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            arrow-right
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-arrow-top icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            arrow-top
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-ban icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            ban
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-basket-loaded icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            basket-loaded
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-bell icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            bell
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-bold icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            bold
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-bookmark icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            bookmark
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-briefcase icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            briefcase
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-british-pound icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            british-pound
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-brush icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            brush
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-calculator icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            calculator
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-calendar icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            calendar
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cart icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cart
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-chart icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            chart
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-check icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            check
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-chevron-bottom icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            chevron-bottom
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-chevron-left icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            chevron-left
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-chevron-right icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            chevron-right
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-chevron-top icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            chevron-top
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-circle-check icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            circle-check
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-circle-x icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            circle-x
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cloud icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cloud
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cloud-download icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cloud-download
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cloud-upload icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cloud-upload
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-code icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            code
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cog icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cog
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-comment-square icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            comment-square
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-credit-card icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            credit-card
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-cursor icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            cursor
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-dashboard icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            dashboard
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-delete icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            delete
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-dollar icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            dollar
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-drop icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            drop
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-envelope-closed icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            envelope-closed
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-envelope-letter icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            envelope-letter
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-envelope-open icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            envelope-open
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-euro icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            euro
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-file icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            file
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-globe icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            globe
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-graph icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            graph
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-home icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            home
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-inbox icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            inbox
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-info icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            info
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-italic icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            italic
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-justify-center icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            justify-center
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-justify-left icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            justify-left
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-justify-right icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            justify-right
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-laptop icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            laptop
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-layers icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            layers
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-lightbulb icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            lightbulb
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-list icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            list
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-location-pin icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            location-pin
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-lock-locked icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            lock-locked
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-lock-unlocked icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            lock-unlocked
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-magnifying-glass icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            magnifying-glass
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-map icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            map
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-monitor icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            monitor
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-moon icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            moon
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-note icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            note
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-options icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            options
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-paperclip icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            paperclip
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-pencil icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            pencil
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-people icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            people
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-phone icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            phone
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-pie-chart icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            pie-chart
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-print icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            print
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-puzzle icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            puzzle
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-rss icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            rss
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-screen-desktop icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            screen-desktop
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-screen-smartphone icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            screen-smartphone
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-settings icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            settings
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-share icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            share
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-shield icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            shield
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-sort-ascending icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            sort-ascending
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-sort-descending icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            sort-descending
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-speech icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            speech
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-speedometer icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            speedometer
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-star icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            star
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-sun icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            sun
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-tablet icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            tablet
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-tags icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            tags
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-task icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            task
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-thumb-down icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            thumb-down
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-thumb-up icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            thumb-up
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-trash icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            trash
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-underline icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            underline
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-user icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            user
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-user-female icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            user-female
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-user-follow icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            user-follow
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-user-unfollow icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            user-unfollow
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-wrench icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            wrench
+          </div>
+        </div>
+         
+        <div
+          class="col-sm-4 col-md-3 col-xl-2 col-6"
+        >
+          <i
+            class="cui-yen icons font-2xl d-block mt-4"
+          />
+           
+          <div>
+            yen
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
new file mode 100644
index 00000000..ef34388f
--- /dev/null
+++ b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
@@ -0,0 +1,4290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flags.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="new47"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      <i
+        class="fa fa-font-awesome"
+      />
+       Flags
+    
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          class="mb-5"
+          cols="12"
+          tag="div"
+        >
+          
+          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.
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ad h1"
+            id="ad"
+            title="ad"
+          />
+           
+          <div>
+            flag-icon-ad
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ae h1"
+            id="ae"
+            title="ae"
+          />
+           
+          <div>
+            flag-icon-ae
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-af h1"
+            id="af"
+            title="af"
+          />
+           
+          <div>
+            flag-icon-af
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ag h1"
+            id="ag"
+            title="ag"
+          />
+           
+          <div>
+            flag-icon-ag
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ai h1"
+            id="ai"
+            title="ai"
+          />
+           
+          <div>
+            flag-icon-ai
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-al h1"
+            id="al"
+            title="al"
+          />
+           
+          <div>
+            flag-icon-al
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-am h1"
+            id="am"
+            title="am"
+          />
+           
+          <div>
+            flag-icon-am
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ao h1"
+            id="ao"
+            title="ao"
+          />
+           
+          <div>
+            flag-icon-ao
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-aq h1"
+            id="aq"
+            title="aq"
+          />
+           
+          <div>
+            flag-icon-aq
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ar h1"
+            id="ar"
+            title="ar"
+          />
+           
+          <div>
+            flag-icon-ar
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-as h1"
+            id="as"
+            title="as"
+          />
+           
+          <div>
+            flag-icon-as
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-at h1"
+            id="at"
+            title="at"
+          />
+           
+          <div>
+            flag-icon-at
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-au h1"
+            id="au"
+            title="au"
+          />
+           
+          <div>
+            flag-icon-au
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-aw h1"
+            id="aw"
+            title="aw"
+          />
+           
+          <div>
+            flag-icon-aw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ax h1"
+            id="ax"
+            title="ax"
+          />
+           
+          <div>
+            flag-icon-ax
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-az h1"
+            id="az"
+            title="az"
+          />
+           
+          <div>
+            flag-icon-az
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ba h1"
+            id="ba"
+            title="ba"
+          />
+           
+          <div>
+            flag-icon-ba
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bb h1"
+            id="bb"
+            title="bb"
+          />
+           
+          <div>
+            flag-icon-bb
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bd h1"
+            id="bd"
+            title="bd"
+          />
+           
+          <div>
+            flag-icon-bd
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-be h1"
+            id="be"
+            title="be"
+          />
+           
+          <div>
+            flag-icon-be
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bf h1"
+            id="bf"
+            title="bf"
+          />
+           
+          <div>
+            flag-icon-bf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bg h1"
+            id="bg"
+            title="bg"
+          />
+           
+          <div>
+            flag-icon-bg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bh h1"
+            id="bh"
+            title="bh"
+          />
+           
+          <div>
+            flag-icon-bh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bi h1"
+            id="bi"
+            title="bi"
+          />
+           
+          <div>
+            flag-icon-bi
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bj h1"
+            id="bj"
+            title="bj"
+          />
+           
+          <div>
+            flag-icon-bj
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bl h1"
+            id="bl"
+            title="bl"
+          />
+           
+          <div>
+            flag-icon-bl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bm h1"
+            id="bm"
+            title="bm"
+          />
+           
+          <div>
+            flag-icon-bm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bn h1"
+            id="bn"
+            title="bn"
+          />
+           
+          <div>
+            flag-icon-bn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bo h1"
+            id="bo"
+            title="bo"
+          />
+           
+          <div>
+            flag-icon-bo
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bq h1"
+            id="bq"
+            title="bq"
+          />
+           
+          <div>
+            flag-icon-bq
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-br h1"
+            id="br"
+            title="br"
+          />
+           
+          <div>
+            flag-icon-br
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bs h1"
+            id="bs"
+            title="bs"
+          />
+           
+          <div>
+            flag-icon-bs
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bt h1"
+            id="bt"
+            title="bt"
+          />
+           
+          <div>
+            flag-icon-bt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bv h1"
+            id="bv"
+            title="bv"
+          />
+           
+          <div>
+            flag-icon-bv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bw h1"
+            id="bw"
+            title="bw"
+          />
+           
+          <div>
+            flag-icon-bw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-by h1"
+            id="by"
+            title="by"
+          />
+           
+          <div>
+            flag-icon-by
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-bz h1"
+            id="bz"
+            title="bz"
+          />
+           
+          <div>
+            flag-icon-bz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ca h1"
+            id="ca"
+            title="ca"
+          />
+           
+          <div>
+            flag-icon-ca
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cc h1"
+            id="cc"
+            title="cc"
+          />
+           
+          <div>
+            flag-icon-cc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cd h1"
+            id="cd"
+            title="cd"
+          />
+           
+          <div>
+            flag-icon-cd
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cf h1"
+            id="cf"
+            title="cf"
+          />
+           
+          <div>
+            flag-icon-cf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cg h1"
+            id="cg"
+            title="cg"
+          />
+           
+          <div>
+            flag-icon-cg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ch h1"
+            id="ch"
+            title="ch"
+          />
+           
+          <div>
+            flag-icon-ch
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ci h1"
+            id="ci"
+            title="ci"
+          />
+           
+          <div>
+            flag-icon-ci
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ck h1"
+            id="ck"
+            title="ck"
+          />
+           
+          <div>
+            flag-icon-ck
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cl h1"
+            id="cl"
+            title="cl"
+          />
+           
+          <div>
+            flag-icon-cl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cm h1"
+            id="cm"
+            title="cm"
+          />
+           
+          <div>
+            flag-icon-cm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cn h1"
+            id="cn"
+            title="cn"
+          />
+           
+          <div>
+            flag-icon-cn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-co h1"
+            id="co"
+            title="co"
+          />
+           
+          <div>
+            flag-icon-co
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cr h1"
+            id="cr"
+            title="cr"
+          />
+           
+          <div>
+            flag-icon-cr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cu h1"
+            id="cu"
+            title="cu"
+          />
+           
+          <div>
+            flag-icon-cu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cv h1"
+            id="cv"
+            title="cv"
+          />
+           
+          <div>
+            flag-icon-cv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cw h1"
+            id="cw"
+            title="cw"
+          />
+           
+          <div>
+            flag-icon-cw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cx h1"
+            id="cx"
+            title="cx"
+          />
+           
+          <div>
+            flag-icon-cx
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cy h1"
+            id="cy"
+            title="cy"
+          />
+           
+          <div>
+            flag-icon-cy
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-cz h1"
+            id="cz"
+            title="cz"
+          />
+           
+          <div>
+            flag-icon-cz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-de h1"
+            id="de"
+            title="de"
+          />
+           
+          <div>
+            flag-icon-de
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-dj h1"
+            id="dj"
+            title="dj"
+          />
+           
+          <div>
+            flag-icon-dj
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-dk h1"
+            id="dk"
+            title="dk"
+          />
+           
+          <div>
+            flag-icon-dk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-dm h1"
+            id="dm"
+            title="dm"
+          />
+           
+          <div>
+            flag-icon-dm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-do h1"
+            id="do"
+            title="do"
+          />
+           
+          <div>
+            flag-icon-do
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-dz h1"
+            id="dz"
+            title="dz"
+          />
+           
+          <div>
+            flag-icon-dz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ec h1"
+            id="ec"
+            title="ec"
+          />
+           
+          <div>
+            flag-icon-ec
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ee h1"
+            id="ee"
+            title="ee"
+          />
+           
+          <div>
+            flag-icon-ee
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-eg h1"
+            id="eg"
+            title="eg"
+          />
+           
+          <div>
+            flag-icon-eg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-eh h1"
+            id="eh"
+            title="eh"
+          />
+           
+          <div>
+            flag-icon-eh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-er h1"
+            id="er"
+            title="er"
+          />
+           
+          <div>
+            flag-icon-er
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-es h1"
+            id="es"
+            title="es"
+          />
+           
+          <div>
+            flag-icon-es
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-et h1"
+            id="et"
+            title="et"
+          />
+           
+          <div>
+            flag-icon-et
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fi h1"
+            id="fi"
+            title="fi"
+          />
+           
+          <div>
+            flag-icon-fi
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fj h1"
+            id="fj"
+            title="fj"
+          />
+           
+          <div>
+            flag-icon-fj
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fk h1"
+            id="fk"
+            title="fk"
+          />
+           
+          <div>
+            flag-icon-fk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fm h1"
+            id="fm"
+            title="fm"
+          />
+           
+          <div>
+            flag-icon-fm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fo h1"
+            id="fo"
+            title="fo"
+          />
+           
+          <div>
+            flag-icon-fo
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-fr h1"
+            id="fr"
+            title="fr"
+          />
+           
+          <div>
+            flag-icon-fr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ga h1"
+            id="ga"
+            title="ga"
+          />
+           
+          <div>
+            flag-icon-ga
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gb h1"
+            id="gb"
+            title="gb"
+          />
+           
+          <div>
+            flag-icon-gb
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gd h1"
+            id="gd"
+            title="gd"
+          />
+           
+          <div>
+            flag-icon-gd
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ge h1"
+            id="ge"
+            title="ge"
+          />
+           
+          <div>
+            flag-icon-ge
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gf h1"
+            id="gf"
+            title="gf"
+          />
+           
+          <div>
+            flag-icon-gf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gg h1"
+            id="gg"
+            title="gg"
+          />
+           
+          <div>
+            flag-icon-gg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gh h1"
+            id="gh"
+            title="gh"
+          />
+           
+          <div>
+            flag-icon-gh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gi h1"
+            id="gi"
+            title="gi"
+          />
+           
+          <div>
+            flag-icon-gi
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gl h1"
+            id="gl"
+            title="gl"
+          />
+           
+          <div>
+            flag-icon-gl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gm h1"
+            id="gm"
+            title="gm"
+          />
+           
+          <div>
+            flag-icon-gm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gn h1"
+            id="gn"
+            title="gn"
+          />
+           
+          <div>
+            flag-icon-gn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gp h1"
+            id="gp"
+            title="gp"
+          />
+           
+          <div>
+            flag-icon-gp
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gq h1"
+            id="gq"
+            title="gq"
+          />
+           
+          <div>
+            flag-icon-gq
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gr h1"
+            id="gr"
+            title="gr"
+          />
+           
+          <div>
+            flag-icon-gr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gs h1"
+            id="gs"
+            title="gs"
+          />
+           
+          <div>
+            flag-icon-gs
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gt h1"
+            id="gt"
+            title="gt"
+          />
+           
+          <div>
+            flag-icon-gt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gu h1"
+            id="gu"
+            title="gu"
+          />
+           
+          <div>
+            flag-icon-gu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gw h1"
+            id="gw"
+            title="gw"
+          />
+           
+          <div>
+            flag-icon-gw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-gy h1"
+            id="gy"
+            title="gy"
+          />
+           
+          <div>
+            flag-icon-gy
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-hk h1"
+            id="hk"
+            title="hk"
+          />
+           
+          <div>
+            flag-icon-hk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-hm h1"
+            id="hm"
+            title="hm"
+          />
+           
+          <div>
+            flag-icon-hm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-hn h1"
+            id="hn"
+            title="hn"
+          />
+           
+          <div>
+            flag-icon-hn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-hr h1"
+            id="hr"
+            title="hr"
+          />
+           
+          <div>
+            flag-icon-hr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ht h1"
+            id="ht"
+            title="ht"
+          />
+           
+          <div>
+            flag-icon-ht
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-hu h1"
+            id="hu"
+            title="hu"
+          />
+           
+          <div>
+            flag-icon-hu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-id h1"
+            id="id"
+            title="id"
+          />
+           
+          <div>
+            flag-icon-id
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ie h1"
+            id="ie"
+            title="ie"
+          />
+           
+          <div>
+            flag-icon-ie
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-il h1"
+            id="il"
+            title="il"
+          />
+           
+          <div>
+            flag-icon-il
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-im h1"
+            id="im"
+            title="im"
+          />
+           
+          <div>
+            flag-icon-im
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-in h1"
+            id="in"
+            title="in"
+          />
+           
+          <div>
+            flag-icon-in
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-io h1"
+            id="io"
+            title="io"
+          />
+           
+          <div>
+            flag-icon-io
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-iq h1"
+            id="iq"
+            title="iq"
+          />
+           
+          <div>
+            flag-icon-iq
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ir h1"
+            id="ir"
+            title="ir"
+          />
+           
+          <div>
+            flag-icon-ir
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-is h1"
+            id="is"
+            title="is"
+          />
+           
+          <div>
+            flag-icon-is
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-it h1"
+            id="it"
+            title="it"
+          />
+           
+          <div>
+            flag-icon-it
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-je h1"
+            id="je"
+            title="je"
+          />
+           
+          <div>
+            flag-icon-je
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-jm h1"
+            id="jm"
+            title="jm"
+          />
+           
+          <div>
+            flag-icon-jm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-jo h1"
+            id="jo"
+            title="jo"
+          />
+           
+          <div>
+            flag-icon-jo
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-jp h1"
+            id="jp"
+            title="jp"
+          />
+           
+          <div>
+            flag-icon-jp
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ke h1"
+            id="ke"
+            title="ke"
+          />
+           
+          <div>
+            flag-icon-ke
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kg h1"
+            id="kg"
+            title="kg"
+          />
+           
+          <div>
+            flag-icon-kg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kh h1"
+            id="kh"
+            title="kh"
+          />
+           
+          <div>
+            flag-icon-kh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ki h1"
+            id="ki"
+            title="ki"
+          />
+           
+          <div>
+            flag-icon-ki
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-km h1"
+            id="km"
+            title="km"
+          />
+           
+          <div>
+            flag-icon-km
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kn h1"
+            id="kn"
+            title="kn"
+          />
+           
+          <div>
+            flag-icon-kn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kp h1"
+            id="kp"
+            title="kp"
+          />
+           
+          <div>
+            flag-icon-kp
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kr h1"
+            id="kr"
+            title="kr"
+          />
+           
+          <div>
+            flag-icon-kr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kw h1"
+            id="kw"
+            title="kw"
+          />
+           
+          <div>
+            flag-icon-kw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ky h1"
+            id="ky"
+            title="ky"
+          />
+           
+          <div>
+            flag-icon-ky
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-kz h1"
+            id="kz"
+            title="kz"
+          />
+           
+          <div>
+            flag-icon-kz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-la h1"
+            id="la"
+            title="la"
+          />
+           
+          <div>
+            flag-icon-la
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lb h1"
+            id="lb"
+            title="lb"
+          />
+           
+          <div>
+            flag-icon-lb
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lc h1"
+            id="lc"
+            title="lc"
+          />
+           
+          <div>
+            flag-icon-lc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-li h1"
+            id="li"
+            title="li"
+          />
+           
+          <div>
+            flag-icon-li
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lk h1"
+            id="lk"
+            title="lk"
+          />
+           
+          <div>
+            flag-icon-lk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lr h1"
+            id="lr"
+            title="lr"
+          />
+           
+          <div>
+            flag-icon-lr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ls h1"
+            id="ls"
+            title="ls"
+          />
+           
+          <div>
+            flag-icon-ls
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lt h1"
+            id="lt"
+            title="lt"
+          />
+           
+          <div>
+            flag-icon-lt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lu h1"
+            id="lu"
+            title="lu"
+          />
+           
+          <div>
+            flag-icon-lu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-lv h1"
+            id="lv"
+            title="lv"
+          />
+           
+          <div>
+            flag-icon-lv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ly h1"
+            id="ly"
+            title="ly"
+          />
+           
+          <div>
+            flag-icon-ly
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ma h1"
+            id="ma"
+            title="ma"
+          />
+           
+          <div>
+            flag-icon-ma
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mc h1"
+            id="mc"
+            title="mc"
+          />
+           
+          <div>
+            flag-icon-mc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-md h1"
+            id="md"
+            title="md"
+          />
+           
+          <div>
+            flag-icon-md
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-me h1"
+            id="me"
+            title="me"
+          />
+           
+          <div>
+            flag-icon-me
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mf h1"
+            id="mf"
+            title="mf"
+          />
+           
+          <div>
+            flag-icon-mf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mg h1"
+            id="mg"
+            title="mg"
+          />
+           
+          <div>
+            flag-icon-mg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mh h1"
+            id="mh"
+            title="mh"
+          />
+           
+          <div>
+            flag-icon-mh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mk h1"
+            id="mk"
+            title="mk"
+          />
+           
+          <div>
+            flag-icon-mk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ml h1"
+            id="ml"
+            title="ml"
+          />
+           
+          <div>
+            flag-icon-ml
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mm h1"
+            id="mm"
+            title="mm"
+          />
+           
+          <div>
+            flag-icon-mm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mn h1"
+            id="mn"
+            title="mn"
+          />
+           
+          <div>
+            flag-icon-mn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mo h1"
+            id="mo"
+            title="mo"
+          />
+           
+          <div>
+            flag-icon-mo
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mp h1"
+            id="mp"
+            title="mp"
+          />
+           
+          <div>
+            flag-icon-mp
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mq h1"
+            id="mq"
+            title="mq"
+          />
+           
+          <div>
+            flag-icon-mq
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mr h1"
+            id="mr"
+            title="mr"
+          />
+           
+          <div>
+            flag-icon-mr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ms h1"
+            id="ms"
+            title="ms"
+          />
+           
+          <div>
+            flag-icon-ms
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mt h1"
+            id="mt"
+            title="mt"
+          />
+           
+          <div>
+            flag-icon-mt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mu h1"
+            id="mu"
+            title="mu"
+          />
+           
+          <div>
+            flag-icon-mu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mv h1"
+            id="mv"
+            title="mv"
+          />
+           
+          <div>
+            flag-icon-mv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mw h1"
+            id="mw"
+            title="mw"
+          />
+           
+          <div>
+            flag-icon-mw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mx h1"
+            id="mx"
+            title="mx"
+          />
+           
+          <div>
+            flag-icon-mx
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-my h1"
+            id="my"
+            title="my"
+          />
+           
+          <div>
+            flag-icon-my
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-mz h1"
+            id="mz"
+            title="mz"
+          />
+           
+          <div>
+            flag-icon-mz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-na h1"
+            id="na"
+            title="na"
+          />
+           
+          <div>
+            flag-icon-na
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nc h1"
+            id="nc"
+            title="nc"
+          />
+           
+          <div>
+            flag-icon-nc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ne h1"
+            id="ne"
+            title="ne"
+          />
+           
+          <div>
+            flag-icon-ne
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nf h1"
+            id="nf"
+            title="nf"
+          />
+           
+          <div>
+            flag-icon-nf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ng h1"
+            id="ng"
+            title="ng"
+          />
+           
+          <div>
+            flag-icon-ng
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ni h1"
+            id="ni"
+            title="ni"
+          />
+           
+          <div>
+            flag-icon-ni
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nl h1"
+            id="nl"
+            title="nl"
+          />
+           
+          <div>
+            flag-icon-nl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-no h1"
+            id="no"
+            title="no"
+          />
+           
+          <div>
+            flag-icon-no
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-np h1"
+            id="np"
+            title="np"
+          />
+           
+          <div>
+            flag-icon-np
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nr h1"
+            id="nr"
+            title="nr"
+          />
+           
+          <div>
+            flag-icon-nr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nu h1"
+            id="nu"
+            title="nu"
+          />
+           
+          <div>
+            flag-icon-nu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-nz h1"
+            id="nz"
+            title="nz"
+          />
+           
+          <div>
+            flag-icon-nz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-om h1"
+            id="om"
+            title="om"
+          />
+           
+          <div>
+            flag-icon-om
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pa h1"
+            id="pa"
+            title="pa"
+          />
+           
+          <div>
+            flag-icon-pa
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pe h1"
+            id="pe"
+            title="pe"
+          />
+           
+          <div>
+            flag-icon-pe
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pf h1"
+            id="pf"
+            title="pf"
+          />
+           
+          <div>
+            flag-icon-pf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pg h1"
+            id="pg"
+            title="pg"
+          />
+           
+          <div>
+            flag-icon-pg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ph h1"
+            id="ph"
+            title="ph"
+          />
+           
+          <div>
+            flag-icon-ph
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pk h1"
+            id="pk"
+            title="pk"
+          />
+           
+          <div>
+            flag-icon-pk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pl h1"
+            id="pl"
+            title="pl"
+          />
+           
+          <div>
+            flag-icon-pl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pm h1"
+            id="pm"
+            title="pm"
+          />
+           
+          <div>
+            flag-icon-pm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pn h1"
+            id="pn"
+            title="pn"
+          />
+           
+          <div>
+            flag-icon-pn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pr h1"
+            id="pr"
+            title="pr"
+          />
+           
+          <div>
+            flag-icon-pr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ps h1"
+            id="ps"
+            title="ps"
+          />
+           
+          <div>
+            flag-icon-ps
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pt h1"
+            id="pt"
+            title="pt"
+          />
+           
+          <div>
+            flag-icon-pt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-pw h1"
+            id="pw"
+            title="pw"
+          />
+           
+          <div>
+            flag-icon-pw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-py h1"
+            id="py"
+            title="py"
+          />
+           
+          <div>
+            flag-icon-py
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-qa h1"
+            id="qa"
+            title="qa"
+          />
+           
+          <div>
+            flag-icon-qa
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-re h1"
+            id="re"
+            title="re"
+          />
+           
+          <div>
+            flag-icon-re
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ro h1"
+            id="ro"
+            title="ro"
+          />
+           
+          <div>
+            flag-icon-ro
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-rs h1"
+            id="rs"
+            title="rs"
+          />
+           
+          <div>
+            flag-icon-rs
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ru h1"
+            id="ru"
+            title="ru"
+          />
+           
+          <div>
+            flag-icon-ru
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-rw h1"
+            id="rw"
+            title="rw"
+          />
+           
+          <div>
+            flag-icon-rw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sa h1"
+            id="sa"
+            title="sa"
+          />
+           
+          <div>
+            flag-icon-sa
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sb h1"
+            id="sb"
+            title="sb"
+          />
+           
+          <div>
+            flag-icon-sb
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sc h1"
+            id="sc"
+            title="sc"
+          />
+           
+          <div>
+            flag-icon-sc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sd h1"
+            id="sd"
+            title="sd"
+          />
+           
+          <div>
+            flag-icon-sd
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-se h1"
+            id="se"
+            title="se"
+          />
+           
+          <div>
+            flag-icon-se
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sg h1"
+            id="sg"
+            title="sg"
+          />
+           
+          <div>
+            flag-icon-sg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sh h1"
+            id="sh"
+            title="sh"
+          />
+           
+          <div>
+            flag-icon-sh
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-si h1"
+            id="si"
+            title="si"
+          />
+           
+          <div>
+            flag-icon-si
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sj h1"
+            id="sj"
+            title="sj"
+          />
+           
+          <div>
+            flag-icon-sj
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sk h1"
+            id="sk"
+            title="sk"
+          />
+           
+          <div>
+            flag-icon-sk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sl h1"
+            id="sl"
+            title="sl"
+          />
+           
+          <div>
+            flag-icon-sl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sm h1"
+            id="sm"
+            title="sm"
+          />
+           
+          <div>
+            flag-icon-sm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sn h1"
+            id="sn"
+            title="sn"
+          />
+           
+          <div>
+            flag-icon-sn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-so h1"
+            id="so"
+            title="so"
+          />
+           
+          <div>
+            flag-icon-so
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sr h1"
+            id="sr"
+            title="sr"
+          />
+           
+          <div>
+            flag-icon-sr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ss h1"
+            id="ss"
+            title="ss"
+          />
+           
+          <div>
+            flag-icon-ss
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-st h1"
+            id="st"
+            title="st"
+          />
+           
+          <div>
+            flag-icon-st
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sv h1"
+            id="sv"
+            title="sv"
+          />
+           
+          <div>
+            flag-icon-sv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sx h1"
+            id="sx"
+            title="sx"
+          />
+           
+          <div>
+            flag-icon-sx
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sy h1"
+            id="sy"
+            title="sy"
+          />
+           
+          <div>
+            flag-icon-sy
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-sz h1"
+            id="sz"
+            title="sz"
+          />
+           
+          <div>
+            flag-icon-sz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tc h1"
+            id="tc"
+            title="tc"
+          />
+           
+          <div>
+            flag-icon-tc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-td h1"
+            id="td"
+            title="td"
+          />
+           
+          <div>
+            flag-icon-td
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tf h1"
+            id="tf"
+            title="tf"
+          />
+           
+          <div>
+            flag-icon-tf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tg h1"
+            id="tg"
+            title="tg"
+          />
+           
+          <div>
+            flag-icon-tg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-th h1"
+            id="th"
+            title="th"
+          />
+           
+          <div>
+            flag-icon-th
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tj h1"
+            id="tj"
+            title="tj"
+          />
+           
+          <div>
+            flag-icon-tj
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tk h1"
+            id="tk"
+            title="tk"
+          />
+           
+          <div>
+            flag-icon-tk
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tl h1"
+            id="tl"
+            title="tl"
+          />
+           
+          <div>
+            flag-icon-tl
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tm h1"
+            id="tm"
+            title="tm"
+          />
+           
+          <div>
+            flag-icon-tm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tn h1"
+            id="tn"
+            title="tn"
+          />
+           
+          <div>
+            flag-icon-tn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-to h1"
+            id="to"
+            title="to"
+          />
+           
+          <div>
+            flag-icon-to
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tr h1"
+            id="tr"
+            title="tr"
+          />
+           
+          <div>
+            flag-icon-tr
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tt h1"
+            id="tt"
+            title="tt"
+          />
+           
+          <div>
+            flag-icon-tt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tv h1"
+            id="tv"
+            title="tv"
+          />
+           
+          <div>
+            flag-icon-tv
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tw h1"
+            id="tw"
+            title="tw"
+          />
+           
+          <div>
+            flag-icon-tw
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-tz h1"
+            id="tz"
+            title="tz"
+          />
+           
+          <div>
+            flag-icon-tz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ua h1"
+            id="ua"
+            title="ua"
+          />
+           
+          <div>
+            flag-icon-ua
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ug h1"
+            id="ug"
+            title="ug"
+          />
+           
+          <div>
+            flag-icon-ug
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-um h1"
+            id="um"
+            title="um"
+          />
+           
+          <div>
+            flag-icon-um
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-us h1"
+            id="us"
+            title="us"
+          />
+           
+          <div>
+            flag-icon-us
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-uy h1"
+            id="uy"
+            title="uy"
+          />
+           
+          <div>
+            flag-icon-uy
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-uz h1"
+            id="uz"
+            title="uz"
+          />
+           
+          <div>
+            flag-icon-uz
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-va h1"
+            id="va"
+            title="va"
+          />
+           
+          <div>
+            flag-icon-va
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-vc h1"
+            id="vc"
+            title="vc"
+          />
+           
+          <div>
+            flag-icon-vc
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ve h1"
+            id="ve"
+            title="ve"
+          />
+           
+          <div>
+            flag-icon-ve
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-vg h1"
+            id="vg"
+            title="vg"
+          />
+           
+          <div>
+            flag-icon-vg
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-vi h1"
+            id="vi"
+            title="vi"
+          />
+           
+          <div>
+            flag-icon-vi
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-vn h1"
+            id="vn"
+            title="vn"
+          />
+           
+          <div>
+            flag-icon-vn
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-vu h1"
+            id="vu"
+            title="vu"
+          />
+           
+          <div>
+            flag-icon-vu
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-wf h1"
+            id="wf"
+            title="wf"
+          />
+           
+          <div>
+            flag-icon-wf
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ws h1"
+            id="ws"
+            title="ws"
+          />
+           
+          <div>
+            flag-icon-ws
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-ye h1"
+            id="ye"
+            title="ye"
+          />
+           
+          <div>
+            flag-icon-ye
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-yt h1"
+            id="yt"
+            title="yt"
+          />
+           
+          <div>
+            flag-icon-yt
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-za h1"
+            id="za"
+            title="za"
+          />
+           
+          <div>
+            flag-icon-za
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-zm h1"
+            id="zm"
+            title="zm"
+          />
+           
+          <div>
+            flag-icon-zm
+          </div>
+        </bcol-stub>
+         
+        <bcol-stub
+          class="mb-5"
+          cols="3"
+          sm="2"
+          tag="div"
+        >
+          <i
+            class="flag-icon flag-icon-zw h1"
+            id="zw"
+            title="zw"
+          />
+           
+          <div>
+            flag-icon-zw
+          </div>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+</div>
+`;
diff --git a/tests/unit/views/icons/__snapshots__/FontAwesome.spec.js.snap b/tests/unit/views/icons/__snapshots__/FontAwesome.spec.js.snap
new file mode 100644
index 00000000..8522b7a4
--- /dev/null
+++ b/tests/unit/views/icons/__snapshots__/FontAwesome.spec.js.snap
@@ -0,0 +1,14258 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FontAwesome.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="new47"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      <i
+        class="fa fa-font-awesome"
+      />
+       50 New Icons in 4.7
+    
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-address-book fa-lg mt-4"
+          />
+          <br />
+          address-book
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-address-book-o fa-lg mt-4"
+          />
+          <br />
+          address-book-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-address-card fa-lg mt-4"
+          />
+          <br />
+          address-card
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-address-card-o fa-lg mt-4"
+          />
+          <br />
+          address-card-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bandcamp fa-lg mt-4"
+          />
+          <br />
+          bandcamp
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bath fa-lg mt-4"
+          />
+          <br />
+          bath
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bathtub fa-lg mt-4"
+          />
+          <br />
+          bathtub 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-drivers-license fa-lg mt-4"
+          />
+          <br />
+          drivers-license 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-drivers-license-o fa-lg mt-4"
+          />
+          <br />
+          drivers-license-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eercast fa-lg mt-4"
+          />
+          <br />
+          eercast
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-envelope-open fa-lg mt-4"
+          />
+          <br />
+          envelope-open
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-envelope-open-o fa-lg mt-4"
+          />
+          <br />
+          envelope-open-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-etsy fa-lg mt-4"
+          />
+          <br />
+          etsy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-free-code-camp fa-lg mt-4"
+          />
+          <br />
+          free-code-camp
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-grav fa-lg mt-4"
+          />
+          <br />
+          grav
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-handshake-o fa-lg mt-4"
+          />
+          <br />
+          handshake-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-id-badge fa-lg mt-4"
+          />
+          <br />
+          id-badge
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-id-card fa-lg mt-4"
+          />
+          <br />
+          id-card
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-id-card-o fa-lg mt-4"
+          />
+          <br />
+          id-card-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-imdb fa-lg mt-4"
+          />
+          <br />
+          imdb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-linode fa-lg mt-4"
+          />
+          <br />
+          linode
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-meetup fa-lg mt-4"
+          />
+          <br />
+          meetup
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-microchip fa-lg mt-4"
+          />
+          <br />
+          microchip
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-podcast fa-lg mt-4"
+          />
+          <br />
+          podcast
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-quora fa-lg mt-4"
+          />
+          <br />
+          quora
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ravelry fa-lg mt-4"
+          />
+          <br />
+          ravelry
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-s15 fa-lg mt-4"
+          />
+          <br />
+          s15 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shower fa-lg mt-4"
+          />
+          <br />
+          shower
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-snowflake-o fa-lg mt-4"
+          />
+          <br />
+          snowflake-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-superpowers fa-lg mt-4"
+          />
+          <br />
+          superpowers
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-telegram fa-lg mt-4"
+          />
+          <br />
+          telegram
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer fa-lg mt-4"
+          />
+          <br />
+          thermometer 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-0 fa-lg mt-4"
+          />
+          <br />
+          thermometer-0 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-1 fa-lg mt-4"
+          />
+          <br />
+          thermometer-1 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-2 fa-lg mt-4"
+          />
+          <br />
+          thermometer-2 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-3 fa-lg mt-4"
+          />
+          <br />
+          thermometer-3 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-4 fa-lg mt-4"
+          />
+          <br />
+          thermometer-4 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-empty fa-lg mt-4"
+          />
+          <br />
+          thermometer-empty
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-full fa-lg mt-4"
+          />
+          <br />
+          thermometer-full
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-half fa-lg mt-4"
+          />
+          <br />
+          thermometer-half
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-quarter fa-lg mt-4"
+          />
+          <br />
+          thermometer-quarter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thermometer-three-quarters fa-lg mt-4"
+          />
+          <br />
+          thermometer-three-quarters
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-times-rectangle fa-lg mt-4"
+          />
+          <br />
+          times-rectangle 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-times-rectangle-o fa-lg mt-4"
+          />
+          <br />
+          times-rectangle-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-circle fa-lg mt-4"
+          />
+          <br />
+          user-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-circle-o fa-lg mt-4"
+          />
+          <br />
+          user-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-o fa-lg mt-4"
+          />
+          <br />
+          user-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vcard fa-lg mt-4"
+          />
+          <br />
+          vcard 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vcard-o fa-lg mt-4"
+          />
+          <br />
+          vcard-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-window-close fa-lg mt-4"
+          />
+          <br />
+          window-close
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-window-close-o fa-lg mt-4"
+          />
+          <br />
+          window-close-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-window-maximize fa-lg mt-4"
+          />
+          <br />
+          window-maximize
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-window-minimize fa-lg mt-4"
+          />
+          <br />
+          window-minimize
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-window-restore fa-lg mt-4"
+          />
+          <br />
+          window-restore
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wpexplorer fa-lg mt-4"
+          />
+          <br />
+          wpexplorer
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="new"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      20 New Icons in 4.5
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth fa-lg mt-4"
+          />
+          <br />
+          bluetooth
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth-b fa-lg mt-4"
+          />
+          <br />
+          bluetooth-b
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-codiepie fa-lg mt-4"
+          />
+          <br />
+          codiepie
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-credit-card-alt fa-lg mt-4"
+          />
+          <br />
+          credit-card-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-edge fa-lg mt-4"
+          />
+          <br />
+          edge
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fort-awesome fa-lg mt-4"
+          />
+          <br />
+          fort-awesome
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hashtag fa-lg mt-4"
+          />
+          <br />
+          hashtag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mixcloud fa-lg mt-4"
+          />
+          <br />
+          mixcloud
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-modx fa-lg mt-4"
+          />
+          <br />
+          modx
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pause-circle fa-lg mt-4"
+          />
+          <br />
+          pause-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pause-circle-o fa-lg mt-4"
+          />
+          <br />
+          pause-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-percent fa-lg mt-4"
+          />
+          <br />
+          percent
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-product-hunt fa-lg mt-4"
+          />
+          <br />
+          product-hunt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reddit-alien fa-lg mt-4"
+          />
+          <br />
+          reddit-alien
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-scribd fa-lg mt-4"
+          />
+          <br />
+          scribd
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shopping-bag fa-lg mt-4"
+          />
+          <br />
+          shopping-bag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shopping-basket fa-lg mt-4"
+          />
+          <br />
+          shopping-basket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stop-circle fa-lg mt-4"
+          />
+          <br />
+          stop-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stop-circle-o fa-lg mt-4"
+          />
+          <br />
+          stop-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-usb fa-lg mt-4"
+          />
+          <br />
+          usb
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="web-application"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Web Application Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-adjust fa-lg mt-4"
+          />
+          <br />
+          adjust
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-anchor fa-lg mt-4"
+          />
+          <br />
+          anchor
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-archive fa-lg mt-4"
+          />
+          <br />
+          archive
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-area-chart fa-lg mt-4"
+          />
+          <br />
+          area-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows fa-lg mt-4"
+          />
+          <br />
+          arrows
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-h fa-lg mt-4"
+          />
+          <br />
+          arrows-h
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-v fa-lg mt-4"
+          />
+          <br />
+          arrows-v
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-asterisk fa-lg mt-4"
+          />
+          <br />
+          asterisk
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-at fa-lg mt-4"
+          />
+          <br />
+          at
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-automobile fa-lg mt-4"
+          />
+          <br />
+          automobile 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-balance-scale fa-lg mt-4"
+          />
+          <br />
+          balance-scale
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ban fa-lg mt-4"
+          />
+          <br />
+          ban
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bank fa-lg mt-4"
+          />
+          <br />
+          bank 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bar-chart fa-lg mt-4"
+          />
+          <br />
+          bar-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bar-chart-o fa-lg mt-4"
+          />
+          <br />
+          bar-chart-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-barcode fa-lg mt-4"
+          />
+          <br />
+          barcode
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bars fa-lg mt-4"
+          />
+          <br />
+          bars
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-0 fa-lg mt-4"
+          />
+          <br />
+          battery-0 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-1 fa-lg mt-4"
+          />
+          <br />
+          battery-1 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-2 fa-lg mt-4"
+          />
+          <br />
+          battery-2 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-3 fa-lg mt-4"
+          />
+          <br />
+          battery-3 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-4 fa-lg mt-4"
+          />
+          <br />
+          battery-4 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-empty fa-lg mt-4"
+          />
+          <br />
+          battery-empty
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-full fa-lg mt-4"
+          />
+          <br />
+          battery-full
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-half fa-lg mt-4"
+          />
+          <br />
+          battery-half
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-quarter fa-lg mt-4"
+          />
+          <br />
+          battery-quarter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-battery-three-quarters fa-lg mt-4"
+          />
+          <br />
+          battery-three-quarters
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bed fa-lg mt-4"
+          />
+          <br />
+          bed
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-beer fa-lg mt-4"
+          />
+          <br />
+          beer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bell fa-lg mt-4"
+          />
+          <br />
+          bell
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bell-o fa-lg mt-4"
+          />
+          <br />
+          bell-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bell-slash fa-lg mt-4"
+          />
+          <br />
+          bell-slash
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bell-slash-o fa-lg mt-4"
+          />
+          <br />
+          bell-slash-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bicycle fa-lg mt-4"
+          />
+          <br />
+          bicycle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-binoculars fa-lg mt-4"
+          />
+          <br />
+          binoculars
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-birthday-cake fa-lg mt-4"
+          />
+          <br />
+          birthday-cake
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth fa-lg mt-4"
+          />
+          <br />
+          bluetooth
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth-b fa-lg mt-4"
+          />
+          <br />
+          bluetooth-b
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bolt fa-lg mt-4"
+          />
+          <br />
+          bolt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bomb fa-lg mt-4"
+          />
+          <br />
+          bomb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-book fa-lg mt-4"
+          />
+          <br />
+          book
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bookmark fa-lg mt-4"
+          />
+          <br />
+          bookmark
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bookmark-o fa-lg mt-4"
+          />
+          <br />
+          bookmark-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-briefcase fa-lg mt-4"
+          />
+          <br />
+          briefcase
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bug fa-lg mt-4"
+          />
+          <br />
+          bug
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-building fa-lg mt-4"
+          />
+          <br />
+          building
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-building-o fa-lg mt-4"
+          />
+          <br />
+          building-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bullhorn fa-lg mt-4"
+          />
+          <br />
+          bullhorn
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bullseye fa-lg mt-4"
+          />
+          <br />
+          bullseye
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bus fa-lg mt-4"
+          />
+          <br />
+          bus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cab fa-lg mt-4"
+          />
+          <br />
+          cab 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calculator fa-lg mt-4"
+          />
+          <br />
+          calculator
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar fa-lg mt-4"
+          />
+          <br />
+          calendar
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar-check-o fa-lg mt-4"
+          />
+          <br />
+          calendar-check-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar-minus-o fa-lg mt-4"
+          />
+          <br />
+          calendar-minus-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar-o fa-lg mt-4"
+          />
+          <br />
+          calendar-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar-plus-o fa-lg mt-4"
+          />
+          <br />
+          calendar-plus-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-calendar-times-o fa-lg mt-4"
+          />
+          <br />
+          calendar-times-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-camera fa-lg mt-4"
+          />
+          <br />
+          camera
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-camera-retro fa-lg mt-4"
+          />
+          <br />
+          camera-retro
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-car fa-lg mt-4"
+          />
+          <br />
+          car
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-down fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-left fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-right fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-up fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cart-arrow-down fa-lg mt-4"
+          />
+          <br />
+          cart-arrow-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cart-plus fa-lg mt-4"
+          />
+          <br />
+          cart-plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc fa-lg mt-4"
+          />
+          <br />
+          cc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-certificate fa-lg mt-4"
+          />
+          <br />
+          certificate
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check fa-lg mt-4"
+          />
+          <br />
+          check
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-circle fa-lg mt-4"
+          />
+          <br />
+          check-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-circle-o fa-lg mt-4"
+          />
+          <br />
+          check-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-square fa-lg mt-4"
+          />
+          <br />
+          check-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-square-o fa-lg mt-4"
+          />
+          <br />
+          check-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-child fa-lg mt-4"
+          />
+          <br />
+          child
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle fa-lg mt-4"
+          />
+          <br />
+          circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle-o fa-lg mt-4"
+          />
+          <br />
+          circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle-o-notch fa-lg mt-4"
+          />
+          <br />
+          circle-o-notch
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle-thin fa-lg mt-4"
+          />
+          <br />
+          circle-thin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-clock-o fa-lg mt-4"
+          />
+          <br />
+          clock-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-clone fa-lg mt-4"
+          />
+          <br />
+          clone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-close fa-lg mt-4"
+          />
+          <br />
+          close 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cloud fa-lg mt-4"
+          />
+          <br />
+          cloud
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cloud-download fa-lg mt-4"
+          />
+          <br />
+          cloud-download
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cloud-upload fa-lg mt-4"
+          />
+          <br />
+          cloud-upload
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-code fa-lg mt-4"
+          />
+          <br />
+          code
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-code-fork fa-lg mt-4"
+          />
+          <br />
+          code-fork
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-coffee fa-lg mt-4"
+          />
+          <br />
+          coffee
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cog fa-lg mt-4"
+          />
+          <br />
+          cog
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cogs fa-lg mt-4"
+          />
+          <br />
+          cogs
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-comment fa-lg mt-4"
+          />
+          <br />
+          comment
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-comment-o fa-lg mt-4"
+          />
+          <br />
+          comment-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-commenting fa-lg mt-4"
+          />
+          <br />
+          commenting
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-commenting-o fa-lg mt-4"
+          />
+          <br />
+          commenting-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-comments fa-lg mt-4"
+          />
+          <br />
+          comments
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-comments-o fa-lg mt-4"
+          />
+          <br />
+          comments-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-compass fa-lg mt-4"
+          />
+          <br />
+          compass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-copyright fa-lg mt-4"
+          />
+          <br />
+          copyright
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-creative-commons fa-lg mt-4"
+          />
+          <br />
+          creative-commons
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-credit-card fa-lg mt-4"
+          />
+          <br />
+          credit-card
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-credit-card-alt fa-lg mt-4"
+          />
+          <br />
+          credit-card-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-crop fa-lg mt-4"
+          />
+          <br />
+          crop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-crosshairs fa-lg mt-4"
+          />
+          <br />
+          crosshairs
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cube fa-lg mt-4"
+          />
+          <br />
+          cube
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cubes fa-lg mt-4"
+          />
+          <br />
+          cubes
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cutlery fa-lg mt-4"
+          />
+          <br />
+          cutlery
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dashboard fa-lg mt-4"
+          />
+          <br />
+          dashboard 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-database fa-lg mt-4"
+          />
+          <br />
+          database
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-desktop fa-lg mt-4"
+          />
+          <br />
+          desktop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-diamond fa-lg mt-4"
+          />
+          <br />
+          diamond
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dot-circle-o fa-lg mt-4"
+          />
+          <br />
+          dot-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-download fa-lg mt-4"
+          />
+          <br />
+          download
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-edit fa-lg mt-4"
+          />
+          <br />
+          edit 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ellipsis-h fa-lg mt-4"
+          />
+          <br />
+          ellipsis-h
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ellipsis-v fa-lg mt-4"
+          />
+          <br />
+          ellipsis-v
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-envelope fa-lg mt-4"
+          />
+          <br />
+          envelope
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-envelope-o fa-lg mt-4"
+          />
+          <br />
+          envelope-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-envelope-square fa-lg mt-4"
+          />
+          <br />
+          envelope-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eraser fa-lg mt-4"
+          />
+          <br />
+          eraser
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-exchange fa-lg mt-4"
+          />
+          <br />
+          exchange
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-exclamation fa-lg mt-4"
+          />
+          <br />
+          exclamation
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-exclamation-circle fa-lg mt-4"
+          />
+          <br />
+          exclamation-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-exclamation-triangle fa-lg mt-4"
+          />
+          <br />
+          exclamation-triangle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-external-link fa-lg mt-4"
+          />
+          <br />
+          external-link
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-external-link-square fa-lg mt-4"
+          />
+          <br />
+          external-link-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eye fa-lg mt-4"
+          />
+          <br />
+          eye
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eye-slash fa-lg mt-4"
+          />
+          <br />
+          eye-slash
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eyedropper fa-lg mt-4"
+          />
+          <br />
+          eyedropper
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fax fa-lg mt-4"
+          />
+          <br />
+          fax
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-feed fa-lg mt-4"
+          />
+          <br />
+          feed 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-female fa-lg mt-4"
+          />
+          <br />
+          female
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fighter-jet fa-lg mt-4"
+          />
+          <br />
+          fighter-jet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-archive-o fa-lg mt-4"
+          />
+          <br />
+          file-archive-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-audio-o fa-lg mt-4"
+          />
+          <br />
+          file-audio-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-code-o fa-lg mt-4"
+          />
+          <br />
+          file-code-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-excel-o fa-lg mt-4"
+          />
+          <br />
+          file-excel-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-image-o fa-lg mt-4"
+          />
+          <br />
+          file-image-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-movie-o fa-lg mt-4"
+          />
+          <br />
+          file-movie-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-pdf-o fa-lg mt-4"
+          />
+          <br />
+          file-pdf-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-photo-o fa-lg mt-4"
+          />
+          <br />
+          file-photo-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-picture-o fa-lg mt-4"
+          />
+          <br />
+          file-picture-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-powerpoint-o fa-lg mt-4"
+          />
+          <br />
+          file-powerpoint-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-sound-o fa-lg mt-4"
+          />
+          <br />
+          file-sound-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-video-o fa-lg mt-4"
+          />
+          <br />
+          file-video-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-word-o fa-lg mt-4"
+          />
+          <br />
+          file-word-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-zip-o fa-lg mt-4"
+          />
+          <br />
+          file-zip-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-film fa-lg mt-4"
+          />
+          <br />
+          film
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-filter fa-lg mt-4"
+          />
+          <br />
+          filter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fire fa-lg mt-4"
+          />
+          <br />
+          fire
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fire-extinguisher fa-lg mt-4"
+          />
+          <br />
+          fire-extinguisher
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flag fa-lg mt-4"
+          />
+          <br />
+          flag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flag-checkered fa-lg mt-4"
+          />
+          <br />
+          flag-checkered
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flag-o fa-lg mt-4"
+          />
+          <br />
+          flag-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flash fa-lg mt-4"
+          />
+          <br />
+          flash 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flask fa-lg mt-4"
+          />
+          <br />
+          flask
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-folder fa-lg mt-4"
+          />
+          <br />
+          folder
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-folder-o fa-lg mt-4"
+          />
+          <br />
+          folder-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-folder-open fa-lg mt-4"
+          />
+          <br />
+          folder-open
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-folder-open-o fa-lg mt-4"
+          />
+          <br />
+          folder-open-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-frown-o fa-lg mt-4"
+          />
+          <br />
+          frown-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-futbol-o fa-lg mt-4"
+          />
+          <br />
+          futbol-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gamepad fa-lg mt-4"
+          />
+          <br />
+          gamepad
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gavel fa-lg mt-4"
+          />
+          <br />
+          gavel
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gear fa-lg mt-4"
+          />
+          <br />
+          gear 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gears fa-lg mt-4"
+          />
+          <br />
+          gears 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gift fa-lg mt-4"
+          />
+          <br />
+          gift
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-glass fa-lg mt-4"
+          />
+          <br />
+          glass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-globe fa-lg mt-4"
+          />
+          <br />
+          globe
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-graduation-cap fa-lg mt-4"
+          />
+          <br />
+          graduation-cap
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-group fa-lg mt-4"
+          />
+          <br />
+          group 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-grab-o fa-lg mt-4"
+          />
+          <br />
+          hand-grab-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-lizard-o fa-lg mt-4"
+          />
+          <br />
+          hand-lizard-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-paper-o fa-lg mt-4"
+          />
+          <br />
+          hand-paper-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-peace-o fa-lg mt-4"
+          />
+          <br />
+          hand-peace-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-pointer-o fa-lg mt-4"
+          />
+          <br />
+          hand-pointer-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-rock-o fa-lg mt-4"
+          />
+          <br />
+          hand-rock-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-scissors-o fa-lg mt-4"
+          />
+          <br />
+          hand-scissors-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-spock-o fa-lg mt-4"
+          />
+          <br />
+          hand-spock-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-stop-o fa-lg mt-4"
+          />
+          <br />
+          hand-stop-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hashtag fa-lg mt-4"
+          />
+          <br />
+          hashtag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hdd-o fa-lg mt-4"
+          />
+          <br />
+          hdd-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-headphones fa-lg mt-4"
+          />
+          <br />
+          headphones
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heart fa-lg mt-4"
+          />
+          <br />
+          heart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heart-o fa-lg mt-4"
+          />
+          <br />
+          heart-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heartbeat fa-lg mt-4"
+          />
+          <br />
+          heartbeat
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-history fa-lg mt-4"
+          />
+          <br />
+          history
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-home fa-lg mt-4"
+          />
+          <br />
+          home
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hotel fa-lg mt-4"
+          />
+          <br />
+          hotel 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass fa-lg mt-4"
+          />
+          <br />
+          hourglass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-1 fa-lg mt-4"
+          />
+          <br />
+          hourglass-1 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-2 fa-lg mt-4"
+          />
+          <br />
+          hourglass-2 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-3 fa-lg mt-4"
+          />
+          <br />
+          hourglass-3 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-end fa-lg mt-4"
+          />
+          <br />
+          hourglass-end
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-half fa-lg mt-4"
+          />
+          <br />
+          hourglass-half
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-o fa-lg mt-4"
+          />
+          <br />
+          hourglass-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hourglass-start fa-lg mt-4"
+          />
+          <br />
+          hourglass-start
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-i-cursor fa-lg mt-4"
+          />
+          <br />
+          i-cursor
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-image fa-lg mt-4"
+          />
+          <br />
+          image 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-inbox fa-lg mt-4"
+          />
+          <br />
+          inbox
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-industry fa-lg mt-4"
+          />
+          <br />
+          industry
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-info fa-lg mt-4"
+          />
+          <br />
+          info
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-info-circle fa-lg mt-4"
+          />
+          <br />
+          info-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-institution fa-lg mt-4"
+          />
+          <br />
+          institution 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-key fa-lg mt-4"
+          />
+          <br />
+          key
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-keyboard-o fa-lg mt-4"
+          />
+          <br />
+          keyboard-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-language fa-lg mt-4"
+          />
+          <br />
+          language
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-laptop fa-lg mt-4"
+          />
+          <br />
+          laptop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-leaf fa-lg mt-4"
+          />
+          <br />
+          leaf
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-legal fa-lg mt-4"
+          />
+          <br />
+          legal 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-lemon-o fa-lg mt-4"
+          />
+          <br />
+          lemon-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-level-down fa-lg mt-4"
+          />
+          <br />
+          level-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-level-up fa-lg mt-4"
+          />
+          <br />
+          level-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-life-bouy fa-lg mt-4"
+          />
+          <br />
+          life-bouy 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-life-buoy fa-lg mt-4"
+          />
+          <br />
+          life-buoy 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-life-ring fa-lg mt-4"
+          />
+          <br />
+          life-ring
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-life-saver fa-lg mt-4"
+          />
+          <br />
+          life-saver 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-lightbulb-o fa-lg mt-4"
+          />
+          <br />
+          lightbulb-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-line-chart fa-lg mt-4"
+          />
+          <br />
+          line-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-location-arrow fa-lg mt-4"
+          />
+          <br />
+          location-arrow
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-lock fa-lg mt-4"
+          />
+          <br />
+          lock
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-magic fa-lg mt-4"
+          />
+          <br />
+          magic
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-magnet fa-lg mt-4"
+          />
+          <br />
+          magnet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mail-forward fa-lg mt-4"
+          />
+          <br />
+          mail-forward 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mail-reply fa-lg mt-4"
+          />
+          <br />
+          mail-reply 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mail-reply-all fa-lg mt-4"
+          />
+          <br />
+          mail-reply-all 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-male fa-lg mt-4"
+          />
+          <br />
+          male
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-map fa-lg mt-4"
+          />
+          <br />
+          map
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-map-marker fa-lg mt-4"
+          />
+          <br />
+          map-marker
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-map-o fa-lg mt-4"
+          />
+          <br />
+          map-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-map-pin fa-lg mt-4"
+          />
+          <br />
+          map-pin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-map-signs fa-lg mt-4"
+          />
+          <br />
+          map-signs
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-meh-o fa-lg mt-4"
+          />
+          <br />
+          meh-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-microphone fa-lg mt-4"
+          />
+          <br />
+          microphone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-microphone-slash fa-lg mt-4"
+          />
+          <br />
+          microphone-slash
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus fa-lg mt-4"
+          />
+          <br />
+          minus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus-circle fa-lg mt-4"
+          />
+          <br />
+          minus-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus-square fa-lg mt-4"
+          />
+          <br />
+          minus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus-square-o fa-lg mt-4"
+          />
+          <br />
+          minus-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mobile fa-lg mt-4"
+          />
+          <br />
+          mobile
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mobile-phone fa-lg mt-4"
+          />
+          <br />
+          mobile-phone 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-money fa-lg mt-4"
+          />
+          <br />
+          money
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-moon-o fa-lg mt-4"
+          />
+          <br />
+          moon-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mortar-board fa-lg mt-4"
+          />
+          <br />
+          mortar-board 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-motorcycle fa-lg mt-4"
+          />
+          <br />
+          motorcycle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mouse-pointer fa-lg mt-4"
+          />
+          <br />
+          mouse-pointer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-music fa-lg mt-4"
+          />
+          <br />
+          music
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-navicon fa-lg mt-4"
+          />
+          <br />
+          navicon 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-newspaper-o fa-lg mt-4"
+          />
+          <br />
+          newspaper-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-object-group fa-lg mt-4"
+          />
+          <br />
+          object-group
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-object-ungroup fa-lg mt-4"
+          />
+          <br />
+          object-ungroup
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paint-brush fa-lg mt-4"
+          />
+          <br />
+          paint-brush
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paper-plane fa-lg mt-4"
+          />
+          <br />
+          paper-plane
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paper-plane-o fa-lg mt-4"
+          />
+          <br />
+          paper-plane-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paw fa-lg mt-4"
+          />
+          <br />
+          paw
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pencil fa-lg mt-4"
+          />
+          <br />
+          pencil
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pencil-square fa-lg mt-4"
+          />
+          <br />
+          pencil-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pencil-square-o fa-lg mt-4"
+          />
+          <br />
+          pencil-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-percent fa-lg mt-4"
+          />
+          <br />
+          percent
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-phone fa-lg mt-4"
+          />
+          <br />
+          phone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-phone-square fa-lg mt-4"
+          />
+          <br />
+          phone-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-photo fa-lg mt-4"
+          />
+          <br />
+          photo 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-picture-o fa-lg mt-4"
+          />
+          <br />
+          picture-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pie-chart fa-lg mt-4"
+          />
+          <br />
+          pie-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plane fa-lg mt-4"
+          />
+          <br />
+          plane
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plug fa-lg mt-4"
+          />
+          <br />
+          plug
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus fa-lg mt-4"
+          />
+          <br />
+          plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-circle fa-lg mt-4"
+          />
+          <br />
+          plus-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-square fa-lg mt-4"
+          />
+          <br />
+          plus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-square-o fa-lg mt-4"
+          />
+          <br />
+          plus-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-power-off fa-lg mt-4"
+          />
+          <br />
+          power-off
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-print fa-lg mt-4"
+          />
+          <br />
+          print
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-puzzle-piece fa-lg mt-4"
+          />
+          <br />
+          puzzle-piece
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-qrcode fa-lg mt-4"
+          />
+          <br />
+          qrcode
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-question fa-lg mt-4"
+          />
+          <br />
+          question
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-question-circle fa-lg mt-4"
+          />
+          <br />
+          question-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-quote-left fa-lg mt-4"
+          />
+          <br />
+          quote-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-quote-right fa-lg mt-4"
+          />
+          <br />
+          quote-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-random fa-lg mt-4"
+          />
+          <br />
+          random
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-recycle fa-lg mt-4"
+          />
+          <br />
+          recycle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-refresh fa-lg mt-4"
+          />
+          <br />
+          refresh
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-registered fa-lg mt-4"
+          />
+          <br />
+          registered
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-remove fa-lg mt-4"
+          />
+          <br />
+          remove 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reorder fa-lg mt-4"
+          />
+          <br />
+          reorder 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reply fa-lg mt-4"
+          />
+          <br />
+          reply
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reply-all fa-lg mt-4"
+          />
+          <br />
+          reply-all
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-retweet fa-lg mt-4"
+          />
+          <br />
+          retweet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-road fa-lg mt-4"
+          />
+          <br />
+          road
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rocket fa-lg mt-4"
+          />
+          <br />
+          rocket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rss fa-lg mt-4"
+          />
+          <br />
+          rss
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rss-square fa-lg mt-4"
+          />
+          <br />
+          rss-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-search fa-lg mt-4"
+          />
+          <br />
+          search
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-search-minus fa-lg mt-4"
+          />
+          <br />
+          search-minus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-search-plus fa-lg mt-4"
+          />
+          <br />
+          search-plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-send fa-lg mt-4"
+          />
+          <br />
+          send 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-send-o fa-lg mt-4"
+          />
+          <br />
+          send-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-server fa-lg mt-4"
+          />
+          <br />
+          server
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share fa-lg mt-4"
+          />
+          <br />
+          share
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-alt fa-lg mt-4"
+          />
+          <br />
+          share-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-alt-square fa-lg mt-4"
+          />
+          <br />
+          share-alt-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-square fa-lg mt-4"
+          />
+          <br />
+          share-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-square-o fa-lg mt-4"
+          />
+          <br />
+          share-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shield fa-lg mt-4"
+          />
+          <br />
+          shield
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ship fa-lg mt-4"
+          />
+          <br />
+          ship
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shopping-bag fa-lg mt-4"
+          />
+          <br />
+          shopping-bag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shopping-basket fa-lg mt-4"
+          />
+          <br />
+          shopping-basket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shopping-cart fa-lg mt-4"
+          />
+          <br />
+          shopping-cart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sign-in fa-lg mt-4"
+          />
+          <br />
+          sign-in
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sign-out fa-lg mt-4"
+          />
+          <br />
+          sign-out
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-signal fa-lg mt-4"
+          />
+          <br />
+          signal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sitemap fa-lg mt-4"
+          />
+          <br />
+          sitemap
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sliders fa-lg mt-4"
+          />
+          <br />
+          sliders
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-smile-o fa-lg mt-4"
+          />
+          <br />
+          smile-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-soccer-ball-o fa-lg mt-4"
+          />
+          <br />
+          soccer-ball-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort fa-lg mt-4"
+          />
+          <br />
+          sort
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-alpha-asc fa-lg mt-4"
+          />
+          <br />
+          sort-alpha-asc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-alpha-desc fa-lg mt-4"
+          />
+          <br />
+          sort-alpha-desc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-amount-asc fa-lg mt-4"
+          />
+          <br />
+          sort-amount-asc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-amount-desc fa-lg mt-4"
+          />
+          <br />
+          sort-amount-desc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-asc fa-lg mt-4"
+          />
+          <br />
+          sort-asc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-desc fa-lg mt-4"
+          />
+          <br />
+          sort-desc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-down fa-lg mt-4"
+          />
+          <br />
+          sort-down 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-numeric-asc fa-lg mt-4"
+          />
+          <br />
+          sort-numeric-asc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-numeric-desc fa-lg mt-4"
+          />
+          <br />
+          sort-numeric-desc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sort-up fa-lg mt-4"
+          />
+          <br />
+          sort-up 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-space-shuttle fa-lg mt-4"
+          />
+          <br />
+          space-shuttle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-spinner fa-lg mt-4"
+          />
+          <br />
+          spinner
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-spoon fa-lg mt-4"
+          />
+          <br />
+          spoon
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-square fa-lg mt-4"
+          />
+          <br />
+          square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-square-o fa-lg mt-4"
+          />
+          <br />
+          square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star fa-lg mt-4"
+          />
+          <br />
+          star
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star-half fa-lg mt-4"
+          />
+          <br />
+          star-half
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star-half-empty fa-lg mt-4"
+          />
+          <br />
+          star-half-empty 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star-half-full fa-lg mt-4"
+          />
+          <br />
+          star-half-full 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star-half-o fa-lg mt-4"
+          />
+          <br />
+          star-half-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-star-o fa-lg mt-4"
+          />
+          <br />
+          star-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sticky-note fa-lg mt-4"
+          />
+          <br />
+          sticky-note
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sticky-note-o fa-lg mt-4"
+          />
+          <br />
+          sticky-note-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-street-view fa-lg mt-4"
+          />
+          <br />
+          street-view
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-suitcase fa-lg mt-4"
+          />
+          <br />
+          suitcase
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sun-o fa-lg mt-4"
+          />
+          <br />
+          sun-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-support fa-lg mt-4"
+          />
+          <br />
+          support 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tablet fa-lg mt-4"
+          />
+          <br />
+          tablet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tachometer fa-lg mt-4"
+          />
+          <br />
+          tachometer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tag fa-lg mt-4"
+          />
+          <br />
+          tag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tags fa-lg mt-4"
+          />
+          <br />
+          tags
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tasks fa-lg mt-4"
+          />
+          <br />
+          tasks
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-taxi fa-lg mt-4"
+          />
+          <br />
+          taxi
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-television fa-lg mt-4"
+          />
+          <br />
+          television
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-terminal fa-lg mt-4"
+          />
+          <br />
+          terminal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumb-tack fa-lg mt-4"
+          />
+          <br />
+          thumb-tack
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-down fa-lg mt-4"
+          />
+          <br />
+          thumbs-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-o-down fa-lg mt-4"
+          />
+          <br />
+          thumbs-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-o-up fa-lg mt-4"
+          />
+          <br />
+          thumbs-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-up fa-lg mt-4"
+          />
+          <br />
+          thumbs-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ticket fa-lg mt-4"
+          />
+          <br />
+          ticket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-times fa-lg mt-4"
+          />
+          <br />
+          times
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-times-circle fa-lg mt-4"
+          />
+          <br />
+          times-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-times-circle-o fa-lg mt-4"
+          />
+          <br />
+          times-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tint fa-lg mt-4"
+          />
+          <br />
+          tint
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-down fa-lg mt-4"
+          />
+          <br />
+          toggle-down 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-left fa-lg mt-4"
+          />
+          <br />
+          toggle-left 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-off fa-lg mt-4"
+          />
+          <br />
+          toggle-off
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-on fa-lg mt-4"
+          />
+          <br />
+          toggle-on
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-right fa-lg mt-4"
+          />
+          <br />
+          toggle-right 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-up fa-lg mt-4"
+          />
+          <br />
+          toggle-up 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-trademark fa-lg mt-4"
+          />
+          <br />
+          trademark
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-trash fa-lg mt-4"
+          />
+          <br />
+          trash
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-trash-o fa-lg mt-4"
+          />
+          <br />
+          trash-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tree fa-lg mt-4"
+          />
+          <br />
+          tree
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-trophy fa-lg mt-4"
+          />
+          <br />
+          trophy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-truck fa-lg mt-4"
+          />
+          <br />
+          truck
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tty fa-lg mt-4"
+          />
+          <br />
+          tty
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tv fa-lg mt-4"
+          />
+          <br />
+          tv 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-umbrella fa-lg mt-4"
+          />
+          <br />
+          umbrella
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-university fa-lg mt-4"
+          />
+          <br />
+          university
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-unlock fa-lg mt-4"
+          />
+          <br />
+          unlock
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-unlock-alt fa-lg mt-4"
+          />
+          <br />
+          unlock-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-unsorted fa-lg mt-4"
+          />
+          <br />
+          unsorted 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-upload fa-lg mt-4"
+          />
+          <br />
+          upload
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user fa-lg mt-4"
+          />
+          <br />
+          user
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-plus fa-lg mt-4"
+          />
+          <br />
+          user-plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-secret fa-lg mt-4"
+          />
+          <br />
+          user-secret
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-times fa-lg mt-4"
+          />
+          <br />
+          user-times
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-users fa-lg mt-4"
+          />
+          <br />
+          users
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-video-camera fa-lg mt-4"
+          />
+          <br />
+          video-camera
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-volume-down fa-lg mt-4"
+          />
+          <br />
+          volume-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-volume-off fa-lg mt-4"
+          />
+          <br />
+          volume-off
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-volume-up fa-lg mt-4"
+          />
+          <br />
+          volume-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-warning fa-lg mt-4"
+          />
+          <br />
+          warning 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wheelchair fa-lg mt-4"
+          />
+          <br />
+          wheelchair
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wifi fa-lg mt-4"
+          />
+          <br />
+          wifi
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wrench fa-lg mt-4"
+          />
+          <br />
+          wrench
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="hand"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Hand Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-grab-o fa-lg mt-4"
+          />
+          <br />
+          hand-grab-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-lizard-o fa-lg mt-4"
+          />
+          <br />
+          hand-lizard-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-down fa-lg mt-4"
+          />
+          <br />
+          hand-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-left fa-lg mt-4"
+          />
+          <br />
+          hand-o-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-right fa-lg mt-4"
+          />
+          <br />
+          hand-o-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-up fa-lg mt-4"
+          />
+          <br />
+          hand-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-paper-o fa-lg mt-4"
+          />
+          <br />
+          hand-paper-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-peace-o fa-lg mt-4"
+          />
+          <br />
+          hand-peace-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-pointer-o fa-lg mt-4"
+          />
+          <br />
+          hand-pointer-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-rock-o fa-lg mt-4"
+          />
+          <br />
+          hand-rock-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-scissors-o fa-lg mt-4"
+          />
+          <br />
+          hand-scissors-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-spock-o fa-lg mt-4"
+          />
+          <br />
+          hand-spock-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-stop-o fa-lg mt-4"
+          />
+          <br />
+          hand-stop-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-down fa-lg mt-4"
+          />
+          <br />
+          thumbs-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-o-down fa-lg mt-4"
+          />
+          <br />
+          thumbs-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-o-up fa-lg mt-4"
+          />
+          <br />
+          thumbs-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-thumbs-up fa-lg mt-4"
+          />
+          <br />
+          thumbs-up
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="transportation"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Transportation Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ambulance fa-lg mt-4"
+          />
+          <br />
+          ambulance
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-automobile fa-lg mt-4"
+          />
+          <br />
+          automobile 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bicycle fa-lg mt-4"
+          />
+          <br />
+          bicycle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bus fa-lg mt-4"
+          />
+          <br />
+          bus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cab fa-lg mt-4"
+          />
+          <br />
+          cab 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-car fa-lg mt-4"
+          />
+          <br />
+          car
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fighter-jet fa-lg mt-4"
+          />
+          <br />
+          fighter-jet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-motorcycle fa-lg mt-4"
+          />
+          <br />
+          motorcycle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plane fa-lg mt-4"
+          />
+          <br />
+          plane
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rocket fa-lg mt-4"
+          />
+          <br />
+          rocket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ship fa-lg mt-4"
+          />
+          <br />
+          ship
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-space-shuttle fa-lg mt-4"
+          />
+          <br />
+          space-shuttle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-subway fa-lg mt-4"
+          />
+          <br />
+          subway
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-taxi fa-lg mt-4"
+          />
+          <br />
+          taxi
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-train fa-lg mt-4"
+          />
+          <br />
+          train
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-truck fa-lg mt-4"
+          />
+          <br />
+          truck
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wheelchair fa-lg mt-4"
+          />
+          <br />
+          wheelchair
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="gender"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Gender Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-genderless fa-lg mt-4"
+          />
+          <br />
+          genderless
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-intersex fa-lg mt-4"
+          />
+          <br />
+          intersex 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mars fa-lg mt-4"
+          />
+          <br />
+          mars
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mars-double fa-lg mt-4"
+          />
+          <br />
+          mars-double
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mars-stroke fa-lg mt-4"
+          />
+          <br />
+          mars-stroke
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mars-stroke-h fa-lg mt-4"
+          />
+          <br />
+          mars-stroke-h
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mars-stroke-v fa-lg mt-4"
+          />
+          <br />
+          mars-stroke-v
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mercury fa-lg mt-4"
+          />
+          <br />
+          mercury
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-neuter fa-lg mt-4"
+          />
+          <br />
+          neuter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-transgender fa-lg mt-4"
+          />
+          <br />
+          transgender
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-transgender-alt fa-lg mt-4"
+          />
+          <br />
+          transgender-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-venus fa-lg mt-4"
+          />
+          <br />
+          venus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-venus-double fa-lg mt-4"
+          />
+          <br />
+          venus-double
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-venus-mars fa-lg mt-4"
+          />
+          <br />
+          venus-mars
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="file-type"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      File Type Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file fa-lg mt-4"
+          />
+          <br />
+          file
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-archive-o fa-lg mt-4"
+          />
+          <br />
+          file-archive-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-audio-o fa-lg mt-4"
+          />
+          <br />
+          file-audio-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-code-o fa-lg mt-4"
+          />
+          <br />
+          file-code-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-excel-o fa-lg mt-4"
+          />
+          <br />
+          file-excel-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-image-o fa-lg mt-4"
+          />
+          <br />
+          file-image-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-movie-o fa-lg mt-4"
+          />
+          <br />
+          file-movie-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-o fa-lg mt-4"
+          />
+          <br />
+          file-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-pdf-o fa-lg mt-4"
+          />
+          <br />
+          file-pdf-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-photo-o fa-lg mt-4"
+          />
+          <br />
+          file-photo-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-picture-o fa-lg mt-4"
+          />
+          <br />
+          file-picture-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-powerpoint-o fa-lg mt-4"
+          />
+          <br />
+          file-powerpoint-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-sound-o fa-lg mt-4"
+          />
+          <br />
+          file-sound-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-text fa-lg mt-4"
+          />
+          <br />
+          file-text
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-text-o fa-lg mt-4"
+          />
+          <br />
+          file-text-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-video-o fa-lg mt-4"
+          />
+          <br />
+          file-video-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-word-o fa-lg mt-4"
+          />
+          <br />
+          file-word-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-zip-o fa-lg mt-4"
+          />
+          <br />
+          file-zip-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="spinner"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Spinner Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <div
+        class="alert alert-success"
+      >
+        <ul
+          class="fa-ul"
+        >
+          <li>
+            <i
+              class="fa fa-info-circle fa-li"
+            />
+            
+            These icons work great with the 
+            <code>
+              fa-spin
+            </code>
+             class.
+          
+          </li>
+        </ul>
+      </div>
+       
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"
+          />
+          <br />
+          circle-o-notch
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cog fa-lg mt-4"
+          />
+          <br />
+          cog
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gear fa-lg mt-4"
+          />
+          <br />
+          gear 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-refresh fa-lg mt-4"
+          />
+          <br />
+          refresh
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-spinner fa-lg mt-4"
+          />
+          <br />
+          spinner
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="form-control"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Form Control Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-square fa-lg mt-4"
+          />
+          <br />
+          check-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-check-square-o fa-lg mt-4"
+          />
+          <br />
+          check-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle fa-lg mt-4"
+          />
+          <br />
+          circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-circle-o fa-lg mt-4"
+          />
+          <br />
+          circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dot-circle-o fa-lg mt-4"
+          />
+          <br />
+          dot-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus-square fa-lg mt-4"
+          />
+          <br />
+          minus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-minus-square-o fa-lg mt-4"
+          />
+          <br />
+          minus-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-square fa-lg mt-4"
+          />
+          <br />
+          plus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-square-o fa-lg mt-4"
+          />
+          <br />
+          plus-square-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-square fa-lg mt-4"
+          />
+          <br />
+          square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-square-o fa-lg mt-4"
+          />
+          <br />
+          square-o
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="payment"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Payment Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-amex fa-lg mt-4"
+          />
+          <br />
+          cc-amex
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-diners-club fa-lg mt-4"
+          />
+          <br />
+          cc-diners-club
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-discover fa-lg mt-4"
+          />
+          <br />
+          cc-discover
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-jcb fa-lg mt-4"
+          />
+          <br />
+          cc-jcb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-mastercard fa-lg mt-4"
+          />
+          <br />
+          cc-mastercard
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-paypal fa-lg mt-4"
+          />
+          <br />
+          cc-paypal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-stripe fa-lg mt-4"
+          />
+          <br />
+          cc-stripe
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-visa fa-lg mt-4"
+          />
+          <br />
+          cc-visa
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-credit-card fa-lg mt-4"
+          />
+          <br />
+          credit-card
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-credit-card-alt fa-lg mt-4"
+          />
+          <br />
+          credit-card-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-google-wallet fa-lg mt-4"
+          />
+          <br />
+          google-wallet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paypal fa-lg mt-4"
+          />
+          <br />
+          paypal
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="chart"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Chart Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-area-chart fa-lg mt-4"
+          />
+          <br />
+          area-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bar-chart fa-lg mt-4"
+          />
+          <br />
+          bar-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bar-chart-o fa-lg mt-4"
+          />
+          <br />
+          bar-chart-o 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-line-chart fa-lg mt-4"
+          />
+          <br />
+          line-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pie-chart fa-lg mt-4"
+          />
+          <br />
+          pie-chart
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="currency"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Currency Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bitcoin fa-lg mt-4"
+          />
+          <br />
+          bitcoin 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-btc fa-lg mt-4"
+          />
+          <br />
+          btc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cny fa-lg mt-4"
+          />
+          <br />
+          cny 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dollar fa-lg mt-4"
+          />
+          <br />
+          dollar 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eur fa-lg mt-4"
+          />
+          <br />
+          eur
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-euro fa-lg mt-4"
+          />
+          <br />
+          euro 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gbp fa-lg mt-4"
+          />
+          <br />
+          gbp
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gg fa-lg mt-4"
+          />
+          <br />
+          gg
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gg-circle fa-lg mt-4"
+          />
+          <br />
+          gg-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ils fa-lg mt-4"
+          />
+          <br />
+          ils
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-inr fa-lg mt-4"
+          />
+          <br />
+          inr
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-jpy fa-lg mt-4"
+          />
+          <br />
+          jpy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-krw fa-lg mt-4"
+          />
+          <br />
+          krw
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-money fa-lg mt-4"
+          />
+          <br />
+          money
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rmb fa-lg mt-4"
+          />
+          <br />
+          rmb 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rouble fa-lg mt-4"
+          />
+          <br />
+          rouble 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rub fa-lg mt-4"
+          />
+          <br />
+          rub
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ruble fa-lg mt-4"
+          />
+          <br />
+          ruble 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rupee fa-lg mt-4"
+          />
+          <br />
+          rupee 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shekel fa-lg mt-4"
+          />
+          <br />
+          shekel 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sheqel fa-lg mt-4"
+          />
+          <br />
+          sheqel 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-try fa-lg mt-4"
+          />
+          <br />
+          try
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-turkish-lira fa-lg mt-4"
+          />
+          <br />
+          turkish-lira 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-usd fa-lg mt-4"
+          />
+          <br />
+          usd
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-won fa-lg mt-4"
+          />
+          <br />
+          won 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-yen fa-lg mt-4"
+          />
+          <br />
+          yen 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="text-editor"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Text Editor Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-align-center fa-lg mt-4"
+          />
+          <br />
+          align-center
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-align-justify fa-lg mt-4"
+          />
+          <br />
+          align-justify
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-align-left fa-lg mt-4"
+          />
+          <br />
+          align-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-align-right fa-lg mt-4"
+          />
+          <br />
+          align-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bold fa-lg mt-4"
+          />
+          <br />
+          bold
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chain fa-lg mt-4"
+          />
+          <br />
+          chain 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chain-broken fa-lg mt-4"
+          />
+          <br />
+          chain-broken
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-clipboard fa-lg mt-4"
+          />
+          <br />
+          clipboard
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-columns fa-lg mt-4"
+          />
+          <br />
+          columns
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-copy fa-lg mt-4"
+          />
+          <br />
+          copy 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cut fa-lg mt-4"
+          />
+          <br />
+          cut 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dedent fa-lg mt-4"
+          />
+          <br />
+          dedent 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eraser fa-lg mt-4"
+          />
+          <br />
+          eraser
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file fa-lg mt-4"
+          />
+          <br />
+          file
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-o fa-lg mt-4"
+          />
+          <br />
+          file-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-text fa-lg mt-4"
+          />
+          <br />
+          file-text
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-file-text-o fa-lg mt-4"
+          />
+          <br />
+          file-text-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-files-o fa-lg mt-4"
+          />
+          <br />
+          files-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-floppy-o fa-lg mt-4"
+          />
+          <br />
+          floppy-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-font fa-lg mt-4"
+          />
+          <br />
+          font
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-header fa-lg mt-4"
+          />
+          <br />
+          header
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-indent fa-lg mt-4"
+          />
+          <br />
+          indent
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-italic fa-lg mt-4"
+          />
+          <br />
+          italic
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-link fa-lg mt-4"
+          />
+          <br />
+          link
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-list fa-lg mt-4"
+          />
+          <br />
+          list
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-list-alt fa-lg mt-4"
+          />
+          <br />
+          list-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-list-ol fa-lg mt-4"
+          />
+          <br />
+          list-ol
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-list-ul fa-lg mt-4"
+          />
+          <br />
+          list-ul
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-outdent fa-lg mt-4"
+          />
+          <br />
+          outdent
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paperclip fa-lg mt-4"
+          />
+          <br />
+          paperclip
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paragraph fa-lg mt-4"
+          />
+          <br />
+          paragraph
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paste fa-lg mt-4"
+          />
+          <br />
+          paste 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-repeat fa-lg mt-4"
+          />
+          <br />
+          repeat
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rotate-left fa-lg mt-4"
+          />
+          <br />
+          rotate-left 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rotate-right fa-lg mt-4"
+          />
+          <br />
+          rotate-right 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-save fa-lg mt-4"
+          />
+          <br />
+          save 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-scissors fa-lg mt-4"
+          />
+          <br />
+          scissors
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-strikethrough fa-lg mt-4"
+          />
+          <br />
+          strikethrough
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-subscript fa-lg mt-4"
+          />
+          <br />
+          subscript
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-superscript fa-lg mt-4"
+          />
+          <br />
+          superscript
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-table fa-lg mt-4"
+          />
+          <br />
+          table
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-text-height fa-lg mt-4"
+          />
+          <br />
+          text-height
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-text-width fa-lg mt-4"
+          />
+          <br />
+          text-width
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-th fa-lg mt-4"
+          />
+          <br />
+          th
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-th-large fa-lg mt-4"
+          />
+          <br />
+          th-large
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-th-list fa-lg mt-4"
+          />
+          <br />
+          th-list
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-underline fa-lg mt-4"
+          />
+          <br />
+          underline
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-undo fa-lg mt-4"
+          />
+          <br />
+          undo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-unlink fa-lg mt-4"
+          />
+          <br />
+          unlink 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="directional"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Directional Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-double-down fa-lg mt-4"
+          />
+          <br />
+          angle-double-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-double-left fa-lg mt-4"
+          />
+          <br />
+          angle-double-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-double-right fa-lg mt-4"
+          />
+          <br />
+          angle-double-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-double-up fa-lg mt-4"
+          />
+          <br />
+          angle-double-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-down fa-lg mt-4"
+          />
+          <br />
+          angle-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-left fa-lg mt-4"
+          />
+          <br />
+          angle-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-right fa-lg mt-4"
+          />
+          <br />
+          angle-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angle-up fa-lg mt-4"
+          />
+          <br />
+          angle-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-down fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-left fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-o-down fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-o-left fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-o-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-o-right fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-o-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-o-up fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-right fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-circle-up fa-lg mt-4"
+          />
+          <br />
+          arrow-circle-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-down fa-lg mt-4"
+          />
+          <br />
+          arrow-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-left fa-lg mt-4"
+          />
+          <br />
+          arrow-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-right fa-lg mt-4"
+          />
+          <br />
+          arrow-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrow-up fa-lg mt-4"
+          />
+          <br />
+          arrow-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows fa-lg mt-4"
+          />
+          <br />
+          arrows
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-alt fa-lg mt-4"
+          />
+          <br />
+          arrows-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-h fa-lg mt-4"
+          />
+          <br />
+          arrows-h
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-v fa-lg mt-4"
+          />
+          <br />
+          arrows-v
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-down fa-lg mt-4"
+          />
+          <br />
+          caret-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-left fa-lg mt-4"
+          />
+          <br />
+          caret-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-right fa-lg mt-4"
+          />
+          <br />
+          caret-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-down fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-left fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-right fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-square-o-up fa-lg mt-4"
+          />
+          <br />
+          caret-square-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-caret-up fa-lg mt-4"
+          />
+          <br />
+          caret-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-circle-down fa-lg mt-4"
+          />
+          <br />
+          chevron-circle-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-circle-left fa-lg mt-4"
+          />
+          <br />
+          chevron-circle-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-circle-right fa-lg mt-4"
+          />
+          <br />
+          chevron-circle-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-circle-up fa-lg mt-4"
+          />
+          <br />
+          chevron-circle-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-down fa-lg mt-4"
+          />
+          <br />
+          chevron-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-left fa-lg mt-4"
+          />
+          <br />
+          chevron-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-right fa-lg mt-4"
+          />
+          <br />
+          chevron-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chevron-up fa-lg mt-4"
+          />
+          <br />
+          chevron-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-exchange fa-lg mt-4"
+          />
+          <br />
+          exchange
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-down fa-lg mt-4"
+          />
+          <br />
+          hand-o-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-left fa-lg mt-4"
+          />
+          <br />
+          hand-o-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-right fa-lg mt-4"
+          />
+          <br />
+          hand-o-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hand-o-up fa-lg mt-4"
+          />
+          <br />
+          hand-o-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-long-arrow-down fa-lg mt-4"
+          />
+          <br />
+          long-arrow-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-long-arrow-left fa-lg mt-4"
+          />
+          <br />
+          long-arrow-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-long-arrow-right fa-lg mt-4"
+          />
+          <br />
+          long-arrow-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-long-arrow-up fa-lg mt-4"
+          />
+          <br />
+          long-arrow-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-down fa-lg mt-4"
+          />
+          <br />
+          toggle-down 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-left fa-lg mt-4"
+          />
+          <br />
+          toggle-left 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-right fa-lg mt-4"
+          />
+          <br />
+          toggle-right 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-toggle-up fa-lg mt-4"
+          />
+          <br />
+          toggle-up 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="video-player"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Video Player Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-arrows-alt fa-lg mt-4"
+          />
+          <br />
+          arrows-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-backward fa-lg mt-4"
+          />
+          <br />
+          backward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-compress fa-lg mt-4"
+          />
+          <br />
+          compress
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-eject fa-lg mt-4"
+          />
+          <br />
+          eject
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-expand fa-lg mt-4"
+          />
+          <br />
+          expand
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fast-backward fa-lg mt-4"
+          />
+          <br />
+          fast-backward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fast-forward fa-lg mt-4"
+          />
+          <br />
+          fast-forward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-forward fa-lg mt-4"
+          />
+          <br />
+          forward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pause fa-lg mt-4"
+          />
+          <br />
+          pause
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pause-circle fa-lg mt-4"
+          />
+          <br />
+          pause-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pause-circle-o fa-lg mt-4"
+          />
+          <br />
+          pause-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-play fa-lg mt-4"
+          />
+          <br />
+          play
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-play-circle fa-lg mt-4"
+          />
+          <br />
+          play-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-play-circle-o fa-lg mt-4"
+          />
+          <br />
+          play-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-random fa-lg mt-4"
+          />
+          <br />
+          random
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-step-backward fa-lg mt-4"
+          />
+          <br />
+          step-backward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-step-forward fa-lg mt-4"
+          />
+          <br />
+          step-forward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stop fa-lg mt-4"
+          />
+          <br />
+          stop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stop-circle fa-lg mt-4"
+          />
+          <br />
+          stop-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stop-circle-o fa-lg mt-4"
+          />
+          <br />
+          stop-circle-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-youtube-play fa-lg mt-4"
+          />
+          <br />
+          youtube-play
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="brand"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Brand Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <div
+        class="alert alert-warning"
+      >
+        <h4>
+          <i
+            class="fa fa-warning"
+          />
+           Warning!
+        </h4>
+        
+        Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
+        Media Buttons" setting. We will not use hacks to force them to display. Please
+        
+        <a
+          class="alert-link"
+          href="https://adblockplus.org/en/bugs"
+        >
+          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>
+       
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-500px fa-lg mt-4"
+          />
+          <br />
+          500px
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-adn fa-lg mt-4"
+          />
+          <br />
+          adn
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-amazon fa-lg mt-4"
+          />
+          <br />
+          amazon
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-android fa-lg mt-4"
+          />
+          <br />
+          android
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-angellist fa-lg mt-4"
+          />
+          <br />
+          angellist
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-apple fa-lg mt-4"
+          />
+          <br />
+          apple
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-behance fa-lg mt-4"
+          />
+          <br />
+          behance
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-behance-square fa-lg mt-4"
+          />
+          <br />
+          behance-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bitbucket fa-lg mt-4"
+          />
+          <br />
+          bitbucket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bitbucket-square fa-lg mt-4"
+          />
+          <br />
+          bitbucket-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bitcoin fa-lg mt-4"
+          />
+          <br />
+          bitcoin 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-black-tie fa-lg mt-4"
+          />
+          <br />
+          black-tie
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth fa-lg mt-4"
+          />
+          <br />
+          bluetooth
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-bluetooth-b fa-lg mt-4"
+          />
+          <br />
+          bluetooth-b
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-btc fa-lg mt-4"
+          />
+          <br />
+          btc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-buysellads fa-lg mt-4"
+          />
+          <br />
+          buysellads
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-amex fa-lg mt-4"
+          />
+          <br />
+          cc-amex
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-diners-club fa-lg mt-4"
+          />
+          <br />
+          cc-diners-club
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-discover fa-lg mt-4"
+          />
+          <br />
+          cc-discover
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-jcb fa-lg mt-4"
+          />
+          <br />
+          cc-jcb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-mastercard fa-lg mt-4"
+          />
+          <br />
+          cc-mastercard
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-paypal fa-lg mt-4"
+          />
+          <br />
+          cc-paypal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-stripe fa-lg mt-4"
+          />
+          <br />
+          cc-stripe
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-cc-visa fa-lg mt-4"
+          />
+          <br />
+          cc-visa
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-chrome fa-lg mt-4"
+          />
+          <br />
+          chrome
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-codepen fa-lg mt-4"
+          />
+          <br />
+          codepen
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-codiepie fa-lg mt-4"
+          />
+          <br />
+          codiepie
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-connectdevelop fa-lg mt-4"
+          />
+          <br />
+          connectdevelop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-contao fa-lg mt-4"
+          />
+          <br />
+          contao
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-css3 fa-lg mt-4"
+          />
+          <br />
+          css3
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dashcube fa-lg mt-4"
+          />
+          <br />
+          dashcube
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-delicious fa-lg mt-4"
+          />
+          <br />
+          delicious
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-deviantart fa-lg mt-4"
+          />
+          <br />
+          deviantart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-digg fa-lg mt-4"
+          />
+          <br />
+          digg
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dribbble fa-lg mt-4"
+          />
+          <br />
+          dribbble
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-dropbox fa-lg mt-4"
+          />
+          <br />
+          dropbox
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-drupal fa-lg mt-4"
+          />
+          <br />
+          drupal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-edge fa-lg mt-4"
+          />
+          <br />
+          edge
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-empire fa-lg mt-4"
+          />
+          <br />
+          empire
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-expeditedssl fa-lg mt-4"
+          />
+          <br />
+          expeditedssl
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-facebook fa-lg mt-4"
+          />
+          <br />
+          facebook
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-facebook-f fa-lg mt-4"
+          />
+          <br />
+          facebook-f 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-facebook-official fa-lg mt-4"
+          />
+          <br />
+          facebook-official
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-facebook-square fa-lg mt-4"
+          />
+          <br />
+          facebook-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-firefox fa-lg mt-4"
+          />
+          <br />
+          firefox
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-flickr fa-lg mt-4"
+          />
+          <br />
+          flickr
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fonticons fa-lg mt-4"
+          />
+          <br />
+          fonticons
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-fort-awesome fa-lg mt-4"
+          />
+          <br />
+          fort-awesome
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-forumbee fa-lg mt-4"
+          />
+          <br />
+          forumbee
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-foursquare fa-lg mt-4"
+          />
+          <br />
+          foursquare
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ge fa-lg mt-4"
+          />
+          <br />
+          ge 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-get-pocket fa-lg mt-4"
+          />
+          <br />
+          get-pocket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gg fa-lg mt-4"
+          />
+          <br />
+          gg
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gg-circle fa-lg mt-4"
+          />
+          <br />
+          gg-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-git fa-lg mt-4"
+          />
+          <br />
+          git
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-git-square fa-lg mt-4"
+          />
+          <br />
+          git-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-github fa-lg mt-4"
+          />
+          <br />
+          github
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-github-alt fa-lg mt-4"
+          />
+          <br />
+          github-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-github-square fa-lg mt-4"
+          />
+          <br />
+          github-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gittip fa-lg mt-4"
+          />
+          <br />
+          gittip 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-google fa-lg mt-4"
+          />
+          <br />
+          google
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-google-plus fa-lg mt-4"
+          />
+          <br />
+          google-plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-google-plus-square fa-lg mt-4"
+          />
+          <br />
+          google-plus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-google-wallet fa-lg mt-4"
+          />
+          <br />
+          google-wallet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-gratipay fa-lg mt-4"
+          />
+          <br />
+          gratipay
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hacker-news fa-lg mt-4"
+          />
+          <br />
+          hacker-news
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-houzz fa-lg mt-4"
+          />
+          <br />
+          houzz
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-html5 fa-lg mt-4"
+          />
+          <br />
+          html5
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-instagram fa-lg mt-4"
+          />
+          <br />
+          instagram
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-internet-explorer fa-lg mt-4"
+          />
+          <br />
+          internet-explorer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ioxhost fa-lg mt-4"
+          />
+          <br />
+          ioxhost
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-joomla fa-lg mt-4"
+          />
+          <br />
+          joomla
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-jsfiddle fa-lg mt-4"
+          />
+          <br />
+          jsfiddle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-lastfm fa-lg mt-4"
+          />
+          <br />
+          lastfm
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-lastfm-square fa-lg mt-4"
+          />
+          <br />
+          lastfm-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-leanpub fa-lg mt-4"
+          />
+          <br />
+          leanpub
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-linkedin fa-lg mt-4"
+          />
+          <br />
+          linkedin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-linkedin-square fa-lg mt-4"
+          />
+          <br />
+          linkedin-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-linux fa-lg mt-4"
+          />
+          <br />
+          linux
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-maxcdn fa-lg mt-4"
+          />
+          <br />
+          maxcdn
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-meanpath fa-lg mt-4"
+          />
+          <br />
+          meanpath
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-medium fa-lg mt-4"
+          />
+          <br />
+          medium
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-mixcloud fa-lg mt-4"
+          />
+          <br />
+          mixcloud
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-modx fa-lg mt-4"
+          />
+          <br />
+          modx
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-odnoklassniki fa-lg mt-4"
+          />
+          <br />
+          odnoklassniki
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-odnoklassniki-square fa-lg mt-4"
+          />
+          <br />
+          odnoklassniki-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-opencart fa-lg mt-4"
+          />
+          <br />
+          opencart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-openid fa-lg mt-4"
+          />
+          <br />
+          openid
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-opera fa-lg mt-4"
+          />
+          <br />
+          opera
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-optin-monster fa-lg mt-4"
+          />
+          <br />
+          optin-monster
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pagelines fa-lg mt-4"
+          />
+          <br />
+          pagelines
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-paypal fa-lg mt-4"
+          />
+          <br />
+          paypal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pied-piper fa-lg mt-4"
+          />
+          <br />
+          pied-piper
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pied-piper-alt fa-lg mt-4"
+          />
+          <br />
+          pied-piper-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pinterest fa-lg mt-4"
+          />
+          <br />
+          pinterest
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pinterest-p fa-lg mt-4"
+          />
+          <br />
+          pinterest-p
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-pinterest-square fa-lg mt-4"
+          />
+          <br />
+          pinterest-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-product-hunt fa-lg mt-4"
+          />
+          <br />
+          product-hunt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-qq fa-lg mt-4"
+          />
+          <br />
+          qq
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ra fa-lg mt-4"
+          />
+          <br />
+          ra 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-rebel fa-lg mt-4"
+          />
+          <br />
+          rebel
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reddit fa-lg mt-4"
+          />
+          <br />
+          reddit
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reddit-alien fa-lg mt-4"
+          />
+          <br />
+          reddit-alien
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-reddit-square fa-lg mt-4"
+          />
+          <br />
+          reddit-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-renren fa-lg mt-4"
+          />
+          <br />
+          renren
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-safari fa-lg mt-4"
+          />
+          <br />
+          safari
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-scribd fa-lg mt-4"
+          />
+          <br />
+          scribd
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-sellsy fa-lg mt-4"
+          />
+          <br />
+          sellsy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-alt fa-lg mt-4"
+          />
+          <br />
+          share-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-share-alt-square fa-lg mt-4"
+          />
+          <br />
+          share-alt-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-shirtsinbulk fa-lg mt-4"
+          />
+          <br />
+          shirtsinbulk
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-simplybuilt fa-lg mt-4"
+          />
+          <br />
+          simplybuilt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-skyatlas fa-lg mt-4"
+          />
+          <br />
+          skyatlas
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-skype fa-lg mt-4"
+          />
+          <br />
+          skype
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-slack fa-lg mt-4"
+          />
+          <br />
+          slack
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-slideshare fa-lg mt-4"
+          />
+          <br />
+          slideshare
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-soundcloud fa-lg mt-4"
+          />
+          <br />
+          soundcloud
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-spotify fa-lg mt-4"
+          />
+          <br />
+          spotify
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stack-exchange fa-lg mt-4"
+          />
+          <br />
+          stack-exchange
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stack-overflow fa-lg mt-4"
+          />
+          <br />
+          stack-overflow
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-steam fa-lg mt-4"
+          />
+          <br />
+          steam
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-steam-square fa-lg mt-4"
+          />
+          <br />
+          steam-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stumbleupon fa-lg mt-4"
+          />
+          <br />
+          stumbleupon
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stumbleupon-circle fa-lg mt-4"
+          />
+          <br />
+          stumbleupon-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tencent-weibo fa-lg mt-4"
+          />
+          <br />
+          tencent-weibo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-trello fa-lg mt-4"
+          />
+          <br />
+          trello
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tripadvisor fa-lg mt-4"
+          />
+          <br />
+          tripadvisor
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tumblr fa-lg mt-4"
+          />
+          <br />
+          tumblr
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-tumblr-square fa-lg mt-4"
+          />
+          <br />
+          tumblr-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-twitch fa-lg mt-4"
+          />
+          <br />
+          twitch
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-twitter fa-lg mt-4"
+          />
+          <br />
+          twitter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-twitter-square fa-lg mt-4"
+          />
+          <br />
+          twitter-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-usb fa-lg mt-4"
+          />
+          <br />
+          usb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-viacoin fa-lg mt-4"
+          />
+          <br />
+          viacoin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vimeo fa-lg mt-4"
+          />
+          <br />
+          vimeo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vimeo-square fa-lg mt-4"
+          />
+          <br />
+          vimeo-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vine fa-lg mt-4"
+          />
+          <br />
+          vine
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-vk fa-lg mt-4"
+          />
+          <br />
+          vk
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wechat fa-lg mt-4"
+          />
+          <br />
+          wechat 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-weibo fa-lg mt-4"
+          />
+          <br />
+          weibo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-weixin fa-lg mt-4"
+          />
+          <br />
+          weixin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-whatsapp fa-lg mt-4"
+          />
+          <br />
+          whatsapp
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wikipedia-w fa-lg mt-4"
+          />
+          <br />
+          wikipedia-w
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-windows fa-lg mt-4"
+          />
+          <br />
+          windows
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wordpress fa-lg mt-4"
+          />
+          <br />
+          wordpress
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-xing fa-lg mt-4"
+          />
+          <br />
+          xing
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-xing-square fa-lg mt-4"
+          />
+          <br />
+          xing-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-y-combinator fa-lg mt-4"
+          />
+          <br />
+          y-combinator
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-y-combinator-square fa-lg mt-4"
+          />
+          <br />
+          y-combinator-square 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-yahoo fa-lg mt-4"
+          />
+          <br />
+          yahoo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-yc fa-lg mt-4"
+          />
+          <br />
+          yc 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-yc-square fa-lg mt-4"
+          />
+          <br />
+          yc-square 
+          <span
+            class="text-muted"
+          >
+            (alias)
+          </span>
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-yelp fa-lg mt-4"
+          />
+          <br />
+          yelp
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-youtube fa-lg mt-4"
+          />
+          <br />
+          youtube
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-youtube-play fa-lg mt-4"
+          />
+          <br />
+          youtube-play
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-youtube-square fa-lg mt-4"
+          />
+          <br />
+          youtube-square
+        
+        </bcol-stub>
+      </brow-stub>
+       
+      <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>
+           
+          <li>
+            The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
+          </li>
+           
+          <li>
+            Brand icons should only be used to represent the company or product to which they refer.
+          </li>
+        </ul>
+      </div>
+    </bcardbody-stub>
+  </bcard-stub>
+   
+  <bcard-stub
+    bodytag="div"
+    footertag="div"
+    headertag="div"
+    id="medical"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      Medical Icons
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-ambulance fa-lg mt-4"
+          />
+          <br />
+          ambulance
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-h-square fa-lg mt-4"
+          />
+          <br />
+          h-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heart fa-lg mt-4"
+          />
+          <br />
+          heart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heart-o fa-lg mt-4"
+          />
+          <br />
+          heart-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-heartbeat fa-lg mt-4"
+          />
+          <br />
+          heartbeat
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-hospital-o fa-lg mt-4"
+          />
+          <br />
+          hospital-o
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-medkit fa-lg mt-4"
+          />
+          <br />
+          medkit
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-plus-square fa-lg mt-4"
+          />
+          <br />
+          plus-square
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-stethoscope fa-lg mt-4"
+          />
+          <br />
+          stethoscope
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-user-md fa-lg mt-4"
+          />
+          <br />
+          user-md
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          lg="2"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="fa fa-wheelchair fa-lg mt-4"
+          />
+          <br />
+          wheelchair
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+</div>
+`;
diff --git a/tests/unit/views/icons/__snapshots__/SimpleLineIcons.spec.js.snap b/tests/unit/views/icons/__snapshots__/SimpleLineIcons.spec.js.snap
new file mode 100644
index 00000000..7ce1d59c
--- /dev/null
+++ b/tests/unit/views/icons/__snapshots__/SimpleLineIcons.spec.js.snap
@@ -0,0 +1,2417 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SimpleLineIcons.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <bcard-stub
+    bodytag="div"
+    class="card-default"
+    footertag="div"
+    headertag="div"
+    nobody="true"
+    subtitletag="h6"
+    tag="div"
+    titletag="h4"
+  >
+    <div
+      slot="header"
+    >
+      <i
+        class="fa fa-picture-o"
+      />
+       Simple Line Icons
+    
+    </div>
+     
+    <bcardbody-stub
+      bodytag="div"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <brow-stub
+        class="text-center"
+        tag="div"
+      >
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-user icons font-2xl d-block mt-4"
+          />
+          icon-user
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-people icons font-2xl d-block mt-4"
+          />
+          icon-people
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-user-female icons font-2xl d-block mt-4"
+          />
+          icon-user-female
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-user-follow icons font-2xl d-block mt-4"
+          />
+          icon-user-follow
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-user-following icons font-2xl d-block mt-4"
+          />
+          icon-user-following
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-user-unfollow icons font-2xl d-block mt-4"
+          />
+          icon-user-unfollow
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-login icons font-2xl d-block mt-4"
+          />
+          icon-login
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-logout icons font-2xl d-block mt-4"
+          />
+          icon-logout
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-emotsmile icons font-2xl d-block mt-4"
+          />
+          icon-emotsmile
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-phone icons font-2xl d-block mt-4"
+          />
+          icon-phone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-call-end icons font-2xl d-block mt-4"
+          />
+          icon-call-end
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-call-in icons font-2xl d-block mt-4"
+          />
+          icon-call-in
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-call-out icons font-2xl d-block mt-4"
+          />
+          icon-call-out
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-map icons font-2xl d-block mt-4"
+          />
+          icon-map
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-location-pin icons font-2xl d-block mt-4"
+          />
+          icon-location-pin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-direction icons font-2xl d-block mt-4"
+          />
+          icon-direction
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-directions icons font-2xl d-block mt-4"
+          />
+          icon-directions
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-compass icons font-2xl d-block mt-4"
+          />
+          icon-compass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-layers icons font-2xl d-block mt-4"
+          />
+          icon-layers
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-menu icons font-2xl d-block mt-4"
+          />
+          icon-menu
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-list icons font-2xl d-block mt-4"
+          />
+          icon-list
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-options-vertical icons font-2xl d-block mt-4"
+          />
+          icon-options-vertical
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-options icons font-2xl d-block mt-4"
+          />
+          icon-options
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-down icons font-2xl d-block mt-4"
+          />
+          icon-arrow-down
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-left icons font-2xl d-block mt-4"
+          />
+          icon-arrow-left
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-right icons font-2xl d-block mt-4"
+          />
+          icon-arrow-right
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-up icons font-2xl d-block mt-4"
+          />
+          icon-arrow-up
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-up-circle icons font-2xl d-block mt-4"
+          />
+          icon-arrow-up-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-left-circle icons font-2xl d-block mt-4"
+          />
+          icon-arrow-left-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-right-circle icons font-2xl d-block mt-4"
+          />
+          icon-arrow-right-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-arrow-down-circle icons font-2xl d-block mt-4"
+          />
+          icon-arrow-down-circle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-check icons font-2xl d-block mt-4"
+          />
+          icon-check
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-clock icons font-2xl d-block mt-4"
+          />
+          icon-clock
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-plus icons font-2xl d-block mt-4"
+          />
+          icon-plus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-close icons font-2xl d-block mt-4"
+          />
+          icon-close
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-trophy icons font-2xl d-block mt-4"
+          />
+          icon-trophy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-screen-smartphone icons font-2xl d-block mt-4"
+          />
+          icon-screen-smartphone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-screen-desktop icons font-2xl d-block mt-4"
+          />
+          icon-screen-desktop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-plane icons font-2xl d-block mt-4"
+          />
+          icon-plane
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-notebook icons font-2xl d-block mt-4"
+          />
+          icon-notebook
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-mustache icons font-2xl d-block mt-4"
+          />
+          icon-mustache
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-mouse icons font-2xl d-block mt-4"
+          />
+          icon-mouse
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-magnet icons font-2xl d-block mt-4"
+          />
+          icon-magnet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-energy icons font-2xl d-block mt-4"
+          />
+          icon-energy
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-disc icons font-2xl d-block mt-4"
+          />
+          icon-disc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-cursor icons font-2xl d-block mt-4"
+          />
+          icon-cursor
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-cursor-move icons font-2xl d-block mt-4"
+          />
+          icon-cursor-move
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-crop icons font-2xl d-block mt-4"
+          />
+          icon-crop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-chemistry icons font-2xl d-block mt-4"
+          />
+          icon-chemistry
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-speedometer icons font-2xl d-block mt-4"
+          />
+          icon-speedometer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-shield icons font-2xl d-block mt-4"
+          />
+          icon-shield
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-screen-tablet icons font-2xl d-block mt-4"
+          />
+          icon-screen-tablet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          tag="div"
+        >
+           cols="6" sm="4" md="3"&gt;
+          
+          <i
+            class="icon-magic-wand icons font-2xl d-block mt-4"
+          />
+          icon-magic-wand
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-hourglass icons font-2xl d-block mt-4"
+          />
+          icon-hourglass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-graduation icons font-2xl d-block mt-4"
+          />
+          icon-graduation
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-ghost icons font-2xl d-block mt-4"
+          />
+          icon-ghost
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-game-controller icons font-2xl d-block mt-4"
+          />
+          icon-game-controller
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-fire icons font-2xl d-block mt-4"
+          />
+          icon-fire
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-eyeglass icons font-2xl d-block mt-4"
+          />
+          icon-eyeglass
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-envelope-open icons font-2xl d-block mt-4"
+          />
+          icon-envelope-open
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-envelope-letter icons font-2xl d-block mt-4"
+          />
+          icon-envelope-letter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-bell icons font-2xl d-block mt-4"
+          />
+          icon-bell
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-badge icons font-2xl d-block mt-4"
+          />
+          icon-badge
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-anchor icons font-2xl d-block mt-4"
+          />
+          icon-anchor
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-wallet icons font-2xl d-block mt-4"
+          />
+          icon-wallet
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-vector icons font-2xl d-block mt-4"
+          />
+          icon-vector
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-speech icons font-2xl d-block mt-4"
+          />
+          icon-speech
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-puzzle icons font-2xl d-block mt-4"
+          />
+          icon-puzzle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-printer icons font-2xl d-block mt-4"
+          />
+          icon-printer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-present icons font-2xl d-block mt-4"
+          />
+          icon-present
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-playlist icons font-2xl d-block mt-4"
+          />
+          icon-playlist
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-pin icons font-2xl d-block mt-4"
+          />
+          icon-pin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-picture icons font-2xl d-block mt-4"
+          />
+          icon-picture
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-handbag icons font-2xl d-block mt-4"
+          />
+          icon-handbag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-globe-alt icons font-2xl d-block mt-4"
+          />
+          icon-globe-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-globe icons font-2xl d-block mt-4"
+          />
+          icon-globe
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-folder-alt icons font-2xl d-block mt-4"
+          />
+          icon-folder-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-folder icons font-2xl d-block mt-4"
+          />
+          icon-folder
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-film icons font-2xl d-block mt-4"
+          />
+          icon-film
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-feed icons font-2xl d-block mt-4"
+          />
+          icon-feed
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-drop icons font-2xl d-block mt-4"
+          />
+          icon-drop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-drawer icons font-2xl d-block mt-4"
+          />
+          icon-drawer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-docs icons font-2xl d-block mt-4"
+          />
+          icon-docs
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-doc icons font-2xl d-block mt-4"
+          />
+          icon-doc
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-diamond icons font-2xl d-block mt-4"
+          />
+          icon-diamond
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-cup icons font-2xl d-block mt-4"
+          />
+          icon-cup
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-calculator icons font-2xl d-block mt-4"
+          />
+          icon-calculator
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-bubbles icons font-2xl d-block mt-4"
+          />
+          icon-bubbles
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-briefcase icons font-2xl d-block mt-4"
+          />
+          icon-briefcase
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-book-open icons font-2xl d-block mt-4"
+          />
+          icon-book-open
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-basket-loaded icons font-2xl d-block mt-4"
+          />
+          icon-basket-loaded
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-basket icons font-2xl d-block mt-4"
+          />
+          icon-basket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-bag icons font-2xl d-block mt-4"
+          />
+          icon-bag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-action-undo icons font-2xl d-block mt-4"
+          />
+          icon-action-undo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-action-redo icons font-2xl d-block mt-4"
+          />
+          icon-action-redo
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-wrench icons font-2xl d-block mt-4"
+          />
+          icon-wrench
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-umbrella icons font-2xl d-block mt-4"
+          />
+          icon-umbrella
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-trash icons font-2xl d-block mt-4"
+          />
+          icon-trash
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-tag icons font-2xl d-block mt-4"
+          />
+          icon-tag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-support icons font-2xl d-block mt-4"
+          />
+          icon-support
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-frame icons font-2xl d-block mt-4"
+          />
+          icon-frame
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-size-fullscreen icons font-2xl d-block mt-4"
+          />
+          icon-size-fullscreen
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-size-actual icons font-2xl d-block mt-4"
+          />
+          icon-size-actual
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-shuffle icons font-2xl d-block mt-4"
+          />
+          icon-shuffle
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-share-alt icons font-2xl d-block mt-4"
+          />
+          icon-share-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-share icons font-2xl d-block mt-4"
+          />
+          icon-share
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-rocket icons font-2xl d-block mt-4"
+          />
+          icon-rocket
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-question icons font-2xl d-block mt-4"
+          />
+          icon-question
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-pie-chart icons font-2xl d-block mt-4"
+          />
+          icon-pie-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-pencil icons font-2xl d-block mt-4"
+          />
+          icon-pencil
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-note icons font-2xl d-block mt-4"
+          />
+          icon-note
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-loop icons font-2xl d-block mt-4"
+          />
+          icon-loop
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-home icons font-2xl d-block mt-4"
+          />
+          icon-home
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-grid icons font-2xl d-block mt-4"
+          />
+          icon-grid
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-graph icons font-2xl d-block mt-4"
+          />
+          icon-graph
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-microphone icons font-2xl d-block mt-4"
+          />
+          icon-microphone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-music-tone-alt icons font-2xl d-block mt-4"
+          />
+          icon-music-tone-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-music-tone icons font-2xl d-block mt-4"
+          />
+          icon-music-tone
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-earphones-alt icons font-2xl d-block mt-4"
+          />
+          icon-earphones-alt
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-earphones icons font-2xl d-block mt-4"
+          />
+          icon-earphones
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-equalizer icons font-2xl d-block mt-4"
+          />
+          icon-equalizer
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-like icons font-2xl d-block mt-4"
+          />
+          icon-like
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-dislike icons font-2xl d-block mt-4"
+          />
+          icon-dislike
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-start icons font-2xl d-block mt-4"
+          />
+          icon-control-start
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-rewind icons font-2xl d-block mt-4"
+          />
+          icon-control-rewind
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-play icons font-2xl d-block mt-4"
+          />
+          icon-control-play
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-pause icons font-2xl d-block mt-4"
+          />
+          icon-control-pause
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-forward icons font-2xl d-block mt-4"
+          />
+          icon-control-forward
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-control-end icons font-2xl d-block mt-4"
+          />
+          icon-control-end
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-volume-1 icons font-2xl d-block mt-4"
+          />
+          icon-volume-1
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-volume-2 icons font-2xl d-block mt-4"
+          />
+          icon-volume-2
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-volume-off icons font-2xl d-block mt-4"
+          />
+          icon-volume-off
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-calendar icons font-2xl d-block mt-4"
+          />
+          icon-calendar
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-bulb icons font-2xl d-block mt-4"
+          />
+          icon-bulb
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-chart icons font-2xl d-block mt-4"
+          />
+          icon-chart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-ban icons font-2xl d-block mt-4"
+          />
+          icon-ban
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-bubble icons font-2xl d-block mt-4"
+          />
+          icon-bubble
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-camrecorder icons font-2xl d-block mt-4"
+          />
+          icon-camrecorder
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-camera icons font-2xl d-block mt-4"
+          />
+          icon-camera
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-cloud-download icons font-2xl d-block mt-4"
+          />
+          icon-cloud-download
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-cloud-upload icons font-2xl d-block mt-4"
+          />
+          icon-cloud-upload
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-envelope icons font-2xl d-block mt-4"
+          />
+          icon-envelope
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-eye icons font-2xl d-block mt-4"
+          />
+          icon-eye
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-flag icons font-2xl d-block mt-4"
+          />
+          icon-flag
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-heart icons font-2xl d-block mt-4"
+          />
+          icon-heart
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-info icons font-2xl d-block mt-4"
+          />
+          icon-info
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-key icons font-2xl d-block mt-4"
+          />
+          icon-key
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-link icons font-2xl d-block mt-4"
+          />
+          icon-link
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-lock icons font-2xl d-block mt-4"
+          />
+          icon-lock
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-lock-open icons font-2xl d-block mt-4"
+          />
+          icon-lock-open
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-magnifier icons font-2xl d-block mt-4"
+          />
+          icon-magnifier
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-magnifier-add icons font-2xl d-block mt-4"
+          />
+          icon-magnifier-add
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-magnifier-remove icons font-2xl d-block mt-4"
+          />
+          icon-magnifier-remove
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-paper-clip icons font-2xl d-block mt-4"
+          />
+          icon-paper-clip
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-paper-plane icons font-2xl d-block mt-4"
+          />
+          icon-paper-plane
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-power icons font-2xl d-block mt-4"
+          />
+          icon-power
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-refresh icons font-2xl d-block mt-4"
+          />
+          icon-refresh
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-reload icons font-2xl d-block mt-4"
+          />
+          icon-reload
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-settings icons font-2xl d-block mt-4"
+          />
+          icon-settings
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-star icons font-2xl d-block mt-4"
+          />
+          icon-star
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-symbol-female icons font-2xl d-block mt-4"
+          />
+          icon-symbol-female
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-symbol-male icons font-2xl d-block mt-4"
+          />
+          icon-symbol-male
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-target icons font-2xl d-block mt-4"
+          />
+          icon-target
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-credit-card icons font-2xl d-block mt-4"
+          />
+          icon-credit-card
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-paypal icons font-2xl d-block mt-4"
+          />
+          icon-paypal
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-tumblr icons font-2xl d-block mt-4"
+          />
+          icon-social-tumblr
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-twitter icons font-2xl d-block mt-4"
+          />
+          icon-social-twitter
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-facebook icons font-2xl d-block mt-4"
+          />
+          icon-social-facebook
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-instagram icons font-2xl d-block mt-4"
+          />
+          icon-social-instagram
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-linkedin icons font-2xl d-block mt-4"
+          />
+          icon-social-linkedin
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-pinterest icons font-2xl d-block mt-4"
+          />
+          icon-social-pinterest
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-github icons font-2xl d-block mt-4"
+          />
+          icon-social-github
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-gplus icons font-2xl d-block mt-4"
+          />
+          icon-social-gplus
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-reddit icons font-2xl d-block mt-4"
+          />
+          icon-social-reddit
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-skype icons font-2xl d-block mt-4"
+          />
+          icon-social-skype
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-dribbble icons font-2xl d-block mt-4"
+          />
+          icon-social-dribbble
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-behance icons font-2xl d-block mt-4"
+          />
+          icon-social-behance
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-foursqare icons font-2xl d-block mt-4"
+          />
+          icon-social-foursqare
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-soundcloud icons font-2xl d-block mt-4"
+          />
+          icon-social-soundcloud
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-spotify icons font-2xl d-block mt-4"
+          />
+          icon-social-spotify
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-stumbleupon icons font-2xl d-block mt-4"
+          />
+          icon-social-stumbleupon
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-youtube icons font-2xl d-block mt-4"
+          />
+          icon-social-youtube
+        
+        </bcol-stub>
+         
+        <bcol-stub
+          cols="6"
+          md="3"
+          sm="4"
+          tag="div"
+        >
+          <i
+            class="icon-social-dropbox icons font-2xl d-block mt-4"
+          />
+          icon-social-dropbox
+        
+        </bcol-stub>
+      </brow-stub>
+    </bcardbody-stub>
+  </bcard-stub>
+</div>
+`;
diff --git a/tests/unit/Alerts.spec.js b/tests/unit/views/notifications/Alerts.spec.js
similarity index 70%
rename from tests/unit/Alerts.spec.js
rename to tests/unit/views/notifications/Alerts.spec.js
index ad09ce0b..150d34d5 100644
--- a/tests/unit/Alerts.spec.js
+++ b/tests/unit/views/notifications/Alerts.spec.js
@@ -29,4 +29,14 @@ describe('Alerts.vue', () => {
     const wrapper = mount(Alerts)
     expect(wrapper.find('header.card-header > div').text()).toMatch('Bootstrap Alert docs')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Alerts)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    expect(typeof Alerts.methods.showAlert ).toEqual('function')
+    expect(Alerts.methods.showAlert()).toBeUndefined()
+    expect(typeof Alerts.methods.countDownChanged ).toEqual('function')
+    expect(Alerts.methods.countDownChanged(10)).toBeUndefined()
+  })
 })
diff --git a/tests/unit/Badges.spec.js b/tests/unit/views/notifications/Badges.spec.js
similarity index 85%
rename from tests/unit/Badges.spec.js
rename to tests/unit/views/notifications/Badges.spec.js
index b0efb25e..5c077ff2 100644
--- a/tests/unit/Badges.spec.js
+++ b/tests/unit/views/notifications/Badges.spec.js
@@ -21,4 +21,8 @@ describe('Badges.vue', () => {
     const wrapper = mount(Badges)
     expect(wrapper.find('header.card-header > div').text()).toMatch('Bootstrap Badge docs')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Badges)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Modals.spec.js b/tests/unit/views/notifications/Modals.spec.js
similarity index 88%
rename from tests/unit/Modals.spec.js
rename to tests/unit/views/notifications/Modals.spec.js
index af364c11..03bbd11c 100644
--- a/tests/unit/Modals.spec.js
+++ b/tests/unit/views/notifications/Modals.spec.js
@@ -29,4 +29,8 @@ describe('Modals.vue', () => {
     const wrapper = mount(Modals)
     expect(wrapper.find('div.card-header > div').text()).toMatch('Bootstrap Modals')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Modals)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
new file mode 100644
index 00000000..80f8a7f7
--- /dev/null
+++ b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
@@ -0,0 +1,479 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alerts.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Alert
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/alert"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-primary"
+                role="alert"
+              >
+                <!---->
+                Primary Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-secondary"
+                role="alert"
+              >
+                <!---->
+                Secondary Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-success"
+                role="alert"
+              >
+                <!---->
+                Success Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-danger"
+                role="alert"
+              >
+                <!---->
+                Danger Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-warning"
+                role="alert"
+              >
+                <!---->
+                Warning Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-info"
+                role="alert"
+              >
+                <!---->
+                Info Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-light"
+                role="alert"
+              >
+                <!---->
+                Light Alert
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-dark"
+                role="alert"
+              >
+                <!---->
+                Dark Alert
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Alert
+            
+              <small>
+                 use 
+                <code>
+                  .alert-link
+                </code>
+                 to provide links
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-primary"
+                role="alert"
+              >
+                <!---->
+                
+              Primary Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-secondary"
+                role="alert"
+              >
+                <!---->
+                
+              Secondary Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-success"
+                role="alert"
+              >
+                <!---->
+                
+              Success Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-danger"
+                role="alert"
+              >
+                <!---->
+                
+              Danger Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-warning"
+                role="alert"
+              >
+                <!---->
+                
+              Warning Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-info"
+                role="alert"
+              >
+                <!---->
+                
+              Info Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-light"
+                role="alert"
+              >
+                <!---->
+                
+              Light Alert with 
+                <a
+                  class="alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+            
+              </div>
+               
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-dark"
+                role="alert"
+              >
+                <!---->
+                
+              Dark Alert with
+              
+                <a
+                  class="alert-link"
+                  href="#"
+                  target="_self"
+                >
+                  an example link
+                </a>
+                
+              .
+            
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Alerts 
+              <small>
+                with additional content
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="alert alert-success"
+              role="alert"
+            >
+              <!---->
+              <h4
+                class="alert-heading"
+              >
+                Well done!
+              </h4>
+               
+              <p>
+                
+              Aww yeah, you successfully read this important alert message.
+              This example text is going to run a bit longer so that you can see
+              how spacing within an alert works with this kind of content.
+            
+              </p>
+               
+              <hr />
+               
+              <p
+                class="mb-0"
+              >
+                
+              Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+            
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Alerts 
+              <small>
+                dismissible
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="alert alert-info alert-dismissible"
+                role="alert"
+              >
+                <button
+                  aria-label="Close"
+                  class="close"
+                  type="button"
+                >
+                  ×
+                </button>
+                
+              Dismissible Alert!
+            
+              </div>
+               
+              <!---->
+               
+              <button
+                class="btn m-1 btn-info"
+                type="button"
+              >
+                
+            Show dismissible alert (hidden)
+          
+              </button>
+            </div>
+          </div>
+        </div>
+         
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Alerts 
+              <small>
+                auto dismissible
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <!---->
+               
+              <!---->
+               
+              <button
+                class="btn m-1 btn-info"
+                type="button"
+              >
+                
+              Show alert with timer
+            
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
new file mode 100644
index 00000000..0cf5ee5d
--- /dev/null
+++ b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badges.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+              <strong>
+                 Bootstrap Badge
+              </strong>
+               
+              <div
+                class="card-header-actions"
+              >
+                <a
+                  class="card-header-action"
+                  href="https://bootstrap-vue.js.org/docs/components/badge"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  <small
+                    class="text-muted"
+                  >
+                    docs
+                  </small>
+                </a>
+              </div>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+             
+            <div>
+              <h2>
+                Example heading 
+                <span
+                  class="badge badge-secondary"
+                >
+                  New
+                </span>
+              </h2>
+               
+              <h3>
+                Example heading 
+                <span
+                  class="badge badge-secondary"
+                >
+                  New
+                </span>
+              </h3>
+               
+              <h4>
+                Example heading 
+                <span
+                  class="badge badge-secondary"
+                >
+                  New
+                </span>
+              </h4>
+               
+              <h5>
+                Example heading 
+                <span
+                  class="badge badge-secondary"
+                >
+                  New
+                </span>
+              </h5>
+               
+              <h6>
+                Example heading 
+                <span
+                  class="badge badge-secondary"
+                >
+                  New
+                </span>
+              </h6>
+            </div>
+             
+          </div>
+          <footer
+            class="card-footer"
+          >
+            <div>
+              <button
+                class="btn btn-primary"
+                type="button"
+              >
+                
+              Notifications 
+                <span
+                  class="badge badge-light"
+                  style="position: static;"
+                >
+                  4
+                </span>
+              </button>
+            </div>
+          </footer>
+        </div>
+      </div>
+       
+      <div
+        class="col-md-6 col-12"
+      >
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Badge 
+              <small>
+                contextual variations
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+            <div>
+              <span
+                class="badge badge-primary"
+              >
+                Primary
+              </span>
+               
+              <span
+                class="badge badge-secondary"
+              >
+                Secondary
+              </span>
+               
+              <span
+                class="badge badge-success"
+              >
+                Success
+              </span>
+               
+              <span
+                class="badge badge-danger"
+              >
+                Danger
+              </span>
+               
+              <span
+                class="badge badge-warning"
+              >
+                Warning
+              </span>
+               
+              <span
+                class="badge badge-info"
+              >
+                Info
+              </span>
+               
+              <span
+                class="badge badge-light"
+              >
+                Light
+              </span>
+               
+              <span
+                class="badge badge-dark"
+              >
+                Dark
+              </span>
+            </div>
+          </div>
+        </div>
+         
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Badge 
+              <small>
+                pills
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+            <div>
+              <span
+                class="badge badge-primary badge-pill"
+              >
+                Primary
+              </span>
+               
+              <span
+                class="badge badge-secondary badge-pill"
+              >
+                Secondary
+              </span>
+               
+              <span
+                class="badge badge-success badge-pill"
+              >
+                Success
+              </span>
+               
+              <span
+                class="badge badge-danger badge-pill"
+              >
+                Danger
+              </span>
+               
+              <span
+                class="badge badge-warning badge-pill"
+              >
+                Warning
+              </span>
+               
+              <span
+                class="badge badge-info badge-pill"
+              >
+                Info
+              </span>
+               
+              <span
+                class="badge badge-light badge-pill"
+              >
+                Light
+              </span>
+               
+              <span
+                class="badge badge-dark badge-pill"
+              >
+                Dark
+              </span>
+            </div>
+          </div>
+        </div>
+         
+        <div
+          class="card"
+        >
+          <header
+            class="card-header"
+          >
+            <div>
+              <i
+                class="fa fa-align-justify"
+              />
+               Badge 
+              <small>
+                actionable
+              </small>
+            </div>
+          </header>
+          <div
+            class="card-body"
+          >
+            <div>
+              <a
+                class="badge badge-primary"
+                href="#"
+                target="_self"
+              >
+                Primary
+              </a>
+               
+              <a
+                class="badge badge-secondary"
+                href="#"
+                target="_self"
+              >
+                Secondary
+              </a>
+               
+              <a
+                class="badge badge-success"
+                href="#"
+                target="_self"
+              >
+                Success
+              </a>
+               
+              <a
+                class="badge badge-danger"
+                href="#"
+                target="_self"
+              >
+                Danger
+              </a>
+               
+              <a
+                class="badge badge-warning"
+                href="#"
+                target="_self"
+              >
+                Warning
+              </a>
+               
+              <a
+                class="badge badge-info"
+                href="#"
+                target="_self"
+              >
+                Info
+              </a>
+               
+              <a
+                class="badge badge-light"
+                href="#"
+                target="_self"
+              >
+                Light
+              </a>
+               
+              <a
+                class="badge badge-dark"
+                href="#"
+                target="_self"
+              >
+                Dark
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
new file mode 100644
index 00000000..96ddc057
--- /dev/null
+++ b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modals.vue renders correctly 1`] = `
+<div
+  class="wrapper"
+>
+  <div
+    class="animated fadeIn"
+  >
+    <brow-stub
+      tag="div"
+    >
+      <bcol-stub
+        cols="12"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          footertag="div"
+          header=<i class='fa fa-align-justify'></i> Bootstrap Modals
+          headertag="div"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Launch demo modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Launch large modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="secondary"
+          >
+            Launch small modal
+          </bbutton-stub>
+           
+          <hr />
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            Launch primary modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="success"
+          >
+            Launch success modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="warning"
+          >
+            Launch warning modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="danger"
+          >
+            Launch danger modal
+          </bbutton-stub>
+           
+          <bbutton-stub
+            activeclass="active"
+            class="mr-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            Launch info modal
+          </bbutton-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="primary"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="primary"
+    size="lg"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="primary"
+    size="sm"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    class="modal-primary"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="primary"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    class="modal-success"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="success"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    class="modal-warning"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="warning"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    class="modal-danger"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="danger"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+   
+  <bmodal-stub
+    buttonsize=""
+    canceltitle="Cancel"
+    cancelvariant="secondary"
+    class="modal-info"
+    headercloselabel="Close"
+    oktitle="OK"
+    okvariant="info"
+    size="md"
+    title="Modal title"
+    titletag="h5"
+  >
+    
+    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.
+  
+  </bmodal-stub>
+</div>
+`;
diff --git a/tests/unit/Login.spec.js b/tests/unit/views/pages/Login.spec.js
similarity index 83%
rename from tests/unit/Login.spec.js
rename to tests/unit/views/pages/Login.spec.js
index 28905e50..3be220d5 100644
--- a/tests/unit/Login.spec.js
+++ b/tests/unit/views/pages/Login.spec.js
@@ -21,4 +21,8 @@ describe('Login.vue', () => {
     const wrapper = shallowMount(Login)
     expect(wrapper.find('h1').text()).toMatch('Login')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Login)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Page404.spec.js b/tests/unit/views/pages/Page404.spec.js
similarity index 84%
rename from tests/unit/Page404.spec.js
rename to tests/unit/views/pages/Page404.spec.js
index 22f565c1..9f817b46 100644
--- a/tests/unit/Page404.spec.js
+++ b/tests/unit/views/pages/Page404.spec.js
@@ -21,4 +21,8 @@ describe('Page404.vue', () => {
     const wrapper = shallowMount(Page404)
     expect(wrapper.find('h1').text()).toMatch('404')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Page404)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Page500.spec.js b/tests/unit/views/pages/Page500.spec.js
similarity index 84%
rename from tests/unit/Page500.spec.js
rename to tests/unit/views/pages/Page500.spec.js
index 4cc27ebe..2c7cf83d 100644
--- a/tests/unit/Page500.spec.js
+++ b/tests/unit/views/pages/Page500.spec.js
@@ -21,4 +21,8 @@ describe('Page500.vue', () => {
     const wrapper = shallowMount(Page500)
     expect(wrapper.find('h1').text()).toMatch('500')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Page500)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Register.spec.js b/tests/unit/views/pages/Register.spec.js
similarity index 84%
rename from tests/unit/Register.spec.js
rename to tests/unit/views/pages/Register.spec.js
index 050b7297..e4c44ec6 100644
--- a/tests/unit/Register.spec.js
+++ b/tests/unit/views/pages/Register.spec.js
@@ -21,4 +21,8 @@ describe('Register.vue', () => {
     const wrapper = shallowMount(Register)
     expect(wrapper.find('h1').text()).toMatch('Register')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Register)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/pages/__snapshots__/Login.spec.js.snap b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
new file mode 100644
index 00000000..36d56294
--- /dev/null
+++ b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login.vue renders correctly 1`] = `
+<div
+  class="app flex-row align-items-center"
+>
+  <div
+    class="container"
+  >
+    <brow-stub
+      class="justify-content-center"
+      tag="div"
+    >
+      <bcol-stub
+        md="8"
+        tag="div"
+      >
+        <bcardgroup-stub
+          tag="div"
+        >
+          <bcard-stub
+            bodytag="div"
+            class="p-4"
+            footertag="div"
+            headertag="div"
+            nobody="true"
+            subtitletag="h6"
+            tag="div"
+            titletag="h4"
+          >
+            <bcardbody-stub
+              bodytag="div"
+              subtitletag="h6"
+              titletag="h4"
+            >
+              <bform-stub>
+                <h1>
+                  Login
+                </h1>
+                 
+                <p
+                  class="text-muted"
+                >
+                  Sign In to your account
+                </p>
+                 
+                <binputgroup-stub
+                  class="mb-3"
+                  tag="div"
+                >
+                  <binputgroupprepend-stub
+                    tag="div"
+                  >
+                    <binputgrouptext-stub
+                      tag="div"
+                    >
+                      <i
+                        class="icon-user"
+                      />
+                    </binputgrouptext-stub>
+                  </binputgroupprepend-stub>
+                   
+                  <bforminput-stub
+                    autocomplete="username email"
+                    class="form-control"
+                    placeholder="Username"
+                    type="text"
+                  />
+                </binputgroup-stub>
+                 
+                <binputgroup-stub
+                  class="mb-4"
+                  tag="div"
+                >
+                  <binputgroupprepend-stub
+                    tag="div"
+                  >
+                    <binputgrouptext-stub
+                      tag="div"
+                    >
+                      <i
+                        class="icon-lock"
+                      />
+                    </binputgrouptext-stub>
+                  </binputgroupprepend-stub>
+                   
+                  <bforminput-stub
+                    autocomplete="current-password"
+                    class="form-control"
+                    placeholder="Password"
+                    type="password"
+                  />
+                </binputgroup-stub>
+                 
+                <brow-stub
+                  tag="div"
+                >
+                  <bcol-stub
+                    cols="6"
+                    tag="div"
+                  >
+                    <bbutton-stub
+                      activeclass="active"
+                      class="px-4"
+                      event="click"
+                      exactactiveclass="active"
+                      routertag="a"
+                      target="_self"
+                      type="button"
+                      variant="primary"
+                    >
+                      Login
+                    </bbutton-stub>
+                  </bcol-stub>
+                   
+                  <bcol-stub
+                    class="text-right"
+                    cols="6"
+                    tag="div"
+                  >
+                    <bbutton-stub
+                      activeclass="active"
+                      class="px-0"
+                      event="click"
+                      exactactiveclass="active"
+                      routertag="a"
+                      target="_self"
+                      type="button"
+                      variant="link"
+                    >
+                      Forgot password?
+                    </bbutton-stub>
+                  </bcol-stub>
+                </brow-stub>
+              </bform-stub>
+            </bcardbody-stub>
+          </bcard-stub>
+           
+          <bcard-stub
+            bodytag="div"
+            class="text-white bg-primary py-5 d-md-down-none"
+            footertag="div"
+            headertag="div"
+            nobody="true"
+            subtitletag="h6"
+            tag="div"
+            titletag="h4"
+          >
+            <bcardbody-stub
+              bodytag="div"
+              class="text-center"
+              subtitletag="h6"
+              titletag="h4"
+            >
+              <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>
+                 
+                <bbutton-stub
+                  activeclass="active"
+                  class="active mt-3"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="primary"
+                >
+                  Register Now!
+                </bbutton-stub>
+              </div>
+            </bcardbody-stub>
+          </bcard-stub>
+        </bcardgroup-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
new file mode 100644
index 00000000..efb2aaee
--- /dev/null
+++ b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page404.vue renders correctly 1`] = `
+<div
+  class="app flex-row align-items-center"
+>
+  <div
+    class="container"
+  >
+    <brow-stub
+      class="justify-content-center"
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <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>
+         
+        <binputgroup-stub
+          tag="div"
+        >
+          <binputgroupprepend-stub
+            tag="div"
+          >
+            <binputgrouptext-stub
+              tag="div"
+            >
+              <i
+                class="fa fa-search"
+              />
+            </binputgrouptext-stub>
+          </binputgroupprepend-stub>
+           
+          <input
+            class="form-control"
+            id="prependedInput"
+            placeholder="What are you looking for?"
+            size="16"
+            type="text"
+          />
+           
+          <binputgroupappend-stub
+            append="true"
+            tag="div"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="info"
+            >
+              Search
+            </bbutton-stub>
+          </binputgroupappend-stub>
+        </binputgroup-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
new file mode 100644
index 00000000..e5478b3d
--- /dev/null
+++ b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page500.vue renders correctly 1`] = `
+<div
+  class="app flex-row align-items-center"
+>
+  <div
+    class="container"
+  >
+    <brow-stub
+      class="justify-content-center"
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        tag="div"
+      >
+        <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>
+         
+        <binputgroup-stub
+          tag="div"
+        >
+          <binputgroupprepend-stub
+            tag="div"
+          >
+            <binputgrouptext-stub
+              tag="div"
+            >
+              <i
+                class="fa fa-search"
+              />
+            </binputgrouptext-stub>
+          </binputgroupprepend-stub>
+           
+          <input
+            class="form-control"
+            id="prependedInput"
+            placeholder="What are you looking for?"
+            size="16"
+            type="text"
+          />
+           
+          <binputgroupappend-stub
+            append="true"
+            tag="div"
+          >
+            <bbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="info"
+            >
+              Search
+            </bbutton-stub>
+          </binputgroupappend-stub>
+        </binputgroup-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/pages/__snapshots__/Register.spec.js.snap b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
new file mode 100644
index 00000000..cc0d919a
--- /dev/null
+++ b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Register.vue renders correctly 1`] = `
+<div
+  class="app flex-row align-items-center"
+>
+  <div
+    class="container"
+  >
+    <brow-stub
+      class="justify-content-center"
+      tag="div"
+    >
+      <bcol-stub
+        md="6"
+        sm="8"
+        tag="div"
+      >
+        <bcard-stub
+          bodytag="div"
+          class="mx-4"
+          footertag="div"
+          headertag="div"
+          nobody="true"
+          subtitletag="h6"
+          tag="div"
+          titletag="h4"
+        >
+          <bcardbody-stub
+            bodytag="div"
+            class="p-4"
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <bform-stub>
+              <h1>
+                Register
+              </h1>
+               
+              <p
+                class="text-muted"
+              >
+                Create your account
+              </p>
+               
+              <binputgroup-stub
+                class="mb-3"
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    <i
+                      class="icon-user"
+                    />
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  autocomplete="username"
+                  class="form-control"
+                  placeholder="Username"
+                  type="text"
+                />
+              </binputgroup-stub>
+               
+              <binputgroup-stub
+                class="mb-3"
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    @
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  autocomplete="email"
+                  class="form-control"
+                  placeholder="Email"
+                  type="text"
+                />
+              </binputgroup-stub>
+               
+              <binputgroup-stub
+                class="mb-3"
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    <i
+                      class="icon-lock"
+                    />
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  autocomplete="new-password"
+                  class="form-control"
+                  placeholder="Password"
+                  type="password"
+                />
+              </binputgroup-stub>
+               
+              <binputgroup-stub
+                class="mb-4"
+                tag="div"
+              >
+                <binputgroupprepend-stub
+                  tag="div"
+                >
+                  <binputgrouptext-stub
+                    tag="div"
+                  >
+                    <i
+                      class="icon-lock"
+                    />
+                  </binputgrouptext-stub>
+                </binputgroupprepend-stub>
+                 
+                <bforminput-stub
+                  autocomplete="new-password"
+                  class="form-control"
+                  placeholder="Repeat password"
+                  type="password"
+                />
+              </binputgroup-stub>
+               
+              <bbutton-stub
+                activeclass="active"
+                block="true"
+                event="click"
+                exactactiveclass="active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="success"
+              >
+                Create Account
+              </bbutton-stub>
+            </bform-stub>
+          </bcardbody-stub>
+           
+          <bcardfooter-stub
+            class="p-4"
+            footertag="div"
+          >
+            <brow-stub
+              tag="div"
+            >
+              <bcol-stub
+                cols="6"
+                tag="div"
+              >
+                <bbutton-stub
+                  activeclass="active"
+                  block="true"
+                  class="btn btn-facebook"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                >
+                  <span>
+                    facebook
+                  </span>
+                </bbutton-stub>
+              </bcol-stub>
+               
+              <bcol-stub
+                cols="6"
+                tag="div"
+              >
+                <bbutton-stub
+                  activeclass="active"
+                  block="true"
+                  class="btn btn-twitter"
+                  event="click"
+                  exactactiveclass="active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                >
+                  <span>
+                    twitter
+                  </span>
+                </bbutton-stub>
+              </bcol-stub>
+            </brow-stub>
+          </bcardfooter-stub>
+        </bcard-stub>
+      </bcol-stub>
+    </brow-stub>
+  </div>
+</div>
+`;
diff --git a/tests/unit/Colors.spec.js b/tests/unit/views/theme/Colors.spec.js
similarity index 85%
rename from tests/unit/Colors.spec.js
rename to tests/unit/views/theme/Colors.spec.js
index 92abb666..09e84821 100644
--- a/tests/unit/Colors.spec.js
+++ b/tests/unit/views/theme/Colors.spec.js
@@ -21,4 +21,8 @@ describe('Colors.vue', () => {
     const wrapper = mount(Colors)
     expect(wrapper.find('header.card-header > div').text()).toMatch('Theme colors')
   })
+  test('renders correctly', () => {
+    const wrapper = mount(Colors)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/Typography.spec.js b/tests/unit/views/theme/Typography.spec.js
similarity index 84%
rename from tests/unit/Typography.spec.js
rename to tests/unit/views/theme/Typography.spec.js
index 4462420a..abe34754 100644
--- a/tests/unit/Typography.spec.js
+++ b/tests/unit/views/theme/Typography.spec.js
@@ -21,4 +21,8 @@ describe('Typography.vue', () => {
     const wrapper = shallowMount(Typography)
     expect(wrapper.find('.card-header').text()).toMatch('Headings')
   })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Typography)
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
new file mode 100644
index 00000000..7fd49b2a
--- /dev/null
+++ b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
@@ -0,0 +1,1387 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Colors.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <div
+    class="card"
+  >
+    <header
+      class="card-header"
+    >
+      <div>
+        <i
+          class="icon-drop"
+        />
+         Theme colors
+    
+      </div>
+    </header>
+    <div
+      class="card-body"
+    >
+       
+      <div
+        class="card-body"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-primary"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Primary Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-secondary"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Secondary Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-success"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Success Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-danger"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Danger Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-warning"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Warning Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-info"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Info Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-light"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Light Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-dark"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Dark Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <header
+      class="card-header"
+    >
+      <div>
+        <i
+          class="icon-drop"
+        />
+         Grays
+    
+      </div>
+    </header>
+    <div
+      class="card-body"
+    >
+       
+      <div
+        class="card-body"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-100"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 100 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-200"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 200 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-300"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 300 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-400"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 400 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-500"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 500 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-600"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 600 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-700"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 700 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-800"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 800 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-900"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand 900 Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <header
+      class="card-header"
+    >
+      <div>
+        <i
+          class="icon-drop"
+        />
+         Additional colors
+    
+      </div>
+    </header>
+    <div
+      class="card-body"
+    >
+       
+      <div
+        class="card-body"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-blue"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Blue Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-indigo"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Indigo Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-purple"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Purple Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-pink"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Pink Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-red"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Red Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-orange"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Orange Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-yellow"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Yellow Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-green"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Green Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-teal"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Teal Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+           
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
+          >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-cyan"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Cyan Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap b/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
new file mode 100644
index 00000000..bd15895b
--- /dev/null
+++ b/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap
@@ -0,0 +1,502 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography.vue renders correctly 1`] = `
+<div
+  class="animated fadeIn"
+>
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      
+      Headings
+    
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <p>
+        Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
+      </p>
+       
+      <table
+        class="table"
+      >
+        <thead>
+          <tr>
+            <th>
+              Heading
+            </th>
+             
+            <th>
+              Example
+            </th>
+          </tr>
+        </thead>
+         
+        <tbody>
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h1&gt;&lt;/h1&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h1"
+              >
+                h1. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h2&gt;&lt;/h2&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h2"
+              >
+                h2. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h3&gt;&lt;/h3&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h3"
+              >
+                h3. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h4&gt;&lt;/h4&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h4"
+              >
+                h4. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h5&gt;&lt;/h5&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h5"
+              >
+                h5. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="highlighter-rouge"
+                >
+                  &lt;h6&gt;&lt;/h6&gt;
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="h6"
+              >
+                h6. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      
+      Headings
+    
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <p>
+        <code
+          class="highlighter-rouge"
+        >
+          .h1
+        </code>
+         through 
+        <code
+          class="highlighter-rouge"
+        >
+          .h6
+        </code>
+         classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+      </p>
+       
+      <div
+        class="bd-example"
+      >
+        <p
+          class="h1"
+        >
+          h1. Bootstrap heading
+        </p>
+         
+        <p
+          class="h2"
+        >
+          h2. Bootstrap heading
+        </p>
+         
+        <p
+          class="h3"
+        >
+          h3. Bootstrap heading
+        </p>
+         
+        <p
+          class="h4"
+        >
+          h4. Bootstrap heading
+        </p>
+         
+        <p
+          class="h5"
+        >
+          h5. Bootstrap heading
+        </p>
+         
+        <p
+          class="h6"
+        >
+          h6. Bootstrap heading
+        </p>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      
+      Display headings
+    
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <p>
+        Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a 
+        <strong>
+          display heading
+        </strong>
+        —a larger, slightly more opinionated heading style.
+      </p>
+       
+      <div
+        class="bd-example bd-example-type"
+      >
+        <table
+          class="table"
+        >
+          <tbody>
+            <tr>
+              <td>
+                <span
+                  class="display-1"
+                >
+                  Display 1
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="display-2"
+                >
+                  Display 2
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="display-3"
+                >
+                  Display 3
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="display-4"
+                >
+                  Display 4
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      
+      Inline text elements
+    
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <p>
+        Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a 
+        <strong>
+          display heading
+        </strong>
+        —a larger, slightly more opinionated heading style.
+      </p>
+       
+      <div
+        class="bd-example"
+      >
+        <p>
+          You can use the mark tag to 
+          <mark>
+            highlight
+          </mark>
+           text.
+        </p>
+         
+        <p>
+          <del>
+            This line of text is meant to be treated as deleted text.
+          </del>
+        </p>
+         
+        <p>
+          <s>
+            This line of text is meant to be treated as no longer accurate.
+          </s>
+        </p>
+         
+        <p>
+          <ins>
+            This line of text is meant to be treated as an addition to the document.
+          </ins>
+        </p>
+         
+        <p>
+          <u>
+            This line of text will render as underlined
+          </u>
+        </p>
+         
+        <p>
+          <small>
+            This line of text is meant to be treated as fine print.
+          </small>
+        </p>
+         
+        <p>
+          <strong>
+            This line rendered as bold text.
+          </strong>
+        </p>
+         
+        <p>
+          <em>
+            This line rendered as italicized text.
+          </em>
+        </p>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="card"
+  >
+    <div
+      class="card-header"
+    >
+      
+      Description list alignment
+    
+    </div>
+     
+    <div
+      class="card-body"
+    >
+      <p>
+        Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a 
+        <code
+          class="highlighter-rouge"
+        >
+          .text-truncate
+        </code>
+         class to truncate the text with an ellipsis.
+      </p>
+       
+      <div
+        class="bd-example"
+      >
+        <dl
+          class="row"
+        >
+          <dt
+            class="col-sm-3"
+          >
+            Description lists
+          </dt>
+           
+          <dd
+            class="col-sm-9"
+          >
+            A description list is perfect for defining terms.
+          </dd>
+           
+          <dt
+            class="col-sm-3"
+          >
+            Euismod
+          </dt>
+           
+          <dd
+            class="col-sm-9"
+          >
+            <p>
+              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+            </p>
+             
+            <p>
+              Donec id elit non mi porta gravida at eget metus.
+            </p>
+          </dd>
+           
+          <dt
+            class="col-sm-3"
+          >
+            Malesuada porta
+          </dt>
+           
+          <dd
+            class="col-sm-9"
+          >
+            Etiam porta sem malesuada magna mollis euismod.
+          </dd>
+           
+          <dt
+            class="col-sm-3 text-truncate"
+          >
+            Truncated term is truncated
+          </dt>
+           
+          <dd
+            class="col-sm-9"
+          >
+            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+          </dd>
+           
+          <dt
+            class="col-sm-3"
+          >
+            Nesting
+          </dt>
+           
+          <dd
+            class="col-sm-9"
+          >
+            <dl
+              class="row"
+            >
+              <dt
+                class="col-sm-4"
+              >
+                Nested definition list
+              </dt>
+               
+              <dd
+                class="col-sm-8"
+              >
+                Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+              </dd>
+            </dl>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/unit/User.spec.js b/tests/unit/views/users/User.spec.js
similarity index 76%
rename from tests/unit/User.spec.js
rename to tests/unit/views/users/User.spec.js
index 2e9bab4f..7f414ecb 100644
--- a/tests/unit/User.spec.js
+++ b/tests/unit/views/users/User.spec.js
@@ -44,4 +44,20 @@ describe('User.vue', () => {
     })
     expect(wrapper.find('div.card-header').text()).toMatch(caption)
   })
+  it('should have methods', () => {
+    const wrapper = shallowMount(User,{
+      localVue,
+      router
+    })
+
+    expect(typeof User.methods.goBack ).toEqual('function')
+    expect(wrapper.vm.goBack()).toBeUndefined()
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(User, {
+      localVue,
+        router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/tests/unit/views/users/Users.spec.js b/tests/unit/views/users/Users.spec.js
new file mode 100644
index 00000000..d3522d54
--- /dev/null
+++ b/tests/unit/views/users/Users.spec.js
@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Users from '@/views/users/Users'
+import VueRouter from 'vue-router';
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+localVue.use(BootstrapVue)
+
+describe('Users.vue', () => {
+  it('has a name', () => {
+    expect(Users.name).toMatch('Users')
+  })
+  it('has a created hook', () => {
+    expect(typeof Users.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Users.data).toMatch('function')
+    const defaultData = Users.data()
+    expect(defaultData.currentPage).toBe(1)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Users,{
+      localVue,
+      router
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Users', () => {
+    const wrapper = shallowMount(Users,{
+      localVue,
+      router
+    })
+    expect(wrapper.is(Users)).toBe(true)
+  })
+  it('renders props.caption when passed', () => {
+    const caption = 'Users List'
+    const wrapper = mount(Users, {
+      propsData: { caption },
+      localVue,
+      router
+    })
+    expect(wrapper.find('div.card-header > div').text()).toMatch(caption)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Users, {
+      localVue,
+      router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    const wrapper = shallowMount(Users,{
+      localVue,
+      router
+    })
+
+    expect(typeof Users.methods.userLink  ).toEqual('function')
+    expect(Users.methods.userLink(42)).toBe('users/42')
+    expect(typeof Users.methods.rowClicked ).toEqual('function')
+    expect(wrapper.vm.rowClicked({id:42})).toBeUndefined()
+  })
+})
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
new file mode 100644
index 00000000..8757ed32
--- /dev/null
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User.vue renders correctly 1`] = `
+<brow-stub
+  tag="div"
+>
+  <bcol-stub
+    cols="12"
+    lg="6"
+    tag="div"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      headertag="div"
+      no-header=""
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <template>
+        
+        User id:  
+      
+      </template>
+       
+      <btable-stub
+        apiurl=""
+        currentpage="1"
+        emptyfilteredtext="There are no records matching your request"
+        emptytext="There are no records to show"
+        fields="[object Object],[object Object]"
+        fixed="true"
+        footvariant=""
+        headvariant=""
+        items="[object Object]"
+        labelsortasc="Click to sort Ascending"
+        labelsortdesc="Click to sort Descending"
+        perpage="0"
+        responsive="sm"
+        small="true"
+        sortdirection="asc"
+        striped="true"
+        value=""
+      />
+       
+      <template>
+        <bbutton-stub
+          activeclass="active"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+        >
+          Back
+        </bbutton-stub>
+      </template>
+    </bcard-stub>
+  </bcol-stub>
+</brow-stub>
+`;
diff --git a/tests/unit/views/users/__snapshots__/Users.spec.js.snap b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
new file mode 100644
index 00000000..5ae65591
--- /dev/null
+++ b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Users.vue renders correctly 1`] = `
+<brow-stub
+  tag="div"
+>
+  <bcol-stub
+    cols="12"
+    tag="div"
+    xl="6"
+  >
+    <bcard-stub
+      bodytag="div"
+      footertag="div"
+      header="Users"
+      headertag="div"
+      name="slide"
+      subtitletag="h6"
+      tag="div"
+      titletag="h4"
+    >
+      <btable-stub
+        apiurl=""
+        currentpage="1"
+        emptyfilteredtext="There are no records matching your request"
+        emptytext="There are no records to show"
+        fields="[object Object],[object Object],[object Object],[object Object],[object Object]"
+        footvariant=""
+        headvariant=""
+        hover="true"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        labelsortasc="Click to sort Ascending"
+        labelsortdesc="Click to sort Descending"
+        perpage="5"
+        responsive="sm"
+        sortdirection="asc"
+        striped="true"
+        value=""
+      />
+       
+      <nav>
+        <bpagination-stub
+          hide-goto-end-buttons=""
+          next-text="Next"
+          perpage="5"
+          prev-text="Prev"
+          size="sm"
+          totalrows="26"
+        />
+      </nav>
+    </bcard-stub>
+  </bcol-stub>
+</brow-stub>
+`;

From 01c2f7ad1b5605d13a4e9a2857fdd65355f337df Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 15:03:57 +0200
Subject: [PATCH 6/7] chore: dependencies update

- chore: update `@coreui/coreui` to `2.0.20`
- chore: update `chart.js` to `2.7.3`
- chore: update `@vue/cli-plugin-babel` to `3.0.5`
- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.5`
- chore: update `@vue/cli-plugin-eslint` to `3.0.5`
- chore: update `@vue/cli-plugin-unit-jest` to `3.0.5`
- chore: update `@vue/cli-service` to `3.0.5`
- chore: update `node-sass` to `4.9.4`
---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 3070256a..e3354d97 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,13 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.14",
+    "@coreui/coreui": "^2.0.20",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
     "@coreui/vue": "^2.0.2",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "chart.js": "^2.7.2",
+    "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
     "flag-icon-css": "^3.2.0",
@@ -33,17 +33,17 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-plugin-unit-jest": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.17"
   },

From fdff4fb060c1ab7acc87d55c3fe054b11451261d Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 19 Oct 2018 15:15:36 +0200
Subject: [PATCH 7/7] Ship: v2.0.2

---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8c98fa3..e4154a0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,21 @@
 ## [CoreUI for Vue.js](./README.md) version `changelog`
 
+##### `v2.0.2`
+- refactor: extract random() to `shared/utils`
+- refactor: extract shuffleArray() to shared/utils
+- refactor: Tables pass items as props to Table
+- refactor: some views minor cleanup
+- tests(e2e): add some more test cases
+- tests(unit): add some more test cases and snapshots
+- chore: update `@coreui/coreui` to `2.0.20`
+- chore: update `chart.js` to `2.7.3`
+- chore: update `@vue/cli-plugin-babel` to `3.0.5`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.5`
+- chore: update `@vue/cli-plugin-eslint` to `3.0.5`
+- chore: update `@vue/cli-plugin-unit-jest` to `3.0.5`
+- chore: update `@vue/cli-service` to `3.0.5`
+- chore: update `node-sass` to `4.9.4`
+
 ##### `v2.0.1`
 - refactor(Modals): add spacing
 - refactor(BrandButtons): add spacing
diff --git a/package.json b/package.json
index e3354d97..00b14eaf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",