From e086d289466f08711c7833d6998bd62c713658dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Fri, 27 Aug 2021 00:06:00 +0200
Subject: [PATCH] refactor: update examples

---
 src/views/Dashboard.vue                    |    2 +-
 src/views/base/ListGroups.vue              |  517 ++++---
 src/views/base/Navs.vue                    |  601 ++++----
 src/views/base/Popovers.vue                |   94 +-
 src/views/base/Spinners.vue                |  133 ++
 src/views/base/Tooltips.vue                |   98 +-
 src/views/buttons/BrandButtons.vue         |   81 --
 src/views/buttons/ButtonDropdowns.vue      |  305 ----
 src/views/buttons/ButtonGroups.vue         |  601 +++++---
 src/views/buttons/Buttons.vue              |  606 +++++---
 src/views/buttons/Dropdowns.vue            |  364 +++++
 src/views/charts/CChartDoughnutExample.vue |    4 +-
 src/views/charts/CChartPieExample.vue      |    4 +-
 src/views/forms/ChecksRadios.vue           |   18 +-
 src/views/forms/FormControl.vue            |   38 +-
 src/views/notifications/Alerts.vue         |  213 ++-
 src/views/notifications/Badges.vue         |  129 +-
 src/views/notifications/Modals.vue         | 1449 ++++++++++++++------
 src/views/widgets/Widgets.vue              |    2 +-
 19 files changed, 3459 insertions(+), 1800 deletions(-)
 create mode 100644 src/views/base/Spinners.vue
 delete mode 100644 src/views/buttons/BrandButtons.vue
 delete mode 100644 src/views/buttons/ButtonDropdowns.vue
 create mode 100644 src/views/buttons/Dropdowns.vue

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e0fa1278..d6848f63 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -453,7 +453,7 @@ export default {
           activity: "1 hour ago",
         },
         {
-          avatar: { src: avatar4, status: "" },
+          avatar: { src: avatar4, status: "secondary" },
           user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
           country: { name: "France", flag: "cif-fr" },
           usage: {
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 8e46dca2..83ee0de5 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,169 +1,358 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <DocsCallout name="List Group" href="components/list-group" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue List Groups</strong>
+          <strong>Vue List Group</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-
-            <CRow>
-                <CCol md="6">
-                    <h4>Basic example</h4>
-                    <Example href="components/list-group.html#basic-example">
-                        <CListGroup>
-                        <CListGroupItem>Cras justo odio</CListGroupItem>
-                        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                        <CListGroupItem>Morbi leo risus</CListGroupItem>
-                        <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                        <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Active items</h4>
-                    <Example href="components/list-group.html#active-items">
-                        <CListGroup>
-                            <CListGroupItem active>Cras justo odio</CListGroupItem>
-                            <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem>Morbi leo risus</CListGroupItem>
-                            <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                            <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Disabled items</h4>
-                    <Example href="components/list-group.html#disabled-items">
-                        <CListGroup>
-                            <CListGroupItem disabled>Cras justo odio</CListGroupItem>
-                            <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem>Morbi leo risus</CListGroupItem>
-                            <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                            <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Links</h4>
-                    <Example href="components/list-group.html#links-and-buttons">
-                        <CListGroup>
-                            <CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
-                            <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
-                            <CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
-                            <CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Buttons</h4>
-                    <Example href="components/list-group.html#links-and-buttons">
-                        <CListGroup>
-                            <CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
-                            <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem component="button">Morbi leo risus</CListGroupItem>
-                            <CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
-                            <CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Flush</h4>
-                    <Example href="components/list-group.html#flush">
-                        <CListGroup flush>
-                            <CListGroupItem>Cras justo odio</CListGroupItem>
-                            <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem>Morbi leo risus</CListGroupItem>
-                            <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                            <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Horizonstal</h4>
-                    <Example href="components/list-group.html#horizontal">
-                        <template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']">
-                            <CListGroup class="mb-2" :layout="'horizontal' + item">
-                                <CListGroupItem>Cras justo odio</CListGroupItem>
-                                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                                <CListGroupItem>Morbi leo risus</CListGroupItem>
-                            </CListGroup>
-                        </template>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Contextual classes</h4>
-                    <Example href="components/list-group.html#contextual-classes">
-                        <CListGroup>
-                            <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Change component to link</h4>
-                    <Example href="components/list-group.html#contextual-classes">
-                        <CListGroup>
-                            <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-                            <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Vue list groups with badge</h4>
-                    <Example href="components/list-group.html#with-badges">
-                        <CListGroup>
-                            <CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem>
-                            <CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem>
-                            <CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Custom content</h4>
-                    <Example href="components/list-group.html#custom-content">
-                        <CListGroup>
-                            <CListGroupItem component="a" href="#" active>
-                                <div class="d-flex w-100 justify-content-between">
-                                <h5 class="mb-1">List group item heading</h5>
-                                <small>3 days ago</small>
-                                </div>
-                                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-                                <small>Donec id elit non mi porta.</small>
-                            </CListGroupItem>
-                            <CListGroupItem component="a" href="#">
-                                <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>
-                            </CListGroupItem>
-                            <CListGroupItem component="a" href="#">
-                                <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>
-                            </CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-                <CCol md="6">
-                    <h4 class="mt-4">Checkboxes and radios</h4>
-                    <Example href="components/list-group.html#checkboxes-and-radios">
-                        <CListGroup>
-                            <CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
-                            <CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
-                            <CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
-                            <CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
-                            <CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
-                        </CListGroup>
-                    </Example>
-                </CCol>
-            </CRow>
+          <p class="text-medium-emphasis small">
+            The default list group is an unordered list with items and the
+            proper CSS classes. Build upon it with the options that follow, or
+            with your CSS as required.
+          </p>
+          <Example href="components/list-group">
+            <CListGroup>
+              <CListGroupItem>Cras justo odio</CListGroupItem>
+              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+              <CListGroupItem>Morbi leo risus</CListGroupItem>
+              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+              <CListGroupItem>Vestibulum at eros</CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Active items</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>active</code> boolean property to a
+            <code>&lt;CListGroupItem&gt;</code> to show the current active
+            selection.
+          </p>
+          <Example href="components/list-group/#active-items">
+            <CListGroup>
+              <CListGroupItem active>Cras justo odio</CListGroupItem>
+              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+              <CListGroupItem>Morbi leo risus</CListGroupItem>
+              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+              <CListGroupItem>Vestibulum at eros</CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Disabled items</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>disabled</code> boolean property to a
+            <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
+          </p>
+          <Example href="components/list-group/#disabled-items">
+            <CListGroup>
+              <CListGroupItem disabled>Cras justo odio</CListGroupItem>
+              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+              <CListGroupItem>Morbi leo risus</CListGroupItem>
+              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+              <CListGroupItem>Vestibulum at eros</CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Links and buttons</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
+            create <em>actionable</em> list group items with hover, disabled,
+            and active states by adding
+            <code>component=&#34;a|button&#34;</code>. We separate these
+            pseudo-classes to ensure list groups made of non-interactive
+            elements (like <code>&lt;li&gt;</code>s or
+            <code>&lt;div&gt;</code>
+            s) don&#39;tprovide a click or tap affordance.
+          </p>
+          <Example href="components/list-group/#links-and-buttons">
+            <CListGroup>
+              <CListGroupItem component="a" href="#" active>
+                Cras justo odio
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#">
+                Dapibus ac facilisis in
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#">
+                Morbi leo risus
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#">
+                Porta ac consectetur ac
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#" disabled>
+                Vestibulum at eros
+              </CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Flush</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>flush</code> boolean property to remove some borders and
+            rounded corners to render list group items edge-to-edge in a parent
+            container (e.g., cards).
+          </p>
+          <Example href="components/list-group/#flush">
+            <CListGroup flush>
+              <CListGroupItem>Cras justo odio</CListGroupItem>
+              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+              <CListGroupItem>Morbi leo risus</CListGroupItem>
+              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+              <CListGroupItem>Vestibulum at eros</CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Horizontal</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
+            list group items from vertical to horizontal across all breakpoints.
+            Alternatively, choose a responsive variant
+            <code
+              >.layout=&#34;horizontal-&#123;sm | md | lg | xl |
+              xxl&#125;&#34;</code
+            >
+            to make a list group horizontal starting at that breakpoint&#39;s
+            <code>min-width</code>. Currently
+            <strong
+              >horizontal list groups cannot be combined with flush list
+              groups.</strong
+            >
+          </p>
+          <Example href="components/list-group/#flush">
+            <template
+              v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
+              :key="item"
+            >
+              <CListGroup class="mb-2" :layout="'horizontal' + item">
+                <CListGroupItem>Cras justo odio</CListGroupItem>
+                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem>Morbi leo risus</CListGroupItem>
+              </CListGroup>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Contextual classes</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use contextual classes to style list items with a stateful
+            background and color.
+          </p>
+          <Example href="components/list-group/#contextual-classes">
+            <CListGroup>
+              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+              <CListGroupItem
+                v-for="item in [
+                  'primary',
+                  'secondary',
+                  'success',
+                  'danger',
+                  'warning',
+                  'info',
+                  'light',
+                  'dark',
+                ]"
+                :color="item"
+                :key="item"
+                >A simple {{ item }} list group item</CListGroupItem
+              >
+            </CListGroup>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Contextual classes also work with <code>&lt;a&gt;</code>s or
+            <code>&lt;button&gt;</code>s. Note the addition of the hover styles
+            here not present in the previous example. Also supported is the
+            <code>active</code> state; apply it to indicate an active selection
+            on a contextual list group item.
+          </p>
+          <Example href="components/list-group/#contextual-classes">
+            <CListGroup>
+              <CListGroupItem component="a" href="#"
+                >Dapibus ac facilisis in</CListGroupItem
+              >
+              <CListGroupItem
+                v-for="item in [
+                  'primary',
+                  'secondary',
+                  'success',
+                  'danger',
+                  'warning',
+                  'info',
+                  'light',
+                  'dark',
+                ]"
+                component="a"
+                href="#"
+                :color="item"
+                :key="item"
+                >A simple {{ item }} list group item</CListGroupItem
+              >
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>With badges</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add badges to any list group item to show unread counts, activity,
+            and more.
+          </p>
+          <Example href="components/list-group/#with-badges">
+            <CListGroup>
+              <CListGroupItem
+                class="d-flex justify-content-between align-items-center"
+              >
+                Cras justo odio
+                <CBadge color="primary" shape="rounded-pill"> 14 </CBadge>
+              </CListGroupItem>
+              <CListGroupItem
+                class="d-flex justify-content-between align-items-center"
+              >
+                Dapibus ac facilisis in
+                <CBadge color="primary" shape="rounded-pill"> 2 </CBadge>
+              </CListGroupItem>
+              <CListGroupItem
+                class="d-flex justify-content-between align-items-center"
+              >
+                Morbi leo risus
+                <CBadge color="primary" shape="rounded-pill"> 1 </CBadge>
+              </CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Custom content</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add nearly any HTML within, even for linked list groups like the one
+            below, with the help of
+            <a href="https://coreui.io/docs/utilities/flex/"
+              >flexbox utilities</a
+            >.
+          </p>
+          <Example href="components/list-group/#custom-content">
+            <CListGroup>
+              <CListGroupItem component="a" href="#" active>
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="mb-1">List group item heading</h5>
+                  <small>3 days ago</small>
+                </div>
+                <p class="mb-1">
+                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
+                  diam eget risus varius blandit.
+                </p>
+                <small>Donec id elit non mi porta.</small>
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="mb-1">List group item heading</h5>
+                  <small class="text-medium-emphasis">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-medium-emphasis"
+                  >Donec id elit non mi porta.</small
+                >
+              </CListGroupItem>
+              <CListGroupItem component="a" href="#">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="mb-1">List group item heading</h5>
+                  <small class="text-medium-emphasis">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-medium-emphasis"
+                  >Donec id elit non mi porta.</small
+                >
+              </CListGroupItem>
+            </CListGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue List Group</strong> <small>Checkboxes and radios</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Place CoreUI&#39;s checkboxes and radios within list group items and
+            customize as needed.
+          </p>
+          <Example href="components/list-group/#checkboxes-and-radios">
+            <CListGroup>
+              <CListGroupItem>
+                <CFormCheck label="Cras justo odio" />
+              </CListGroupItem>
+              <CListGroupItem>
+                <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
+              </CListGroupItem>
+              <CListGroupItem>
+                <CFormCheck label="Morbi leo risus" defaultChecked />
+              </CListGroupItem>
+              <CListGroupItem>
+                <CFormCheck label="orta ac consectetur ac" />
+              </CListGroupItem>
+              <CListGroupItem>
+                <CFormCheck label="Vestibulum at eros" />
+              </CListGroupItem>
+            </CListGroup>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -172,6 +361,6 @@
 
 <script>
 export default {
-  name: "ListGroups",
-};
-</script>
\ No newline at end of file
+  name: 'ListGroups',
+}
+</script>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 1abd31a5..5125c7cf 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,250 +1,385 @@
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Nav</strong>
-        </CCardHeader>
-        <CCardBody>
-            <h4 class="mt-4">Base Nav</h4>
-            <Example href="components/nav.html#base-nav">
-                <CNav>
-                    <CNavItem>
-                    <CNavLink href="#" active>
-                        Active
-                    </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                    <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                    <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                    <CNavLink href="#" disabled>
-                        Disabled
-                    </CNavLink>
-                    </CNavItem>
-                </CNav>
+      <CRow>
+      <CCol :xs="12">
+        <DocsCallout name="Nav" href="components/nav" />
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Base navs</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              The base <code>.nav</code> component is built with flexbox and provide a strong
+              foundation for building all types of navigation components. It includes some style
+              overrides (for working with lists), some link padding for larger hit areas, and basic
+              disabled styling.
+            </p>
+            <Example href="components/nav#base-nav">
+              <CNav>
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Nav horizontal alignment</h4>
-            <Example href="components/nav.html#horizontal-alignment">
-                <CNav class="justify-content-center">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+            <p class="text-medium-emphasis small">
+              Classes are used throughout, so your markup can be super flexible. Use{' '}
+              <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
+              items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
+              the .nav uses display: flex, the nav links behave the same as nav items would, but
+              without the extra markup.
+            </p>
+            <Example href="components/nav#base-nav">
+              <CNav component="nav">
+                <CNavLink href="#" active>
+                  Active
+                </CNavLink>
+                <CNavLink href="#">Link</CNavLink>
+                <CNavLink href="#">Link</CNavLink>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Nav right alignment</h4>
-            <Example href="components/nav.html#horizontal-alignment">
-                <CNav class="justify-content-end">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Horizontal alignment</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              Change the horizontal alignment of your nav with{' '}
+              <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
+                flexbox utilities
+              </a>
+              . By default, navs are left-aligned, but you can easily change them to center or right
+              aligned.
+            </p>
+            <p class="text-medium-emphasis small">
+              Centered with <code>.justify-content-center</code>:
+            </p>
+            <Example href="components/nav#horizontal-alignment">
+              <CNav class="justify-content-center">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Vertical nav</h4>
-            <Example href="components/nav.html#vertical">
-                <CNav class="flex-column">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+            <p class="text-medium-emphasis small">
+              Right-aligned with <code>.justify-content-end</code>:
+            </p>
+            <Example href="components/nav#base-nav">
+              <CNav class="justify-content-end">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Tabs nav</h4>
-            <Example href="components/nav.html#tabs">
-                <CNav variant="tabs">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Vertical</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              Stack your navigation by changing the flex item direction with the{' '}
+              <code>.flex-column</code> utility. Need to stack them on some viewports but not
+              others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
+            </p>
+            <Example href="components/nav#vertical">
+              <CNav class="flex-column">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Pills nav</h4>
-            <Example href="components/nav.html#pills">
-                <CNav variant="pills">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Tabs</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
+              to generate a tabbed interface
+            </p>
+            <Example href="components/nav#tabs">
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Fill nav</h4>
-            <Example href="components/nav.html#fill-and-justify">
-                <CNav variant="pills" layout="fill">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Pills</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
+            </p>
+            <Example href="components/nav#pills">
+              <CNav variant="pills">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Justified nav</h4>
-            <Example href="components/nav.html#fill-and-justify">
-                <CNav variant="pills" layout="justified">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Fill and justify</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              Force your <code>.nav</code>&#39;s contents to extend the full available width one of
+              two modifier classes. To proportionately fill all available space with your{' '}
+              <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
+              horizontal space is occupied, but not every nav item has the same width.
+            </p>
+            <Example href="components/nav#fill-and-justify">
+              <CNav variant="pills" layout="fill">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Vue nav with dropdown</h4>
-            <Example href="components/nav.html#using-dropdowns">
-                <CNav>
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CDropdown variant="nav-item">
-                        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                        <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        </CDropdownMenu>
-                    </CDropdown>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+            <p class="text-medium-emphasis small">
+              For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
+              space will be occupied by nav links, but unlike the .nav-fill above, every nav item
+              will be the same width.
+            </p>
+            <Example href="components/nav#fill-and-justify">
+              <CNav variant="pills" layout="justified">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
             </Example>
-
-            <h4 class="mt-4">Vue pills nav with dropdown</h4>
-            <Example href="components/nav.html#pills-with-dropdowns">
-                <CNav variant="pills">
-                    <CNavItem>
-                        <CNavLink href="#" active>
-                        Active
-                        </CNavLink>
-                    </CNavItem>
-                    <CDropdown variant="nav-item">
-                        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                        <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        </CDropdownMenu>
-                    </CDropdown>
-                    <CNavItem>
-                        <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                        <CNavLink href="#" disabled>
-                        Disabled
-                        </CNavLink>
-                    </CNavItem>
-                </CNav>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Working with flex utilities</small>
+          </CCardHeader>
+          <CCardBody>
+            <p class="text-medium-emphasis small">
+              If you need responsive nav variations, consider using a series of{' '}
+              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
+              verbose, these utilities offer greater customization across responsive breakpoints. In
+              the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
+              horizontal layout that fills the available width starting from the small breakpoint.
+            </p>
+            <Example href="components/nav#working-with-flex-utilities">
+              <CNav component="nav" variant="pills" class="flex-column flex-sm-row">
+                <CNavLink href="#" active>
+                  Active
+                </CNavLink>
+                <CNavLink href="#">Link</CNavLink>
+                <CNavLink href="#">Link</CNavLink>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNav>
             </Example>
-
-
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
+          </CCardHeader>
+          <CCardBody>
+            <Example href="components/nav#tabs-with-dropdowns">
+              <CNav>
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CDropdown variant="nav-item">
+                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+            </Example>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol :xs="12">
+        <CCard class="mb-4">
+          <CCardHeader>
+            <strong>Vue Navs</strong> <small>Pills with dropdowns</small>
+          </CCardHeader>
+          <CCardBody>
+            <Example href="components/nav#pills-with-dropdowns">
+              <CNav variant="pills">
+                <CNavItem>
+                  <CNavLink href="#" active>
+                    Active
+                  </CNavLink>
+                </CNavItem>
+                <CDropdown variant="nav-item">
+                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CNavItem>
+                  <CNavLink href="#">Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink href="#" disabled>
+                    Disabled
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+            </Example>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
 </template>
 
 <script>
 export default {
   name: "Navs",
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index a06cfc99..c50effb2 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,28 +1,76 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue Popovers</strong>
+          <strong>Vue Popovers</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Vue popover example</h4>
-            <Example href="directives/popover.html#example">
-                <CButton 
-                    color="danger" 
-                    size="lg" 
-                    v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}"
-                >
-                    Click to toggle popover
-                </CButton>
-            </Example>
-            <h4 class="mt-4">Vue popovers four directions</h4>
-            <Example href="directives/popover.html#four-directions">
-                <CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
-                <CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
-                <CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
-                <CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
-            </Example>           
+          <Example href="directives/popover.html#example">
+            <CButton
+              color="danger"
+              size="lg"
+              v-c-popover="{
+                header: 'Popover title',
+                content:
+                  'And here\’s some amazing content. It’s very engaging. Right?',
+                placement: 'right',
+              }"
+            >
+              Click to toggle popover
+            </CButton>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Popover</strong> <small>Four directions</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Four options are available: top, right, bottom, and left aligned.
+            Directions are mirrored when using CoreUI for Vue in RTL.
+          </p>
+          <Example href="directives/popover.html#four-directions">
+            <CButton
+              color="secondary"
+              v-c-popover="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'top',
+              }"
+              >Popover on top</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-popover="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'right',
+              }"
+              >Popover on right</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-popover="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'bottom',
+              }"
+              >Popover on bottom</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-popover="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'left',
+              }"
+              >Popover on left</CButton
+            >
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -31,6 +79,6 @@
 
 <script>
 export default {
-  name: "Popovers",
-};
-</script>
\ No newline at end of file
+  name: 'Popovers',
+}
+</script>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
new file mode 100644
index 00000000..798d3d7f
--- /dev/null
+++ b/src/views/base/Spinners.vue
@@ -0,0 +1,133 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <DocsCallout name="Spinner" href="components/spinner" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Spinner</strong> <small>Border</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use the border spinners for a lightweight loading indicator.
+          </p>
+          <Example href="components/spinner">
+            <CSpinner />
+          </Example>
+          <p class="text-medium-emphasis small">
+            The border spinner uses <code>currentColor</code> for its
+            <code>border-color</code>. You can use any of our text color
+            utilities on the standard spinner.
+          </p>
+          <Example href="components/spinner#colors">
+            <CSpinner color="primary" />
+            <CSpinner color="secondary" />
+            <CSpinner color="success" />
+            <CSpinner color="danger" />
+            <CSpinner color="warning" />
+            <CSpinner color="info" />
+            <CSpinner color="light" />
+            <CSpinner color="dark" />
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Spinner</strong> <small>Growing</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            If you don&#39;tfancy a border spinner, switch to the grow spinner.
+            While it doesn&#39;t technically spin, it does repeatedly grow!
+          </p>
+          <Example href="components/spinner#growing-spinner">
+            <CSpinner variant="grow" />
+          </Example>
+          <p class="text-medium-emphasis small">
+            Once again, this spinner is built with <code>currentColor</code>, so
+            you can easily change its appearance. Here it is in blue, along with
+            the supported variants.
+          </p>
+          <Example href="components/spinner#growing-spinner">
+            <CSpinner color="primary" variant="grow" />
+            <CSpinner color="secondary" variant="grow" />
+            <CSpinner color="success" variant="grow" />
+            <CSpinner color="danger" variant="grow" />
+            <CSpinner color="warning" variant="grow" />
+            <CSpinner color="info" variant="grow" />
+            <CSpinner color="light" variant="grow" />
+            <CSpinner color="dark" variant="grow" />
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Spinner</strong> <small>Size</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>size=&#34;sm&#34;</code> property to make a smaller
+            spinner that can quickly be used within other components.
+          </p>
+          <Example href="components/spinner#size">
+            <CSpinner size="sm" />
+            <CSpinner size="sm" variant="grow" />
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Spinner</strong> <small>Buttons</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use spinners within buttons to indicate an action is currently
+            processing or taking place. You may also swap the text out of the
+            spinner element and utilize button text as needed.
+          </p>
+          <Example href="components/spinner#buttons">
+            <CButton disabled>
+              <CSpinner component="span" size="sm" aria-hidden="true" />
+            </CButton>
+            <CButton disabled>
+              <CSpinner component="span" size="sm" aria-hidden="true" />
+              Loading...
+            </CButton>
+          </Example>
+          <Example href="components/spinner#buttons">
+            <CButton disabled>
+              <CSpinner
+                component="span"
+                size="sm"
+                variant="grow"
+                aria-hidden="true"
+              />
+            </CButton>
+            <CButton disabled>
+              <CSpinner
+                component="span"
+                size="sm"
+                variant="grow"
+                aria-hidden="true"
+              />
+              Loading...
+            </CButton>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Spinners',
+}
+</script>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index eda7dce9..7d1f164d 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,38 +1,72 @@
 <template>
   <CRow>
-    <CCol>
+    <CCol :xs="12">
       <CCard>
         <CCardHeader>
-          <strong>Vue Tooltips</strong>
+          <strong>Vue Tooltips</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Tooltips example</h4>
-            <Example href="directives/tooltip.html">
-                <p class="text-medium-emphasis">
-                    Tight pants next level keffiyeh
-                    <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
-                        haven't heard of them.
-                    Photo booth beard raw denim letterpress vegan messenger
-                    bag stumptown. Farm-to-table seitan, mcsweeney's fixie
-                    sustainable quinoa 8-bit american apparel
-                    <CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
-                    terry richardson vinyl chambray. Beard stumptown,
-                    cardigans banh mi lomo thundercats. Tofu biodiesel
-                    williamsburg marfa, four loko mcsweeney''s cleanse
-                    vegan chambray. A really ironic artisan
-                    <CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
-                    scenester farm-to-table banksy Austin
-                    <CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
-                    freegan cred raw denim single-origin coffee viral.
-                </p>
-            </Example>
-            <h4 class="mt-4">Tooltips placements</h4>
-            <Example href="directives/tooltip.html">
-                <CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton>
-                <CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton>
-                <CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton>
-                <CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>            
-            </Example>
+          <p class="text-medium-emphasis small">
+            Hover over the links below to see tooltips:
+          </p>
+          <Example href="directives/tooltip.html">
+            <p class="text-medium-emphasis">
+              Tight pants next level keffiyeh
+              <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
+              haven't heard of them. Photo booth beard raw denim letterpress
+              vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
+              fixie sustainable quinoa 8-bit american apparel
+              <CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
+              terry richardson vinyl chambray. Beard stumptown, cardigans banh
+              mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
+              mcsweeney''s cleanse vegan chambray. A really ironic artisan
+              <CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
+              scenester farm-to-table banksy Austin
+              <CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
+              freegan cred raw denim single-origin coffee viral.
+            </p>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Hover over the links below to see tooltips:
+          </p>
+          <Example href="directives/tooltip.html">
+            <CButton
+              color="secondary"
+              v-c-tooltip="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'top',
+              }"
+              >Tooltip on top</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-tooltip="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'right',
+              }"
+              >Tooltip on right</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-tooltip="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'bottom',
+              }"
+              >Tooltip on bottom</CButton
+            >
+            <CButton
+              color="secondary"
+              v-c-tooltip="{
+                content:
+                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
+                placement: 'left',
+              }"
+              >Tooltip on left</CButton
+            >
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -41,6 +75,6 @@
 
 <script>
 export default {
-  name: "Tooltips",
-};
-</script>
\ No newline at end of file
+  name: 'Tooltips',
+}
+</script>
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
deleted file mode 100644
index b05b7f59..00000000
--- a/src/views/buttons/BrandButtons.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Brand Buttons</strong>
-        </CCardHeader>
-        <CCardBody>
-
-             TODO: check did I should remove brand-buttons
-
-          <Example href="breadcrumbs">
-            <template v-for="(brandName, key) in brands" :key="key">
-              <CButton
-                :name="brandName"
-                :color="brandName"
-                class="btn-brand"
-              >
-                <CIcon :name="'cib-' + brandName"/>
-                <span>{{brandName}}</span>
-              </CButton>
-            </template>
-            
-            <template v-for="(brandName, key) in brands" :key="key">
-              <CButton
-                :name="brandName"
-                size="sm"
-                :color="brandName"
-                class="btn-brand"
-              >
-                <CIcon size="sm" :name="'cib-' + brandName"/>
-                <span>{{brandName}}</span>
-              </CButton>
-            </template>
-
-            <template v-for="(brandName, key) in brands" :key="key">
-              <CButton
-                :name="brandName"
-                size="lg"
-                :color="brandName"
-                class="btn-brand"
-              >
-                <CIcon size="lg" :name="'cib-' + brandName"/>
-                <span>{{brandName}}</span>
-              </CButton>
-            </template>
-          </Example>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: "BrandButtons",
-  data: function(){
-      return {
-        brands: [
-            'facebook',
-            'twitter',
-            'linkedin',
-            'flickr',
-            'tumblr',
-            'xing',
-            'github',
-            'stackoverflow',
-            'youtube',
-            'dribbble',
-            'instagram',
-            'pinterest',
-            'vk',
-            'yahoo',
-            'behance',
-            'reddit',
-            'vimeo'
-        ]
-      }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/src/views/buttons/ButtonDropdowns.vue b/src/views/buttons/ButtonDropdowns.vue
deleted file mode 100644
index f4867580..00000000
--- a/src/views/buttons/ButtonDropdowns.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Button Dropdowns</strong>
-        </CCardHeader>
-        <CCardBody>
-
-
-            <h4 class="mt-4">Single button</h4>
-            <CRow>
-            <CCol md="6">
-            <Example href="components/dropdown.html#single-button">
-                <CDropdown color="secondary">
-                    <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-            </CCol>
-            <CCol md="6">
-            <Example href="components/dropdown.html#single-button">
-                <CDropdown color="secondary" togglerText="Dropdown button">
-                    <CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                    </CDropdownMenu>  
-                </CDropdown>
-            </Example>
-            </CCol>
-            </CRow>
-            <Example href="components/dropdown.html#single-button">
-                <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
-                    <CDropdown :color="item" :togglerText="item" variant="btn-group">
-                        <CDropdownToggle :color="item">{{item}}</CDropdownToggle>
-                        <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        </CDropdownMenu>
-                    </CDropdown>
-                </template>
-            </Example>
-
-            <h4 class="mt-4">Split button</h4>
-            <Example href="components/dropdown.html#split-button">
-                <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
-                    <CDropdown :color="item" :togglerText="item" variant="btn-group">
-                        <CButton :color="item">{{ item }}</CButton>
-                        <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
-                        <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        </CDropdownMenu>
-                    </CDropdown>
-                </template>
-            </Example>
-
-            <h4 class="mt-4">Sizing</h4>
-            <Example href="components/dropdown.html#sizing">
-                <CDropdown variant="btn-group">
-                    <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                    </CDropdown>
-                    <CDropdown variant="btn-group">
-                    <CButton color="secondary" size="lg">Large split button</CButton>
-                    <CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-                <CDropdown variant="btn-group">
-                    <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                    </CDropdown>
-                    <CDropdown variant="btn-group">
-                    <CButton color="secondary" size="sm">Small split button</CButton>
-                    <CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-
-            <h4 class="mt-4">Dark dropdowns</h4>
-            <Example href="components/dropdown.html#dark-dropdowns">
-                <CDropdown color="secondary" dark>
-                    <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-            <p>In navbar:</p>
-            <Example href="components/dropdown.html#dark-dropdowns">
-                <CNavbar expand="lg" colorScheme="dark" class="bg-dark">
-                    <CContainer fluid>
-                        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-                        <CNavbarNav>
-                        <CDropdown dark variant="nav-item">
-                            <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
-                            <CDropdownMenu>
-                            <CDropdownItem href="#">Action</CDropdownItem>
-                            <CDropdownItem href="#">Another action</CDropdownItem>
-                            <CDropdownItem href="#">Something else here</CDropdownItem>
-                            <CDropdownDivider/>
-                            <CDropdownItem href="#">Separated link</CDropdownItem>
-                            </CDropdownMenu>
-                        </CDropdown>
-                        </CNavbarNav>
-                    </CContainer>
-                </CNavbar>
-            </Example>
-
-            <h4 class="mt-4">Directions</h4>
-            <Example href="components/dropdown.html#directions">
-                <CDropdown color="secondary" direction="dropup">
-                    <CDropdownToggle color="secondary">Dropup</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                    </CDropdown>
-                    <CDropdown color="secondary" direction="dropup">
-                    <CButton color="secondary">Split dropup</CButton>
-                    <CDropdownToggle color="secondary" split/>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-            <Example href="components/dropdown.html#directions">
-                <CDropdown color="secondary" direction="dropend">
-                    <CDropdownToggle color="secondary">Dropend</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                    </CDropdown>
-                    <CDropdown color="secondary" direction="dropend">
-                    <CButton color="secondary">Split dropend</CButton>
-                    <CDropdownToggle color="secondary" split/>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-            <Example href="components/dropdown.html#directions">
-                <CDropdown color="secondary" direction="dropstart">
-                    <CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                    </CDropdown>
-                    <CButtonGroup>
-                    <CDropdown color="secondary" direction="dropstart">
-                        <CDropdownToggle color="secondary" split/>
-                        <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                        </CDropdownMenu>
-                    </CDropdown>
-                    <CButton color="secondary">Split dropstart</CButton>
-                </CButtonGroup>
-            </Example>
-
-            <h4 class="mt-4">Responsive alignment</h4>
-            <Example href="components/dropdown.html#responsive-alignment">
-                <CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
-                    <CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-            <Example href="components/dropdown.html#responsive-alignment">
-                <CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
-                    <CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
-                    <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider/>
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                    </CDropdownMenu>
-                </CDropdown>
-            </Example>
-
-            <h4 class="mt-4">Dropdown menu content examples</h4>
-            <Example href="components/dropdown.html#menu-content">
-                <div class="border rounded py-2">
-                    <CDropdownHeader>Dropdown header</CDropdownHeader>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                </div>
-            </Example>
-            <Example href="components/dropdown.html#menu-content">
-                <div class="border rounded py-2">
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                </div>
-            </Example>
-            <Example href="components/dropdown.html#menu-content">
-                <div class="border rounded p-4 text-muted" style="max-width: 200px">
-                    <p>
-                        Some example text that's free-flowing within the dropdown menu.
-                    </p>
-                    <p class="mb-0">
-                        And this is more example text.
-                    </p>
-                </div>
-            </Example>
-            <Example href="components/dropdown.html#menu-content">
-                <div class="border rounded py-2">
-                    <CForm class="px-4 py-4">
-                        <div class="mb-3">
-                        <CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
-                        <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
-                        </div>
-                        <div class="mb-3">
-                        <CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
-                        <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
-                        </div>
-                        <div class="mb-3">
-                        <CFormCheck id="dropdownCheck" label="Remember me"/>
-                        </div>
-                        <CButton type="submit">Sign in</CButton>
-                    </CForm>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
-                    <CDropdownItem href="#">Forgot password?</CDropdownItem>
-                </div>
-            </Example>
-
-
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: "ButtonDropdowns",
-};
-</script>
\ No newline at end of file
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 5f5021b4..ceb7ce57 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,224 +1,387 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <DocsCallout name="Button Group" href="components/button-group" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue Button Groups</strong>
+          <strong>Vue Button Group</strong> <span>Basic example</span>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Basic example</h4>
-            <CRow>
-            <CCol md="6">
-                <Example href="components/button-group.html#basic-example">
-                    <CButtonGroup role="group" aria-label="Basic example">
-                        <CButton color="primary">Left</CButton>
-                        <CButton color="primary">Middle</CButton>
-                        <CButton color="primary">Right</CButton>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            <CCol md="6">
-                <Example href="components/button-group.html#basic-example">
-                    <CButtonGroup>
-                        <CButton href="#" color="primary" active>Active link</CButton>
-                        <CButton href="#" color="primary">Link</CButton>
-                        <CButton href="#" color="primary">Link</CButton>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            </CRow>
-
-
-            <CRow>
-            <CCol md="6">
-                <h4 class="mt-4">Mixed styles</h4>
-                <Example href="components/button-group.html#mixed-styles">
-                    <CButtonGroup role="group" aria-label="Basic mixed styles example">
-                        <CButton color="danger">Left</CButton>
-                        <CButton color="warning">Middle</CButton>
-                        <CButton color="success">Right</CButton>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            <CCol md="6">
-                <h4 class="mt-4">Outlined styles</h4>
-                <Example href="components/button-group.html#outlined-styles">
-                    <CButtonGroup role="group" aria-label="Basic outlined example">
-                        <CButton color="primary" variant="outline">Left</CButton>
-                        <CButton color="primary" variant="outline">Middle</CButton>
-                        <CButton color="primary" variant="outline">Right</CButton>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            </CRow>
-
-
-            <h4 class="mt-4">Checkbox and radio button groups</h4>
-            <CRow>
-            <CCol md="6">
-                <Example href="components/button-group.html#checkbox-and-radio-button-groups">
-                    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-                        <CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
-                        <CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
-                        <CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            <CCol md="6">
-                <Example href="components/button-group.html#checkbox-and-radio-button-groups">
-                    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
-                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
-                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            </CRow>
-
-
-            <h4 class="mt-4">Button toolbar</h4>
-                <Example href="components/button-group.html#button-toolbar">
-                    <CButtonToolbar role="group" aria-label="Toolbar with button groups">
-                        <CButtonGroup class="me-2" role="group" aria-label="First group">
-                            <CButton color="primary">1</CButton>
-                            <CButton color="primary">2</CButton>
-                            <CButton color="primary">3</CButton>
-                            <CButton color="primary">4</CButton>
-                        </CButtonGroup>
-                        <CButtonGroup class="me-2" role="group" aria-label="Second group">
-                            <CButton color="secondary">5</CButton>
-                            <CButton color="secondary">6</CButton>
-                            <CButton color="secondary">7</CButton>
-                        </CButtonGroup>
-                        <CButtonGroup class="me-2" role="group" aria-label="Third group">
-                            <CButton color="info">8</CButton>
-                        </CButtonGroup>
-                    </CButtonToolbar>
-                </Example>
-                <Example href="components/button-group.html#button-toolbar">
-                    <CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
-                        <CButtonGroup class="me-2" role="group" aria-label="First group">
-                            <CButton color="secondary" variant="outline">1</CButton>
-                            <CButton color="secondary" variant="outline">2</CButton>
-                            <CButton color="secondary" variant="outline">3</CButton>
-                            <CButton color="secondary" variant="outline">4</CButton>
-                        </CButtonGroup>
-                        <CInputGroup>
-                            <CInputGroupText>@</CInputGroupText>
-                            <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
-                        </CInputGroup>
-                        </CButtonToolbar>
-                        <CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
-                        <CButtonGroup class="me-2" role="group" aria-label="First group">
-                            <CButton color="secondary" variant="outline">1</CButton>
-                            <CButton color="secondary" variant="outline">2</CButton>
-                            <CButton color="secondary" variant="outline">3</CButton>
-                            <CButton color="secondary" variant="outline">4</CButton>
-                        </CButtonGroup>
-                        <CInputGroup>
-                            <CInputGroupText>@</CInputGroupText>
-                            <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
-                        </CInputGroup>
-                    </CButtonToolbar>
-                </Example>
-
-            <h4 class="mt-4">Sizing</h4>
-                <Example href="components/button-group.html#sizing">
-                    <CButtonGroup size="lg" role="group" aria-label="Large button group">
-                        <CButton color="dark" variant="outline">Left</CButton>
-                        <CButton color="dark" variant="outline">Middle</CButton>
-                        <CButton color="dark" variant="outline">Right</CButton>
-                    </CButtonGroup>
-                    <br/>
-                    <CButtonGroup role="group" aria-label="Default button group">
-                        <CButton color="dark" variant="outline">Left</CButton>
-                        <CButton color="dark" variant="outline">Middle</CButton>
-                        <CButton color="dark" variant="outline">Right</CButton>
-                    </CButtonGroup>
-                    <br/>
-                    <CButtonGroup size="sm" role="group" aria-label="Small button group">
-                        <CButton color="dark" variant="outline">Left</CButton>
-                        <CButton color="dark" variant="outline">Middle</CButton>
-                        <CButton color="dark" variant="outline">Right</CButton>
-                    </CButtonGroup>
-                </Example>
-
-            <h4 class="mt-4">Vertical variation</h4>
-            <CRow>
-            <CCol md="4">
-                <Example href="components/button-group.html#vertical-variation">
-                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                        <CButton color="dark">Button</CButton>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            <CCol md="4">
-                <Example href="components/button-group.html#vertical-variation">
-                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                        <CButton color="primary">Button</CButton>
-                        <CButton color="primary">Button</CButton>
-                        <CDropdown variant="btn-group">
-                            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                            <CDropdownMenu>
-                            <CDropdownItem href="#">Action</CDropdownItem>
-                            <CDropdownItem href="#">Another action</CDropdownItem>
-                            <CDropdownItem href="#">Something else here</CDropdownItem>
-                            <CDropdownDivider/>
-                            <CDropdownItem href="#">Separated link</CDropdownItem>
-                            </CDropdownMenu>
-                        </CDropdown>
-                        <CButton color="primary">Button</CButton>
-                        <CButton color="primary">Button</CButton>
-                        <CDropdown variant="btn-group">
-                            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                            <CDropdownMenu>
-                            <CDropdownItem href="#">Action</CDropdownItem>
-                            <CDropdownItem href="#">Another action</CDropdownItem>
-                            <CDropdownItem href="#">Something else here</CDropdownItem>
-                            <CDropdownDivider/>
-                            <CDropdownItem href="#">Separated link</CDropdownItem>
-                            </CDropdownMenu>
-                        </CDropdown>
-                        <CDropdown variant="btn-group">
-                            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                            <CDropdownMenu>
-                            <CDropdownItem href="#">Action</CDropdownItem>
-                            <CDropdownItem href="#">Another action</CDropdownItem>
-                            <CDropdownItem href="#">Something else here</CDropdownItem>
-                            <CDropdownDivider/>
-                            <CDropdownItem href="#">Separated link</CDropdownItem>
-                            </CDropdownMenu>
-                        </CDropdown>
-                        <CDropdown variant="btn-group">
-                            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                            <CDropdownMenu>
-                            <CDropdownItem href="#">Action</CDropdownItem>
-                            <CDropdownItem href="#">Another action</CDropdownItem>
-                            <CDropdownItem href="#">Something else here</CDropdownItem>
-                            <CDropdownDivider/>
-                            <CDropdownItem href="#">Separated link</CDropdownItem>
-                            </CDropdownMenu>
-                        </CDropdown>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            <CCol md="4">
-                <Example href="components/button-group.html#vertical-variation">
-                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
-                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
-                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
-                    </CButtonGroup>
-                </Example>
-            </CCol>
-            </CRow>
-
+          <p>
+            Wrap a series of <code>&lt;CButton&gt;</code> components in
+            <code>&lt;CButtonGroup&gt;</code>.
+          </p>
+          <Example href="components/button-group">
+            <CButtonGroup role="group" aria-label="Basic example">
+              <CButton color="primary">Left</CButton>
+              <CButton color="primary">Middle</CButton>
+              <CButton color="primary">Right</CButton>
+            </CButtonGroup>
+          </Example>
+          <p>
+            These classes can also be added to groups of links, as an
+            alternative to the
+            <code>&lt;CNav&gt;</code> components.
+          </p>
+          <Example href="components/button-group">
+            <CButtonGroup>
+              <CButton href="#" color="primary" active> Active link </CButton>
+              <CButton href="#" color="primary"> Link </CButton>
+              <CButton href="#" color="primary"> Link </CButton>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Mixed styles</span>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="components/button-group#mixed-styles">
+            <CButtonGroup role="group" aria-label="Basic mixed styles example">
+              <CButton color="danger">Left</CButton>
+              <CButton color="warning">Middle</CButton>
+              <CButton color="success">Right</CButton>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Outlined styles</span>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="components/button-group#outlined-styles">
+            <CButtonGroup role="group" aria-label="Basic outlined example">
+              <CButton color="primary" variant="outline"> Left </CButton>
+              <CButton color="primary" variant="outline"> Middle </CButton>
+              <CButton color="primary" variant="outline"> Right </CButton>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Combine button-like checkbox and radio toggle buttons into a
+            seamless looking button group.
+          </p>
+          <Example
+            href="components/button-group#checkbox-and-radio-button-groups"
+          >
+            <CButtonGroup
+              role="group"
+              aria-label="Basic checkbox toggle button group"
+            >
+              <CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
+              autoComplete="off" label="Checkbox 1" />
+              <CFormCheck :button="{ color: 'primary', variant: 'outline' }"
+              id="btncheck2" autoComplete="off" label="Checkbox 2" />
+              <CFormCheck :button="{ color: 'primary', variant: 'outline' }"
+              id="btncheck3" autoComplete="off" label="Checkbox 3" />
+            </CButtonGroup>
+          </Example>
+          <Example
+            href="components/button-group#checkbox-and-radio-button-groups"
+          >
+            <CButtonGroup
+              role="group"
+              aria-label="Basic checkbox toggle button group"
+            >
+              <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
+              name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"
+              /> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
+              name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"
+              /> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
+              name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
+              />
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Button toolbar</span>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Join sets of button groups into button toolbars for more complicated
+            components. Use utility classes as needed to space out groups,
+            buttons, and more.
+          </p>
+          <Example href="components/button-group#button-toolbar">
+            <CButtonToolbar
+              role="group"
+              aria-label="Toolbar with button groups"
+            >
+              <CButtonGroup
+                class="me-2"
+                role="group"
+                aria-label="First group"
+              >
+                <CButton color="primary">1</CButton>
+                <CButton color="primary">2</CButton>
+                <CButton color="primary">3</CButton>
+                <CButton color="primary">4</CButton>
+              </CButtonGroup>
+              <CButtonGroup
+                class="me-2"
+                role="group"
+                aria-label="Second group"
+              >
+                <CButton color="secondary">5</CButton>
+                <CButton color="secondary">6</CButton>
+                <CButton color="secondary">7</CButton>
+              </CButtonGroup>
+              <CButtonGroup
+                class="me-2"
+                role="group"
+                aria-label="Third group"
+              >
+                <CButton color="info">8</CButton>
+              </CButtonGroup>
+            </CButtonToolbar>
+          </Example>
+          <p>
+            Feel free to combine input groups with button groups in your
+            toolbars. Similar to the example above, you’ll likely need some
+            utilities through to space items correctly.
+          </p>
+          <Example href="components/button-group#button-toolbar">
+            <CButtonToolbar
+              class="mb-3"
+              role="group"
+              aria-label="Toolbar with button groups"
+            >
+              <CButtonGroup
+                class="me-2"
+                role="group"
+                aria-label="First group"
+              >
+                <CButton color="secondary" variant="outline"> 1 </CButton>
+                <CButton color="secondary" variant="outline"> 2 </CButton>
+                <CButton color="secondary" variant="outline"> 3 </CButton>
+                <CButton color="secondary" variant="outline"> 4 </CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                <CInputGroupText>@</CInputGroupText>
+                <CFormInput
+                  placeholder="Input group example"
+                  aria-label="Input group example"
+                  aria-describedby="btnGroupAddon"
+                />
+              </CInputGroup>
+            </CButtonToolbar>
+            <CButtonToolbar
+              class="justify-content-between"
+              role="group"
+              aria-label="Toolbar with button groups"
+            >
+              <CButtonGroup
+                class="me-2"
+                role="group"
+                aria-label="First group"
+              >
+                <CButton color="secondary" variant="outline"> 1 </CButton>
+                <CButton color="secondary" variant="outline"> 2 </CButton>
+                <CButton color="secondary" variant="outline"> 3 </CButton>
+                <CButton color="secondary" variant="outline"> 4 </CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                <CInputGroupText>@</CInputGroupText>
+                <CFormInput
+                  placeholder="Input group example"
+                  aria-label="Input group example"
+                  aria-describedby="btnGroupAddon"
+                />
+              </CInputGroup>
+            </CButtonToolbar>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Sizing</span>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Alternatively, of implementing button sizing classes to each button
+            in a group, set
+            <code>size</code> property to all
+            <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
+            nesting multiple groups.
+          </p>
+          <Example href="components/button-group#sizing">
+            <CButtonGroup
+              size="lg"
+              role="group"
+              aria-label="Large button group"
+            >
+              <CButton color="dark" variant="outline"> Left </CButton>
+              <CButton color="dark" variant="outline"> Middle </CButton>
+              <CButton color="dark" variant="outline"> Right </CButton>
+            </CButtonGroup>
+            <br />
+            <CButtonGroup role="group" aria-label="Default button group">
+              <CButton color="dark" variant="outline"> Left </CButton>
+              <CButton color="dark" variant="outline"> Middle </CButton>
+              <CButton color="dark" variant="outline"> Right </CButton>
+            </CButtonGroup>
+            <br />
+            <CButtonGroup
+              size="sm"
+              role="group"
+              aria-label="Small button group"
+            >
+              <CButton color="dark" variant="outline"> Left </CButton>
+              <CButton color="dark" variant="outline"> Middle </CButton>
+              <CButton color="dark" variant="outline"> Right </CButton>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Nesting</span>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Put a <code>&lt;CButtonGroup&gt;</code> inside another
+            <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
+            combined with a series of buttons.
+          </p>
+          <Example href="components/button-group#nesting">
+            <CButtonGroup
+              role="group"
+              aria-label="Button group with nested dropdown"
+            >
+              <CButton color="primary">1</CButton>
+              <CButton color="primary">2</CButton>
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button Group</strong> <span>Vertical variation</span>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Create a set of buttons that appear vertically stacked rather than
+            horizontally.
+            <strong>Split button dropdowns are not supported here.</strong>
+          </p>
+          <Example href="components/button-group/#vertical-variation">
+            <CButtonGroup
+              vertical
+              role="group"
+              aria-label="Vertical button group"
+            >
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+              <CButton color="dark">Button</CButton>
+            </CButtonGroup>
+          </Example>
+          <Example href="components/button-group/#vertical-variation">
+            <CButtonGroup
+              vertical
+              role="group"
+              aria-label="Vertical button group"
+            >
+              <CButton color="primary">Button</CButton>
+              <CButton color="primary">Button</CButton>
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CButton color="primary">Button</CButton>
+              <CButton color="primary">Button</CButton>
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </Example>
+          <Example href="components/button-group/#vertical-variation">
+            <CButtonGroup
+              vertical
+              role="group"
+              aria-label="Vertical button group"
+            >
+              <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
+              name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio
+              1" defaultChecked /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
+              name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio
+              2" /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
+              name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
+              3" />
+            </CButtonGroup>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -227,6 +390,6 @@
 
 <script>
 export default {
-  name: "ButtonGroups",
-};
-</script>
\ No newline at end of file
+  name: 'ButtonGroups',
+}
+</script>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 9b02d9aa..4a464833 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -1,177 +1,447 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <DocsCallout name="Button" href="components/buttons" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue Buttons</strong>
+          <strong>Vue Button</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/button.html#examples">
-
-            <template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
-                <h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
-                <CRow>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard disabled</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline disabled</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost disabled</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                </CRow>
-
-                <CRow>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard disabled size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline disabled size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost disabled size="sm"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                </CRow>
-
-
-                <CRow>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Standard disabled size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant outline disabled size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                    <CCol md="12" class="mt-4">
-                        <strong>Variant ghost disabled size="lg"</strong>
-                        <br>
-                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
-                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
-                        </template>
-                    </CCol>
-                </CRow>
+          <p class="text-medium-emphasis small">
+            CoreUI includes a bunch of predefined buttons components, each
+            serving its own semantic purpose. Buttons show what action will
+            happen when the user clicks or touches it. CoreUI buttons are used
+            to initialize operations, both in the background or foreground of an
+            experience.
+          </p>
+          <Example href="components/buttons">
+            <template
+              v-for="state in ['normal', 'active', 'disabled']"
+              :key="state"
+            >
+              <CRow class="align-items-center mb-3">
+                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
+                  state.charAt(0).toUpperCase() + state.slice(1)
+                }}</CCol>
+                <CCol xs>
+                  <template
+                    v-for="color in [
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ]"
+                    :key="color"
+                  >
+                    <CButton
+                      :color="color"
+                      :active="state === 'active' ? true : false"
+                      :disabled="state === 'disabled' ? true : false"
+                    >
+                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+                    </CButton>
+                  </template>
+                </CCol>
+              </CRow>
             </template>
           </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>with icons</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            You can combine button with our
+            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+          </p>
+          <Example href="components/buttons">
+            <template
+              v-for="state in ['normal', 'active', 'disabled']"
+              :key="state"
+            >
+              <CRow class="align-items-center mb-3">
+                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
+                  state.charAt(0).toUpperCase() + state.slice(1)
+                }}</CCol>
 
-            <h4 class="mt-4">Block buttons</h4>
-
-            <Example href="components/button.html#block-buttons">
-                <div class="d-grid gap-2">
-                    <CButton color="primary">Button</CButton>
-                    <CButton color="primary">Button</CButton>
-                </div>
-                <br><br>
-                <div class="d-grid gap-2 d-md-block">
-                    <CButton color="primary">Button</CButton>
-                    <CButton color="primary">Button</CButton>
-                </div>
-                <br><br>
-                <div class="d-grid gap-2 col-6 mx-auto">
-                    <CButton color="primary">Button</CButton>
-                    <CButton color="primary">Button</CButton>
-                </div>
-                <br><br>
-                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                    <CButton color="primary" class="me-md-2">Button</CButton>
-                    <CButton color="primary">Button</CButton>
-                </div>
-            </Example>
+                <CCol xs>
+                  <template
+                    v-for="color in [
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ]"
+                    :key="color"
+                  >
+                    <CButton
+                      :color="color"
+                      :active="state === 'active' ? true : false"
+                      :disabled="state === 'disabled' ? true : false"
+                    >
+                      <CIcon icon="cil-bell" class="me-2" />
+                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+                    </CButton>
+                  </template>
+                </CCol>
+              </CRow>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Button components</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            The <code>&lt;CButton&gt;</code> component are designed for
+            <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
+            <code>&lt;input&gt;</code>
+            elements (though some browsers may apply a slightly different
+            rendering).
+          </p>
+          <p class="text-medium-emphasis small">
+            If you&#39;re using <code>&lt;CButton&gt;</code> component as
+            <code>&lt;a&gt;</code> elements that are used to trigger
+            functionality ex. collapsing content, these links should be given a
+            <code>role=&#34;button&#34;</code> to adequately communicate their
+            meaning to assistive technologies such as screen readers.
+          </p>
+          <Example href="components/buttons#button-components">
+            <CButton component="a" color="primary" href="#" role="button">
+              Link
+            </CButton>
+            <CButton type="submit" color="primary"> Button </CButton>
+            <CButton
+              component="input"
+              type="button"
+              color="primary"
+              value="Input"
+            />
+            <CButton
+              component="input"
+              type="submit"
+              color="primary"
+              value="Submit"
+            />
+            <CButton
+              component="input"
+              type="reset"
+              color="primary"
+              value="Reset"
+            />
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>outline</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            If you need a button, but without the strong background colors. Set
+            <code>variant=&#34;outline&#34;</code> prop to remove all background
+            colors.
+          </p>
+          <Example href="components/buttons#outline-buttons">
+            <template
+              v-for="state in ['normal', 'active', 'disabled']"
+              :key="state"
+            >
+              <CRow class="align-items-center mb-3">
+                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
+                  state.charAt(0).toUpperCase() + state.slice(1)
+                }}</CCol>
 
+                <CCol xs>
+                  <template
+                    v-for="color in [
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ]"
+                    :key="color"
+                  >
+                    <CButton
+                      :color="color"
+                      :active="state === 'active' ? true : false"
+                      :disabled="state === 'disabled' ? true : false"
+                      variant="outline"
+                    >
+                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+                    </CButton>
+                  </template>
+                </CCol>
+              </CRow>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>ghost</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            If you need a ghost variant of button, set
+            <code>variant=&#34;ghost&#34;</code> prop to remove all background
+            colors.
+          </p>
+          <Example href="components/buttons#ghost-buttons">
+            <template
+              v-for="state in ['normal', 'active', 'disabled']"
+              :key="state"
+            >
+              <CRow class="align-items-center mb-3">
+                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
+                  state.charAt(0).toUpperCase() + state.slice(1)
+                }}</CCol>
+                <CCol xs>
+                  <template
+                    v-for="color in [
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ]"
+                    :key="color"
+                  >
+                    <CButton
+                      :color="color"
+                      :active="state === 'active' ? true : false"
+                      :disabled="state === 'disabled' ? true : false"
+                      variant="ghost"
+                    >
+                      <CIcon icon="{cilBell}" class="me-2" />
+                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+                    </CButton>
+                  </template>
+                </CCol>
+              </CRow>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Sizes</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
+            <code>size=&#34;sm&#34;</code> for additional sizes.
+          </p>
+          <Example href="components/buttons#sizes">
+            <CButton color="primary" size="lg"> Large button </CButton>
+            <CButton color="secondary" size="lg"> Large button </CButton>
+          </Example>
+          <Example href="components/buttons#sizes">
+            <CButton color="primary" size="sm"> Small button </CButton>
+            <CButton color="secondary" size="sm"> Small button </CButton>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Pill</small>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="components/buttons#pill-buttons">
+            <template
+              v-for="color in [
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ]"
+              :key="color"
+            >
+              <CButton
+                :color="color"
+                :active="state === 'active' ? true : false"
+                :disabled="state === 'disabled' ? true : false"
+                shape="rounded-pill"
+              >
+                {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+              </CButton>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Square</small>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="components/buttons#square">
+            <template
+              v-for="color in [
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ]"
+              :key="color"
+            >
+              <CButton
+                :color="color"
+                :active="state === 'active' ? true : false"
+                :disabled="state === 'disabled' ? true : false"
+                shape="rounded-0"
+              >
+                {{ color.charAt(0).toUpperCase() + color.slice(1) }}
+              </CButton>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Disabled state</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add the <code>disabled</code> boolean prop to any
+            <code>&lt;CButton&gt;</code>
+            component to make buttons look inactive. Disabled button has
+            <code>pointer-events: none</code> applied to, disabling hover and
+            active states from triggering.
+          </p>
+          <Example href="components/buttons#disabled-state">
+            <CButton color="primary" size="lg" disabled>
+              Primary button
+            </CButton>
+            <CButton color="secondary" size="lg" disabled> Button </CButton>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Disabled buttons using the <code>&lt;a&gt;</code> component act a
+            little different:
+          </p>
+          <p class="text-medium-emphasis small">
+            <code>&lt;a&gt;</code>s don&#39;tsupport the
+            <code>disabled</code> attribute, so CoreUI has to add
+            <code>.disabled</code> class to make buttons look inactive. CoreUI
+            also has to add to the disabled button component
+            <code>aria-disabled=&#34;true&#34;</code> attribute to show the
+            state of the component to assistive technologies.
+          </p>
+          <Example href="components/buttons#disabled-state">
+            <CButton component="a" href="#" color="primary" size="lg" disabled>
+              Primary link
+            </CButton>
+            <CButton
+              component="a"
+              href="#"
+              color="secondary"
+              size="lg"
+              disabled
+            >
+              Link
+            </CButton>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Button</strong> <small>Block buttons</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Create buttons that span the full width of a parent—by using
+            utilities.
+          </p>
+          <Example href="components/buttons#block-buttons">
+            <div class="d-grid gap-2">
+              <CButton color="primary">Button</CButton>
+              <CButton color="primary">Button</CButton>
+            </div>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Here we create a responsive variation, starting with vertically
+            stacked buttons until the <code>md</code> breakpoint, where
+            <code>.d-md-block</code> replaces the <code>.d-grid</code> class,
+            thus nullifying the <code>gap-2</code> utility. Resize your browser
+            to see them change.
+          </p>
+          <Example href="components/buttons#block-buttons">
+            <div class="d-grid gap-2 d-md-block">
+              <CButton color="primary">Button</CButton>
+              <CButton color="primary">Button</CButton>
+            </div>
+          </Example>
+          <p class="text-medium-emphasis small">
+            You can adjust the width of your block buttons with grid column
+            width classes. For example, for a half-width &#34;block button&#34;,
+            use <code>.col-6</code>. Center it horizontally with
+            <code>.mx-auto</code>, too.
+          </p>
+          <Example href="components/buttons#block-buttons">
+            <div class="d-grid gap-2 col-6 mx-auto">
+              <CButton color="primary">Button</CButton>
+              <CButton color="primary">Button</CButton>
+            </div>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Additional utilities can be used to adjust the alignment of buttons
+            when horizontal. Here we&#39;ve taken our previous responsive
+            example and added some flex utilities and a margin utility on the
+            button to right align the buttons when they&#39;re no longer
+            stacked.
+          </p>
+          <Example href="components/buttons#block-buttons">
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+              <CButton color="primary" class="me-md-2"> Button </CButton>
+              <CButton color="primary">Button</CButton>
+            </div>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -180,6 +450,6 @@
 
 <script>
 export default {
-  name: "Buttons",
-};
-</script>
\ No newline at end of file
+  name: 'Buttons',
+}
+</script>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
new file mode 100644
index 00000000..71314aae
--- /dev/null
+++ b/src/views/buttons/Dropdowns.vue
@@ -0,0 +1,364 @@
+<template>
+  <CRow>
+    <CCol xs="12">
+      <DocsCallout name="Dropdown" href="components/dropdown" />
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Single button</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Here&#39;s how you can put them to work with either
+            <code>&lt;button&gt;</code>
+            elements:
+          </p>
+          <Example href="components/dropdown#single-button">
+            <CDropdown>
+              <CDropdownToggle color="secondary"
+                >Dropdown button</CDropdownToggle
+              >
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+          <p class="text-medium-emphasis small">
+            The best part is you can do this with any button variant, too:
+          </p>
+          <Example href="components/dropdown#single-button">
+            <template
+              v-for="color in [
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ]"
+              :key="color"
+            >
+              <CDropdown variant="btn-group">
+                <CDropdownToggle :color="color">{{ color }}</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Split button</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Similarly, create split button dropdowns with virtually the same
+            markup as single button dropdowns, but with the addition of boolean
+            prop <code>split</code> for proper spacing around the dropdown
+            caret.
+          </p>
+          <p class="text-medium-emphasis small">
+            We use this extra class to reduce the horizontal
+            <code>padding</code> on either side of the caret by 25% and remove
+            the <code>margin-left</code> that&#39;s attached for normal button
+            dropdowns. Those additional changes hold the caret centered in the
+            split button and implement a more properly sized hit area next to
+            the main button.
+          </p>
+          <Example href="components/dropdown#split-button">
+            <template
+              v-for="color in [
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ]"
+              :key="color"
+            >
+              <CDropdown variant="btn-group">
+                <CButton :color="color">{{ color }}</CButton>
+                <CDropdownToggle :color="color" split>{{
+                  color
+                }}</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Sizing</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Button dropdowns work with buttons of all sizes, including default
+            and split dropdown buttons.
+          </p>
+          <Example href="components/dropdown#sizing">
+            <CDropdown variant="btn-group">
+              <CDropdownToggle color="secondary" size="lg">
+                Large button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown variant="btn-group">
+              <CButton color="secondary" size="lg">
+                Large split button
+              </CButton>
+              <CDropdownToggle color="secondary" size="lg" split />
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+          <Example href="components/dropdown#sizing">
+            <CDropdown variant="btn-group">
+              <CDropdownToggle color="secondary" size="sm">
+                Small button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown variant="btn-group">
+              <CButton color="secondary" size="sm">
+                Small split button
+              </CButton>
+              <CDropdownToggle color="secondary" size="sm" split />
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Single button</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Opt into darker dropdowns to match a dark navbar or custom style by
+            set
+            <code>dark</code> property. No changes are required to the dropdown
+            items.
+          </p>
+          <Example href="components/dropdown#dark-dropdowns">
+            <CDropdown dark>
+              <CDropdownToggle color="secondary"
+                >Dropdown button</CDropdownToggle
+              >
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+          <p class="text-medium-emphasis small">
+            And putting it to use in a navbar:
+          </p>
+          <Example href="components/dropdown#dark-dropdowns">
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+              <div class="container-fluid">
+                <a class="navbar-brand" href="https://coreui.io/react/">
+                  Navbar
+                </a>
+                <button
+                  class="navbar-toggler"
+                  type="button"
+                  data-coreui-toggle="collapse"
+                  data-coreui-target="#navbarNavDarkDropdown"
+                  aria-controls="navbarNavDarkDropdown"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation"
+                >
+                  <span class="navbar-toggler-icon"></span>
+                </button>
+                <div
+                  class="collapse navbar-collapse"
+                  id="navbarNavDarkDropdown"
+                >
+                  <ul class="navbar-nav">
+                    <CDropdown dark component="li" variant="nav-item">
+                      <CDropdownToggle>Dropdown</CDropdownToggle>
+                      <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#"
+                          >Something else here</CDropdownItem
+                        >
+                        <CDropdownDivider />
+                        <CDropdownItem href="#">Separated link</CDropdownItem>
+                      </CDropdownMenu>
+                    </CDropdown>
+                  </ul>
+                </div>
+              </div>
+            </nav>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Dropup</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Trigger dropdown menus above elements by adding
+            <code>direction=&#34;dropup&#34;</code> to the
+            <code>&lt;CDropdown&gt;</code>
+            component.
+          </p>
+          <Example href="components/dropdown#dropup">
+            <CDropdown variant="btn-group" direction="dropup">
+              <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown variant="btn-group" direction="dropup">
+              <CButton color="secondary">Small split button</CButton>
+              <CDropdownToggle color="secondary" split />
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Dropright</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Trigger dropdown menus at the right of the elements by adding
+            <code>direction=&#34;dropend&#34;</code> to the
+            <code>&lt;CDropdown&gt;</code>
+            component.
+          </p>
+          <Example href="components/dropdown#dropright">
+            <CDropdown variant="btn-group" direction="dropend">
+              <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown variant="btn-group" direction="dropend">
+              <CButton color="secondary">Small split button</CButton>
+              <CDropdownToggle color="secondary" split />
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>React Dropdown</strong> <small>Dropleft</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Trigger dropdown menus at the left of the elements by adding
+            <code>direction=&#34;dropstart&#34;</code> to the
+            <code>&lt;CDropdown&gt;</code>
+            component.
+          </p>
+          <Example href="components/dropdown#dropleft">
+            <CButtonGroup>
+              <CDropdown variant="btn-group" direction="dropstart">
+                <CDropdownToggle color="secondary" split />
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CButton color="secondary">Small split button</CButton>
+            </CButtonGroup>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Dropdowns',
+}
+</script>
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
index a79aceed..20fdf0e1 100644
--- a/src/views/charts/CChartDoughnutExample.vue
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -12,7 +12,7 @@ export default {
   computed: {
     defaultData () {
       return {
-        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
         datasets: [
           {
             backgroundColor: [
@@ -28,4 +28,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
index a17f9fd3..01f214d9 100644
--- a/src/views/charts/CChartPieExample.vue
+++ b/src/views/charts/CChartPieExample.vue
@@ -12,7 +12,7 @@ export default {
   computed: {
     defaultData () {
       return {
-        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
         datasets: [
           {
             backgroundColor: [
@@ -28,4 +28,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index b06a1877..036b954e 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -6,7 +6,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Checkbox</strong>
+          <strong>Vue Checkbox</strong>
         </CCardHeader>
         <CCardBody>
           <Example href="forms/checks-radios">
@@ -23,7 +23,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Checkbox</strong> <small>Disabled</small>
+          <strong>Vue Checkbox</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -45,7 +45,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Radio</strong>
+          <strong>Vue Radio</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -74,7 +74,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Radio</strong> <small>Disabled</small>
+          <strong>Vue Radio</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
           <Example href="forms/checks-radios#disabled-1">
@@ -100,7 +100,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Switches</strong>
+          <strong>Vue Switches</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -136,7 +136,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Switches</strong> <small>Sizes</small>
+          <strong>Vue Switches</strong> <small>Sizes</small>
         </CCardHeader>
         <CCardBody>
           <Example href="forms/checks-radios#sizes">
@@ -161,7 +161,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Checks and Radios</strong>
+          <strong>Vue Checks and Radios</strong>
           <small>Default layout (stacked)</small>
         </CCardHeader>
         <CCardBody>
@@ -204,7 +204,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Checks and Radios</strong> <small>Inline</small>
+          <strong>Vue Checks and Radios</strong> <small>Inline</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -256,7 +256,7 @@
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Checks and Radios</strong> <small>Without labels</small>
+          <strong>Vue Checks and Radios</strong> <small>Without labels</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index b24ed9cc..7c8f1895 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -43,8 +43,7 @@
         <CCardBody>
           <p class="text-medium-emphasis small">
             Set heights using <code>size</code> property like
-            <code>size=&#34;lg&#34;</code> and
-            <code>size=&#34;sm&#34;</code>.
+            <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
           </p>
           <Example href="forms/form-control#sizing">
             <CFormInput
@@ -137,10 +136,7 @@
           </p>
           <Example href="components/accordion">
             <CRow class="mb-3">
-              <CFormLabel
-                for="staticEmail"
-                class="col-sm-2 col-form-label"
-              >
+              <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
                 Email
               </CFormLabel>
               <div class="col-sm-10">
@@ -154,10 +150,7 @@
               </div>
             </CRow>
             <CRow class="mb-3">
-              <CFormLabel
-                for="inputPassword"
-                class="col-sm-2 col-form-label"
-              >
+              <CFormLabel for="inputPassword" class="col-sm-2 col-form-label">
                 Password
               </CFormLabel>
               <div class="col-sm-10">
@@ -180,10 +173,7 @@
                 />
               </div>
               <div class="col-auto">
-                <CFormLabel
-                  for="inputPassword2"
-                  class="visually-hidden"
-                >
+                <CFormLabel for="inputPassword2" class="visually-hidden">
                   Password
                 </CFormLabel>
                 <CFormInput
@@ -193,9 +183,7 @@
                 />
               </div>
               <div class="col-auto">
-                <CButton type="submit" class="mb-3">
-                  Confirm identity
-                </CButton>
+                <CButton type="submit" class="mb-3"> Confirm identity </CButton>
               </div>
             </CForm>
           </Example>
@@ -210,9 +198,7 @@
         <CCardBody>
           <Example href="forms/form-control#file-input">
             <div class="mb-3">
-              <CFormLabel for="formFile"
-                >Default file input example</CFormLabel
-              >
+              <CFormLabel for="formFile">Default file input example</CFormLabel>
               <CFormInput type="file" id="formFile" />
             </div>
             <div class="mb-3">
@@ -228,15 +214,11 @@
               <CFormInput type="file" id="formFileDisabled" disabled />
             </div>
             <div class="mb-3">
-              <CFormLabel for="formFileSm"
-                >Small file input example</CFormLabel
-              >
+              <CFormLabel for="formFileSm">Small file input example</CFormLabel>
               <CFormInput type="file" size="sm" id="formFileSm" />
             </div>
             <div>
-              <CFormLabel for="formFileLg"
-                >Large file input example</CFormLabel
-              >
+              <CFormLabel for="formFileLg">Large file input example</CFormLabel>
               <CFormInput type="file" size="lg" id="formFileLg" />
             </div>
           </Example>
@@ -266,6 +248,6 @@
 
 <script>
 export default {
-  name: "FormControl",
-};
+  name: 'FormControl',
+}
 </script>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index abe76de7..e5991a20 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,69 +1,146 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <DocsCallout name="Alert" href="components/alert" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue Alerts</strong>
+          <strong>Vue Alert</strong>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Alerts examples</h4>
-            <Example href="components/alert.html#examples">
-                <CAlert color="primary">A simple primary alert—check it out!</CAlert>
-                <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
-                <CAlert color="success">A simple success alert—check it out!</CAlert>
-                <CAlert color="danger">A simple danger alert—check it out!</CAlert>
-                <CAlert color="warning">A simple warning alert—check it out!</CAlert>
-                <CAlert color="info">A simple info alert—check it out!</CAlert>
-                <CAlert color="light">A simple light alert—check it out!</CAlert>
-                <CAlert color="dark">A simple dark alert—check it out!</CAlert>
-            </Example>
-
-            <h4 class="mt-4">Link color</h4>
-            <Example href="components/alert.html#link-color">
-                <CAlert color="primary">
-                    A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="secondary">
-                    A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="success">
-                    A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="danger">
-                    A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="warning">
-                    A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="info">
-                    A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="light">
-                    A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-                <CAlert color="dark">
-                    A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-                </CAlert>
-            </Example>
-
-            <h4 class="mt-4">Additional content</h4>
-            <Example href="components/alert.html#additional-content">
-                <CAlert color="success" v-bind:visible="true">
-                    <CAlertHeading>Well done!</CAlertHeading>
-                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-                    <hr />
-                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-                </CAlert>
-            </Example>
-
-            <h4 class="mt-4">Dismissing</h4>
-            <Example href="components/alert.html#dismissing">
-                <CAlert color="warning" dismissible @dismiss="alert">
-                    <strong>Go right ahead</strong> and click that dimiss over there on the right.
-                </CAlert>
-            </Example>
-
-
+          <p class="text-medium-emphasis small">
+            Vue Alert is prepared for any length of text, as well as an
+            optional close button. For a styling, use one of the
+            <strong>required</strong> contextual <code>color</code> props
+            (e.g., <code>primary</code>). For inline dismissal, use the
+            <a
+              href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
+            >
+              dismissing prop
+            </a>
+            .
+          </p>
+          <Example href="components/alert">
+            <CAlert color="primary"
+              >A simple primary alert—check it out!</CAlert
+            >
+            <CAlert color="secondary"
+              >A simple secondary alert—check it out!</CAlert
+            >
+            <CAlert color="success"
+              >A simple success alert—check it out!</CAlert
+            >
+            <CAlert color="danger">A simple danger alert—check it out!</CAlert>
+            <CAlert color="warning"
+              >A simple warning alert—check it out!</CAlert
+            >
+            <CAlert color="info">A simple info alert—check it out!</CAlert>
+            <CAlert color="light">A simple light alert—check it out!</CAlert>
+            <CAlert color="dark">A simple dark alert—check it out!</CAlert>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Alert</strong> <small>Link color</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use the <code>&lt;CAlertLink&gt;</code> component to immediately
+            give matching colored links inside any alert.
+          </p>
+          <Example href="components/alert#link-color">
+            <CAlert color="primary">
+              A simple primary alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="secondary">
+              A simple secondary alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="success">
+              A simple success alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="danger">
+              A simple danger alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="warning">
+              A simple warning alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="info">
+              A simple info alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="light">
+              A simple light alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+            <CAlert color="dark">
+              A simple dark alert with
+              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+              if you like.
+            </CAlert>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Alert</strong> <small>Additional content</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Alert can also incorporate supplementary components &amp; elements
+            like heading, paragraph, and divider.
+          </p>
+          <Example href="components/alert#additional-content">
+            <CAlert color="success">
+              <CAlertHeading tag="h4">Well done!</CAlertHeading>
+              <p>
+                Aww yeah, you successfully read this important alert message.
+                This example text is going to run a bit longer so that you can
+                see how spacing within an alert works with this kind of content.
+              </p>
+              <hr />
+              <p class="mb-0">
+                Whenever you need to, be sure to use margin utilities to keep
+                things nice and tidy.
+              </p>
+            </CAlert>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Alert</strong> <small>Dismissing</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Alerts can also be easily dismissed. Just add the
+            <code>dismissible</code> prop.
+          </p>
+          <Example href="components/alert#dismissing">
+            <CAlert color="warning" dismissible @dismiss="alert">
+              <strong>Go right ahead</strong> and click that dimiss over there
+              on the right.
+            </CAlert>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -72,11 +149,11 @@
 
 <script>
 export default {
-    name: "Alerts",
-    methods: {
-      alert: function(){
-        alert("👋 Well, hi there! Thanks for dismissing me.")
-      },
-    }
+  name: "Alerts",
+  methods: {
+    alert: function () {
+      alert("👋 Well, hi there! Thanks for dismissing me.");
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index ee46e077..71e95ab9 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,53 +1,90 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <DocsCallout name="Badges" href="components/badge" />
+    </CCol>
+    <CCol :lg="6">
+      <CCard class="mb-4">
         <CCardHeader>
-          <strong>Vue Badges</strong>
+          <strong>Vue Badges</strong> <small>Dismissing</small>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Basic usage</h4>
-            <Example href="components/badge.html#basic-usage">
-                <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
-                <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
-                <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
-                <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
-                <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
-                <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
-            </Example>
-            <Example href="components/badge.html#basic-usage">
-                <CButton color="primary">
-                    Notifications <CBadge color="secondary">4</CBadge>
-                </CButton>
-                <br>
-                <CButton color="primary">
-                    Profile <CBadge color="secondary">9</CBadge>
-                    <span class="visually-hidden">unread messages</span>
-                </CButton>
-
-            </Example>
-
-            <h4 class="mt-4">Contextual variations</h4>
-            <Example href="components/badge.html#contextual-variations">
-                <CBadge color="primary">primary</CBadge>
-                <CBadge color="success">success</CBadge>
-                <CBadge color="danger">danger</CBadge>
-                <CBadge color="warning">warning</CBadge>
-                <CBadge color="info">info</CBadge>
-                <CBadge color="light">light</CBadge>
-                <CBadge color="dark">dark</CBadge>
-            </Example>
-
-            <h4 class="mt-4">Pill badges</h4>
-            <Example href="components/badge.html#pill-badges">
-                <CBadge color="primary" shape="rounded-pill">primary</CBadge>
-                <CBadge color="success" shape="rounded-pill">success</CBadge>
-                <CBadge color="danger" shape="rounded-pill">danger</CBadge>
-                <CBadge color="warning" shape="rounded-pill">warning</CBadge>
-                <CBadge color="info" shape="rounded-pill">info</CBadge>
-                <CBadge color="light" shape="rounded-pill">light</CBadge>
-                <CBadge color="dark" shape="rounded-pill">dark</CBadge>
-            </Example>
+          <p class="text-medium-emphasis small">
+            Bootstrap badge scale to suit the size of the parent element by
+            using relative font sizing and <code>em</code> units.
+          </p>
+          <Example href="components/badge">
+            <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
+            <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
+            <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
+            <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
+            <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
+            <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Badges can be used as part of links or buttons to provide a counter.
+          </p>
+          <Example href="components/badge">
+            <CButton color="primary">
+              Notifications <CBadge color="secondary">4</CBadge>
+            </CButton>
+          </Example>
+          <p class="text-medium-emphasis small">
+            Remark that depending on how you use them, badges may be complicated
+            for users of screen readers and related assistive technologies.
+          </p>
+          <p class="text-medium-emphasis small">
+            Unless the context is clear, consider including additional context
+            with a visually hidden piece of additional text.
+          </p>
+          <Example href="components/badge">
+            <CButton color="primary">
+              Profile <CBadge color="secondary">9</CBadge>
+              <span class="visually-hidden">unread messages</span>
+            </CButton>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :lg="6">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Badges</strong> <small>Contextual variations</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add any of the below-mentioned <code>color</code> props to modify
+            the presentation of a badge.
+          </p>
+          <Example href="components/badge#contextual-variations">
+            <CBadge color="primary">primary</CBadge>
+            <CBadge color="success">success</CBadge>
+            <CBadge color="danger">danger</CBadge>
+            <CBadge color="warning">warning</CBadge>
+            <CBadge color="info">info</CBadge>
+            <CBadge color="light">light</CBadge>
+            <CBadge color="dark">dark</CBadge>
+          </Example>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Badges</strong> <small>Pill badges</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
+            badges rounded.
+          </p>
+          <Example href="components/badge#pill-badges">
+            <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
+            <CBadge color="success" shape="rounded-pill"> success </CBadge>
+            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
+            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
+            <CBadge color="info" shape="rounded-pill"> info </CBadge>
+            <CBadge color="light" shape="rounded-pill"> light </CBadge>
+            <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -58,4 +95,4 @@
 export default {
   name: "Badges",
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 240a6fdf..6ece2699 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,406 +1,1019 @@
 <template>
   <CRow>
-    <CCol>
-      <CCard>
+    <CCol :xs="12">
+      <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Modals</strong>
         </CCardHeader>
         <CCardBody>
-            <h4 class="mt-4">Example</h4>
-            <Example href="components/modal.html#modal-components">
-                <CModal class="show d-block position-static" :backdrop="false" :keyboard="false" visible>
-                    <CModalHeader dismiss>
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>Modal body text goes here.</CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary">Close</CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Live demo</h4>
-            <Example href="components/modal.html#live-demo">
-                <CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
-                <CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleLiveDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary" @click="() => { visibleLiveDemo = false }">
-                            Close
-                        </CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Static backdrop</h4>
-            <Example href="components/modal.html#static-backdrop">
-                <CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
-                <CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleStaticBackdropDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary" @click="() => { visibleStaticBackdropDemo = false }">
-                            Close
-                        </CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-
-            <h4 class="mt-4">Scrolling long content</h4>
-            <Example href="components/modal.html#scrolling-long-content">
-                <CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
-                <CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleScrollingLongContentDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                    </CModalBody>
-                </CModal>
-            </Example>
-
-
-            <h4 class="mt-4">Visible scrollable</h4>
-            <Example href="components/modal.html#scrolling-long-content">
-                <CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
-                <CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleScrollableDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                        <p>
-                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros.
-                        </p>
-                        <p>
-                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-                            lacus vel augue laoreet rutrum faucibus dolor auctor.
-                        </p>
-                        <p>
-                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-                            auctor fringilla.
-                        </p>
-                    </CModalBody>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Vertically centered</h4>
-            <Example href="components/modal.html#vertically-centered">
-                <CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
-                <CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-                    </CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary" @click="() => { visibleVerticallyCenteredDemo = false }">
-                            Close
-                        </CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Vertically scrollable demo</h4>
-            <Example href="components/modal.html#vertically-centered">
-                <CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
-                <CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-                    </CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary" @click="() => { visibleVerticallyCenteredScrollableDemo = false }">
-                            Close
-                        </CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Tooltips and popovers</h4>
-            <Example href="components/modal.html#tooltips-and-popovers">
-                <CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
-                <CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { tooltipsAndPopoversDemo = false }">
-                        <CModalTitle>Modal title</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        <h5>Popover in a modal</h5>
-                        <p>This <CButton color="secondary" v-c-popover="{header: 'Popover title', content: 'Popover body content is set in this property.'}">button</CButton></p>
-                        <hr/>
-                        <h5>Tooltips in a modal</h5>
-                        <p>
-                            <CLink v-c-tooltip="'Tooltip'">This link</CLink> and <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
-                        </p>
-                    </CModalBody>
-                    <CModalFooter>
-                        <CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
-                            Close
-                        </CButton>
-                        <CButton color="primary">Save changes</CButton>
-                    </CModalFooter>
-                </CModal>
-            </Example>
-
-
-            <h4 class="mt-4">Optional sizes</h4>
-            <Example href="components/modal.html#optional-sizes">
-                <CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
-                <CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
-                <CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
-                <CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { xlDemo = false }">
-                        <CModalTitle>Extra large modal</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { lgDemo = false }">
-                        <CModalTitle>Large modal</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { smDemo = false }">
-                        <CModalTitle>Small modal</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-            </Example>
-
-            <h4 class="mt-4">Fullscreen Modal</h4>
-            <Example href="components/modal.html#fullscreen-modal">
-                <CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
-                <CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
-                <CButton color="primary" @click="() => { fullscreenMdDemo = true }">Full screen below md</CButton>
-                <CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
-                <CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
-                <CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
-                <CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { xlDemo = false }">
-                        <CModalTitle>Full screen</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { fullscreenSmDemo = false }">
-                        <CModalTitle>Full screen below sm</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { fullscreenMdDemo = false }">
-                        <CModalTitle>Full screen below md</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { fullscreenLgDemo = false }">
-                        <CModalTitle>Full screen below lg</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { fullscreenXlDemo = false }">
-                        <CModalTitle>Full screen below xl</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-                <CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
-                    <CModalHeader dismiss @dismiss="() => { fullscreenXxlDemo = false }">
-                        <CModalTitle>Full screen below xxl</CModalTitle>
-                    </CModalHeader>
-                    <CModalBody>
-                        ...
-                    </CModalBody>
-                </CModal>
-            </Example>
+          <p class="text-medium-emphasis small">
+            Below is a static modal example (meaning its
+            <code>position</code> and <code>display</code> have been
+            overridden). Included are the modal header, modal body (required for
+            <code>padding</code>), and modal footer (optional). We ask that you
+            include modal headers with dismiss actions whenever possible, or
+            provide another explicit dismiss action.
+          </p>
+          <Example href="components/modal.html#modal-components">
+            <CModal
+              class="show d-block position-static"
+              :backdrop="false"
+              :keyboard="false"
+              visible
+            >
+              <CModalHeader dismiss>
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>Modal body text goes here.</CModalBody>
+              <CModalFooter>
+                <CButton color="secondary">Close</CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Live demo</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Toggle a working modal demo by clicking the button below. It will
+            slide down and fade in from the top of the page.
+          </p>
+          <Example href="components/modal.html#live-demo">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleLiveDemo = true
+                }
+              "
+              >Launch demo modal</CButton
+            >
+            <CModal
+              :visible="visibleLiveDemo"
+              @dismiss="
+                () => {
+                  visibleLiveDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleLiveDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody
+                >Woohoo, you're reading this text in a modal!</CModalBody
+              >
+              <CModalFooter>
+                <CButton
+                  color="secondary"
+                  @click="
+                    () => {
+                      visibleLiveDemo = false
+                    }
+                  "
+                >
+                  Close
+                </CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Static backdrop</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            If you don’t provide an <code>onDimsiss</code> handler to the Modal
+            component, your modal will behave as though the backdrop is static,
+            meaning it will not close when clicking outside it. Click the button
+            below to try it.
+          </p>
+          <Example href="components/modal.html#static-backdrop">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleStaticBackdropDemo = true
+                }
+              "
+              >Launch demo modal</CButton
+            >
+            <CModal
+              backdrop="static"
+              :visible="visibleStaticBackdropDemo"
+              @dismiss="
+                () => {
+                  visibleStaticBackdropDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleStaticBackdropDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody
+                >Woohoo, you're reading this text in a modal!</CModalBody
+              >
+              <CModalFooter>
+                <CButton
+                  color="secondary"
+                  @click="
+                    () => {
+                      visibleStaticBackdropDemo = false
+                    }
+                  "
+                >
+                  Close
+                </CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Scrolling long content</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            If you don’t provide an <code>onDimsiss</code> handler to the Modal
+            component, your modal will behave as though the backdrop is static,
+            meaning it will not close when clicking outside it. Click the button
+            below to try it.
+          </p>
+          <Example href="components/modal.html#scrolling-long-content">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleScrollingLongContentDemo = true
+                }
+              "
+              >Launch demo modal</CButton
+            >
+            <CModal
+              :visible="visibleScrollingLongContentDemo"
+              @dismiss="
+                () => {
+                  visibleScrollingLongContentDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleScrollingLongContentDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+              </CModalBody>
+            </CModal>
+          </Example>
+          <p class="text-medium-emphasis small">
+            You can also create a scrollable modal that allows scroll the modal
+            body by adding
+            <code>scrollable</code> prop.
+          </p>
+          <Example href="components/modal.html#scrolling-long-content">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleScrollableDemo = true
+                }
+              "
+              >Launch demo modal</CButton
+            >
+            <CModal
+              scrollable
+              :visible="visibleScrollableDemo"
+              @dismiss="
+                () => {
+                  visibleScrollableDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleScrollableDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+                <p>
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  risus, porta ac consectetur ac, vestibulum at eros.
+                </p>
+                <p>
+                  Praesent commodo cursus magna, vel scelerisque nisl
+                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  rutrum faucibus dolor auctor.
+                </p>
+                <p>
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  fringilla.
+                </p>
+              </CModalBody>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Vertically centered</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>alignment=&#34;center&#34;</code> to
+            <code>&lt;CModal&gt;</code> to vertically center the modal.
+          </p>
+          <Example href="components/modal.html#vertically-centered">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleVerticallyCenteredDemo = true
+                }
+              "
+              >Vertically centered modal</CButton
+            >
+            <CModal
+              alignment="center"
+              :visible="visibleVerticallyCenteredDemo"
+              @dismiss="
+                () => {
+                  visibleVerticallyCenteredDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleVerticallyCenteredDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>
+                Cras mattis consectetur purus sit amet fermentum. Cras justo
+                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                risus, porta ac consectetur ac, vestibulum at eros.
+              </CModalBody>
+              <CModalFooter>
+                <CButton
+                  color="secondary"
+                  @click="
+                    () => {
+                      visibleVerticallyCenteredDemo = false
+                    }
+                  "
+                >
+                  Close
+                </CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
 
+          <Example href="components/modal.html#vertically-centered">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  visibleVerticallyCenteredScrollableDemo = true
+                }
+              "
+              >Vertically centered scrollable modal</CButton
+            >
+            <CModal
+              alignment="center"
+              scrollable
+              :visible="visibleVerticallyCenteredScrollableDemo"
+              @dismiss="
+                () => {
+                  visibleVerticallyCenteredScrollableDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    visibleVerticallyCenteredScrollableDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>
+                Cras mattis consectetur purus sit amet fermentum. Cras justo
+                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                risus, porta ac consectetur ac, vestibulum at eros.
+              </CModalBody>
+              <CModalFooter>
+                <CButton
+                  color="secondary"
+                  @click="
+                    () => {
+                      visibleVerticallyCenteredScrollableDemo = false
+                    }
+                  "
+                >
+                  Close
+                </CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            <code>&lt;CTooltips&gt;</code> and
+            <code>&lt;CPopovers&gt;</code> can be placed within modals as
+            needed. When modals are closed, any tooltips and popovers within are
+            also automatically dismissed.
+          </p>
+          <Example href="components/modal.html#tooltips-and-popovers">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  tooltipsAndPopoversDemo = true
+                }
+              "
+              >Launch demo modal</CButton
+            >
+            <CModal
+              :visible="tooltipsAndPopoversDemo"
+              @dismiss="
+                () => {
+                  tooltipsAndPopoversDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    tooltipsAndPopoversDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Modal title</CModalTitle>
+              </CModalHeader>
+              <CModalBody>
+                <h5>Popover in a modal</h5>
+                <p>
+                  This
+                  <CButton
+                    color="secondary"
+                    v-c-popover="{
+                      header: 'Popover title',
+                      content: 'Popover body content is set in this property.',
+                    }"
+                    >button</CButton
+                  >
+                </p>
+                <hr />
+                <h5>Tooltips in a modal</h5>
+                <p>
+                  <CLink v-c-tooltip="'Tooltip'">This link</CLink> and
+                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips
+                  on hover.
+                </p>
+              </CModalBody>
+              <CModalFooter>
+                <CButton
+                  color="secondary"
+                  @click="
+                    () => {
+                      tooltipsAndPopoversDemo = false
+                    }
+                  "
+                >
+                  Close
+                </CButton>
+                <CButton color="primary">Save changes</CButton>
+              </CModalFooter>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Optional sizes</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Modals have three optional sizes, available via modifier classes to
+            be placed on a
+            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
+            breakpoints to avoid horizontal scrollbars on narrower viewports.
+          </p>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Size</th>
+                <th>Property size</th>
+                <th>Modal max-width</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Small</td>
+                <td>
+                  <code>&#39;sm&#39;</code>
+                </td>
+                <td>
+                  <code>300px</code>
+                </td>
+              </tr>
+              <tr>
+                <td>Default</td>
+                <td class="text-medium-emphasis">None</td>
+                <td>
+                  <code>500px</code>
+                </td>
+              </tr>
+              <tr>
+                <td>Large</td>
+                <td>
+                  <code>&#39;lg&#39;</code>
+                </td>
+                <td>
+                  <code>800px</code>
+                </td>
+              </tr>
+              <tr>
+                <td>Extra large</td>
+                <td>
+                  <code>&#39;xl&#39;</code>
+                </td>
+                <td>
+                  <code>1140px</code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <Example href="components/modal.html#optional-sizes">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  xlDemo = true
+                }
+              "
+              >Extra large modal</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  lgDemo = true
+                }
+              "
+              >Large modal</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  smDemo = true
+                }
+              "
+              >Small modal</CButton
+            >
+            <CModal
+              size="xl"
+              :visible="xlDemo"
+              @dismiss="
+                () => {
+                  xlDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    xlDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Extra large modal</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              size="lg"
+              :visible="lgDemo"
+              @dismiss="
+                () => {
+                  lgDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    lgDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Large modal</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              size="sm"
+              :visible="smDemo"
+              @dismiss="
+                () => {
+                  smDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    smDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Small modal</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Another override is the option to pop up a modal that covers the
+            user viewport, available via property <code>fullscrean</code>.
+          </p>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Property fullscrean</th>
+                <th>Availability</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>true</code>
+                </td>
+                <td>Always</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&#39;sm&#39;</code>
+                </td>
+                <td>Below <code>576px</code></td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&#39;md&#39;</code>
+                </td>
+                <td>Below <code>768px</code></td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&#39;lg&#39;</code>
+                </td>
+                <td>Below <code>992px</code></td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&#39;xl&#39;</code>
+                </td>
+                <td>Below <code>1200px</code></td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&#39;xxl&#39;</code>
+                </td>
+                <td>Below <code>1400px</code></td>
+              </tr>
+            </tbody>
+          </table>
+          <Example href="components/modal.html#fullscreen-modal">
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenDemo = true
+                }
+              "
+              >Full screen</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenSmDemo = true
+                }
+              "
+              >Full screen below sm</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenMdDemo = true
+                }
+              "
+              >Full screen below md</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenLgDemo = true
+                }
+              "
+              >Full screen below lg</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenXlDemo = true
+                }
+              "
+              >Full screen below xl</CButton
+            >
+            <CButton
+              color="primary"
+              @click="
+                () => {
+                  fullscreenXxlDemo = true
+                }
+              "
+              >Full screen below xxl</CButton
+            >
+            <CModal
+              fullscreen
+              :visible="fullscreenDemo"
+              @dismiss="
+                () => {
+                  fullscreenDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    xlDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              fullscreen="sm"
+              :visible="fullscreenSmDemo"
+              @dismiss="
+                () => {
+                  fullscreenSmDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    fullscreenSmDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen below sm</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              fullscreen="md"
+              :visible="fullscreenMdDemo"
+              @dismiss="
+                () => {
+                  fullscreenMdDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    fullscreenMdDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen below md</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              fullscreen="lg"
+              :visible="fullscreenLgDemo"
+              @dismiss="
+                () => {
+                  fullscreenLgDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    fullscreenLgDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen below lg</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              fullscreen="xl"
+              :visible="fullscreenXlDemo"
+              @dismiss="
+                () => {
+                  fullscreenXlDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    fullscreenXlDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen below xl</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+            <CModal
+              fullscreen="xxl"
+              :visible="fullscreenXxlDemo"
+              @dismiss="
+                () => {
+                  fullscreenXxlDemo = false
+                }
+              "
+            >
+              <CModalHeader
+                dismiss
+                @dismiss="
+                  () => {
+                    fullscreenXxlDemo = false
+                  }
+                "
+              >
+                <CModalTitle>Full screen below xxl</CModalTitle>
+              </CModalHeader>
+              <CModalBody> ... </CModalBody>
+            </CModal>
+          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -409,25 +1022,25 @@
 
 <script>
 export default {
-    name: "Modals",
-    data: function(){
-        return {
-            visibleLiveDemo: false,
-            visibleStaticBackdropDemo: false,
-            visibleScrollingLongContentDemo: false,
-            visibleScrollableDemo: false,
-            visibleVerticallyCenteredDemo: false,
-            visibleVerticallyCenteredScrollableDemo: false,
-            xlDemo: false,
-            lgDemo: false,
-            smDemo: false,
-            fullscreenDemo: false,
-            fullscreenSmDemo: false,
-            fullscreenMdDemo: false,
-            fullscreenLgDemo: false,
-            fullscreenXlDemo: false,
-            fullscreenXxlDemo: false,
-      }
-  }
-};
-</script>
\ No newline at end of file
+  name: 'Modals',
+  data: function () {
+    return {
+      visibleLiveDemo: false,
+      visibleStaticBackdropDemo: false,
+      visibleScrollingLongContentDemo: false,
+      visibleScrollableDemo: false,
+      visibleVerticallyCenteredDemo: false,
+      visibleVerticallyCenteredScrollableDemo: false,
+      xlDemo: false,
+      lgDemo: false,
+      smDemo: false,
+      fullscreenDemo: false,
+      fullscreenSmDemo: false,
+      fullscreenMdDemo: false,
+      fullscreenLgDemo: false,
+      fullscreenXlDemo: false,
+      fullscreenXxlDemo: false,
+    }
+  },
+}
+</script>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 9d35d07a..f6e9d8f5 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Widgets</strong>
         </CCardHeader>