diff --git a/CHANGELOG.md b/CHANGELOG.md
index 501a1bad..78e9c299 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ##### `v2.0.0-rc.0`
 - test(unit): add some views testing 
 - test(e2e): add testing for mobile `sidebar-show` 
+- refactor: card headers margins
 - chore: update `vue` to `2.5.17`
 - chore: update `vue-template-compiler` to `2.5.17`
 - chore: update `@vue/cli-plugin-babel` to `3.0.1`
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index da654df3..1747e542 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index e7907bb9..202c0dff 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 7f716f34..277d2959 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -33,7 +33,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-b-toggle</code> directive</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
             </div>
             <div>
               <!-- Using modifiers -->
@@ -58,7 +58,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>visibility</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
             </div>
             <div>
               <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
@@ -75,7 +75,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-model</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
             </div>
             <div>
               <b-btn @click="showCollapse = !showCollapse"
@@ -99,7 +99,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
             </div>
             <div>
               <!-- Single button triggers two b-collapse components -->
@@ -124,7 +124,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small><code>accordion</code> support</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
             </div>
             <div role="tablist">
               <b-card no-body class="mb-1">
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 1fcc8dbf..8fe005b4 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -4,7 +4,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Credit Card</strong> <small>Form</small>
+            <strong>Credit Card </strong> <small>Form</small>
           </div>
           <b-row>
             <b-col sm="12">
@@ -53,7 +53,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Company</strong> <small>Form</small>
+            <strong>Company </strong><small>Form</small>
           </div>
           <b-form-group>
             <label for="company">Company</label>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 4b87d0c8..b7e041f3 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -27,7 +27,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>with slots</small>
             </div>
             <div>
@@ -57,7 +57,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>variants</small>
             </div>
             <div>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 3e6a96a1..e8a037f5 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -28,7 +28,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
             </div>
             <b-list-group>
               <b-list-group-item>Cras justo odio</b-list-group-item>
@@ -46,7 +46,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
             </div>
             <b-list-group>
               <b-list-group-item disabled>Cras justo odio</b-list-group-item>
@@ -62,7 +62,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
@@ -79,7 +79,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
             </div>
             <b-list-group>
               <b-list-group-item button>Button item</b-list-group-item>
@@ -94,7 +94,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
             </div>
             <b-list-group>
               <b-list-group-item class="d-flex justify-content-between align-items-center">
@@ -119,7 +119,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
             </div>
             <b-list-group>
               <b-list-group-item>This is a default list group item</b-list-group-item>
@@ -139,7 +139,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#">This is a default list group item</b-list-group-item>
@@ -161,7 +161,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
             </div>
             <b-card-group deck>
               <b-card header="<b>Card with list group</b>">
@@ -200,7 +200,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#" active class="flex-column align-items-start">
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 71d06712..83e629c2 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -57,7 +57,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>brand</small>
         </div>
         <div>
@@ -74,7 +74,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>text</small>
         </div>
         <div>
@@ -93,7 +93,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>dropdown</small>
         </div>
         <div>
@@ -123,7 +123,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>form</small>
         </div>
         <div>
@@ -139,7 +139,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>input group</small>
         </div>
         <div>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 256f10d5..3d902c9f 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -25,7 +25,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
         </div>
         <div>
           <b-nav tabs>
@@ -40,7 +40,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
         </div>
         <div>
           <b-nav pills>
@@ -55,7 +55,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
         </div>
         <div>
           <b-nav fill tabs>
@@ -70,7 +70,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
         </div>
         <div>
           <b-nav justified tabs>
@@ -85,7 +85,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
         </div>
         <div>
           <b-nav pills>
@@ -104,7 +104,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
         </div>
         <div>
           <b-nav vertical class="w-25">
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 11bebdcf..fadafd93 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -37,7 +37,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>alignment</small>
         </div>
         <div>
@@ -63,7 +63,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>navigation</small>
         </div>
         <div>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 1706eba0..17db010e 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -35,7 +35,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>placement</small>
         </div>
         <div class="my-3">
@@ -59,7 +59,7 @@
               header-tag="header"
               footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>via properties or slots</small>
         </div>
         <b-row>
@@ -86,7 +86,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>show</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -106,7 +106,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>open/close events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -127,7 +127,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>enable/disable events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -148,7 +148,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
         </div>
         <b-row>
           <b-col md="3" class="py-3 text-center">
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index d95d3cad..a3858341 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -26,18 +26,18 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>labels</small>
+          <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
         </div>
         <div>
-          <h5>No label</h5>
+          <h6>No label</h6>
           <b-progress :value="value" :max="max2" class="mb-3"></b-progress>
-          <h5>Value label</h5>
+          <h6>Value label</h6>
           <b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
-          <h5>Progress label</h5>
+          <h6>Progress label</h6>
           <b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
-          <h5>Value label with precision</h5>
+          <h6>Value label with precision</h6>
           <b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
-          <h5>Progress label with precision</h5>
+          <h6>Progress label with precision</h6>
           <b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
         </div>
       </b-card>
@@ -45,12 +45,12 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>width</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
         </div>
         <div>
-          <h5>Default width</h5>
+          <h6>Default width</h6>
           <b-progress :value="value3" class="mb-3"></b-progress>
-          <h5>Custom widths</h5>
+          <h6>Custom widths</h6>
           <b-progress :value="value3" class="w-75 mb-2"></b-progress>
           <b-progress :value="value3" class="w-50 mb-2"></b-progress>
           <b-progress :value="value3" class="w-25"></b-progress>
@@ -60,12 +60,12 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>height</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
         </div>
         <div>
-          <h5>Default height</h5>
+          <h6>Default height</h6>
           <b-progress :value="value3" show-progress class="mb-3"></b-progress>
-          <h5>Custom heights</h5>
+          <h6>Custom heights</h6>
           <b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
           <b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
           <b-progress height="2px" :value="value3"></b-progress>
@@ -75,7 +75,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>variants</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
         </div>
         <div>
           <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
@@ -93,7 +93,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>striped</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
         </div>
         <div>
           <b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
@@ -109,7 +109,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>animated</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
         </div>
         <div>
           <b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
@@ -125,7 +125,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>multiple bars</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
         </div>
         <div>
           <b-progress :max="max3" class="mb-3">
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 7eed3345..cf3ff84d 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -32,7 +32,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
         </div>
         <b-row>
           <b-col md="6" class="py-4 text-center">
@@ -55,7 +55,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>show</code>prop</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
         </div>
         <div class="text-center">
           <b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
@@ -71,14 +71,14 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>open close</code>events</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
             <b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
           </div>
           <div class="p-2">
-            <b-btn class="px-1" @click="onOpen">Open</b-btn>
+            <b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
             <b-btn class="px-1" @click="onClose">Close</b-btn>
           </div>
 
@@ -91,14 +91,14 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>enable disable</code>events</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
             <b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
           </div>
           <div class="p-2">
-            <b-btn @click="disabled = !disabled">
+            <b-btn @click="disabled = !disabled" class="mr-1">
               {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
             </b-btn>
 
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 84320ad1..65fc114b 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -4,9 +4,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+            <strong>Brand Button</strong>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <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>
             <b-button size="sm" class="btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
             <b-button size="sm" class="btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -62,7 +64,7 @@
             <b-button variant="foursquare" class="btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
             <b-button variant="vimeo" class="btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook" class="btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
             <b-button size="lg" variant="twitter" class="btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -95,9 +97,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Only icons. Usage ex.</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>
+            <strong>Brand Button </strong> <small>Icons only</small>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <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>
             <b-button size="sm" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
             <b-button size="sm" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -153,7 +157,7 @@
             <b-button variant="foursquare icon" class="btn-brand"><i class="fa fa-foursquare"></i></b-button>
             <b-button variant="vimeo icon" class="btn-brand"><i class="fa fa-vimeo"></i></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
             <b-button size="lg" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -187,9 +191,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Only text. Usage ex.</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>
+            <strong>Brand Button </strong> <small>Text only</small>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <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>
             <b-button size="sm" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
             <b-button size="sm" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -245,7 +251,7 @@
             <b-button variant="foursquare text" class="btn-brand"><span>Forsquare</span></b-button>
             <b-button variant="vimeo text" class="btn-brand"><span>Vimeo</span></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
             <b-button size="lg" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -281,7 +287,7 @@
 
 <script>
 export default {
-  name: 'social-buttons'
+  name: 'brand-buttons'
 }
 </script>
 
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 493a764b..ffff12cb 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -39,7 +39,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> sizing
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
             </div>
             <div>
               <b-button-group>
@@ -67,7 +67,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> dropdown support
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
             </div>
             <div>
               <b-button-group>
@@ -95,7 +95,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> vertical variation
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
             </div>
             <div>
               <b-button-group vertical>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index dfdf1122..b00ee89b 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -54,7 +54,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>positioning</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
             </div>
             <div>
               <b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
@@ -98,7 +98,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>hidden caret</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
             </div>
             <div>
               <b-dropdown variant="link" size="lg" no-caret>
@@ -118,7 +118,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>sizing</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
             </div>
             <div>
               <b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
@@ -152,7 +152,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>headers and accessibility</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
             </div>
             <div>
               <b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
@@ -177,7 +177,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small><code>variant</code></small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
             </div>
             <b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
               <b-dropdown-item>First Action</b-dropdown-item>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index a630809e..b2b34c2f 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -686,3 +686,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .btn.disabled {
+    cursor: auto;
+  }
+</style>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index c33bc278..c12872b1 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Alert</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 9ccb4d96..2f42b188 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Badge</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>