diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 69c1d81f..13b301fb 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -8,8 +8,10 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" target="_blank"><small class="text-muted">docs</small></a>
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                  <small class="text-muted">docs</small>
+                </a>
               </div>
             </div>
             <b-breadcrumb :items="items"/>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index a1c77ae6..7cceccc0 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -203,7 +203,21 @@
         </b-card>
       </b-col>
       <b-col sm="6" md="4">
-        <b-card header="Card title" class="bg-secondary">
+        <b-card class="bg-secondary">
+          <div slot="header">
+            Card with header actions
+            <div class="card-header-actions">
+              <b-link href="#" class="card-header-action btn-setting">
+                <i class="icon-settings"></i>
+              </b-link>
+              <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
+                <i class="icon-arrow-up"></i>
+              </b-link>
+              <b-link href="#" class="card-header-action btn-close">
+                <i class="icon-close"></i>
+              </b-link>
+            </div>
+          </div>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </b-card>
       </b-col>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 240eb62c..4c0ea2ea 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -2,14 +2,16 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <b-row>
-        <b-col cols="12">
+        <b-col md="12" lg="9" >
           <b-card
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/carousel" target="_blank"><small class="text-muted">docs</small></a>
+              <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>
+                </a>
               </div>
             </div>
             <div>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index b15cab21..51ad6078 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -8,8 +8,10 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/collapse" target="_blank"><small class="text-muted">docs</small></a>
+              <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>
+                </a>
               </div>
             </div>
             <div>
@@ -31,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 -->
@@ -56,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>
@@ -73,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"
@@ -122,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 5ce1cb8a..f9b3ba57 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -951,10 +951,16 @@
         <b-card no-body>
           <div slot="header">
             <i class="fa fa-edit"></i> Form Elements
-            <div class="card-actions">
-              <a href="#" class="btn btn-setting"><i class="icon-settings"></i></a>
-              <b-btn class="btn btn-minimize" v-b-toggle.collapse1><i class="icon-arrow-up"></i></b-btn>
-              <a href="#" class="btn btn-close"><i class="icon-close"></i></a>
+            <div class="card-header-actions">
+              <b-link href="#" class="card-header-action btn-setting">
+                <i class="icon-settings"></i>
+              </b-link>
+              <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
+                <i class="icon-arrow-up"></i>
+              </b-link>
+              <b-link href="#" class="card-header-action btn-close">
+                <i class="icon-close"></i>
+              </b-link>
             </div>
           </div>
           <b-collapse id="collapse1" visible>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 562ed01d..83f08926 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 147207d4..4596f079 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -8,8 +8,8 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/list-group" target="_blank">
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index f5e6ed58..00f69cad 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/navbar" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 9654c33d..58d9a377 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/nav" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 246862a3..476fb628 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
@@ -65,11 +65,6 @@
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
           <small>navigation</small>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
         </div>
         <div>
           <h6>Default</h6>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 33a44b4f..303bbccc 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index d6e884ba..984c7c66 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -6,8 +6,8 @@
         footer-tag="footer">
         <div slot="header">
           <i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/progress" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 3add0d3b..d435b5ed 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -6,8 +6,8 @@
         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>
-          <div class="card-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" target="_blank">
+          <div class="card-header-actions">
+            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
           </div>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index d0bd7296..2dc95ab1 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -8,8 +8,8 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/button-group" target="_blank">
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
@@ -112,11 +112,11 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
-                <div class="card-actions">
-                  <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" target="_blank">
-                    <small class="text-muted">docs</small>
-                  </a>
-                </div>
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                  <small class="text-muted">docs</small>
+                </a>
+              </div>
             </div>
             <div>
               <b-button-toolbar key-nav aria-label="Toolbar with button groups">
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index d10bc681..83fc4601 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -8,8 +8,10 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/dropdown" target="_blank"><small class="text-muted">docs</small></a>
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                  <small class="text-muted">docs</small>
+                </a>
               </div>
             </div>
             <div>
@@ -175,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/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index c96792af..35643cad 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -8,8 +8,8 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Alert</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank">
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
               </div>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index a79842ad..57c7356c 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -8,8 +8,10 @@
             footer-tag="footer">
             <div slot="header">
               <i class="fa fa-align-justify"></i> <strong>Bootstrap Badge</strong>
-              <div class="card-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/badge" target="_blank"><small class="text-muted">docs</small></a>
+              <div class="card-header-actions">
+                <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                  <small class="text-muted">docs</small>
+                </a>
               </div>
             </div>
             <div>