From e005cd1556b40d1000895a85adb1d7c7fb50d544 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 16 May 2019 21:14:48 +0200
Subject: [PATCH] feat: change styles of notification and button sections to
 version 3

---
 src/views/buttons/BrandButtons.vue    | 455 +++++++++++++-------------
 src/views/buttons/ButtonGroups.vue    |  58 ++--
 src/views/buttons/Dropdowns.vue       | 198 +++++++----
 src/views/buttons/StandardButtons.vue | 398 +++++++++++-----------
 src/views/notifications/Alerts.vue    |  57 ++--
 src/views/notifications/Badges.vue    |   7 +-
 src/views/notifications/Modals.vue    |  51 +--
 7 files changed, 661 insertions(+), 563 deletions(-)

diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index d51e31a3..168a48ca 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol col="12">
         <CCard>
@@ -7,91 +7,92 @@
             <strong>Brand Button</strong>
           </CCardHeader>
           <CCardBody>
-            <small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <small>Usage </small>
+            <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton size="sm" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <CButton variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <CButton size="lg" variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton size="lg" variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton size="lg" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton size="lg" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton size="lg" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton size="lg" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton size="lg" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton size="lg" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton size="lg" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton size="lg" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton size="lg" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton size="lg" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton size="lg" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton size="lg" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton size="lg" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton size="lg" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton size="lg" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton size="lg" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton size="lg" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton size="lg" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton size="lg" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton size="lg" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton size="lg" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton size="lg" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton size="lg" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -106,87 +107,87 @@
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <CButton size="sm" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton size="sm" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton size="sm" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton size="sm" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton size="sm" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton size="sm" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton size="sm" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton size="sm" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton size="sm" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton size="sm" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton size="sm" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton size="sm" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton size="sm" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton size="sm" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton size="sm" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton size="sm" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton size="sm" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton size="sm" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton size="sm" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton size="sm" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton size="sm" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton size="sm" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton size="sm" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton size="sm" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton size="sm" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <CButton variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <CButton size="lg" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton size="lg" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton size="lg" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton size="lg" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton size="lg" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton size="lg" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton size="lg" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton size="lg" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton size="lg" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton size="lg" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton size="lg" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton size="lg" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton size="lg" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton size="lg" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton size="lg" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton size="lg" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton size="lg" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton size="lg" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton size="lg" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton size="lg" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton size="lg" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton size="lg" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton size="lg" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton size="lg" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton size="lg" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -202,87 +203,87 @@
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+              <CButton size="sm" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <CButton size="sm" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+              <CButton size="sm" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+              <CButton size="sm" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+              <CButton size="sm" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+              <CButton size="sm" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+              <CButton size="sm" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+              <CButton size="sm" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+              <CButton size="sm" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+              <CButton size="sm" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
+              <CButton size="sm" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
+              <CButton size="sm" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
+              <CButton size="sm" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
+              <CButton size="sm" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
+              <CButton size="sm" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
+              <CButton size="sm" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
+              <CButton size="sm" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
+              <CButton size="sm" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
+              <CButton size="sm" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
+              <CButton size="sm" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
+              <CButton size="sm" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
+              <CButton size="sm" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
+              <CButton size="sm" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
+              <CButton size="sm" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
+              <CButton size="sm" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+              <CButton variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <CButton variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+              <CButton variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+              <CButton variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+              <CButton variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+              <CButton variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+              <CButton variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+              <CButton variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+              <CButton variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+              <CButton variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
+              <CButton variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
+              <CButton variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
+              <CButton variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
+              <CButton variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
+              <CButton variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
+              <CButton variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
+              <CButton variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
+              <CButton variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
+              <CButton variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
+              <CButton variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
+              <CButton variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
+              <CButton variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
+              <CButton variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
+              <CButton variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
+              <CButton variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+              <CButton size="lg" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <CButton size="lg" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+              <CButton size="lg" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+              <CButton size="lg" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+              <CButton size="lg" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+              <CButton size="lg" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+              <CButton size="lg" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+              <CButton size="lg" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+              <CButton size="lg" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+              <CButton size="lg" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
+              <CButton size="lg" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
+              <CButton size="lg" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
+              <CButton size="lg" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
+              <CButton size="lg" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
+              <CButton size="lg" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
+              <CButton size="lg" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
+              <CButton size="lg" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
+              <CButton size="lg" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
+              <CButton size="lg" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
+              <CButton size="lg" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
+              <CButton size="lg" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
+              <CButton size="lg" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
+              <CButton size="lg" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
+              <CButton size="lg" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
+              <CButton size="lg" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
           </CCardBody>
         </CCard>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index a42aefeb..7529d1cd 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12" >
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap button group</strong>
               <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -19,14 +20,14 @@
                   <CButton>Two</CButton>
                   <CButton>Three</CButton>
                   <CButton>Four</CButton>
-                  <CButton class="d-sm-down-none">Five</CButton>
+                  <CButton class="c-d-sm-down-none">Five</CButton>
                 </CButtonGroup>
                 <br><br>
                 <CButtonGroup>
-                  <CButton class="d-sm-down-none" variant="success">Success</CButton>
+                  <CButton class="c-d-sm-down-none" variant="success">Success</CButton>
                   <CButton variant="info">Info</CButton>
                   <CButton variant="warning">Warn</CButton>
-                  <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
+                  <CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
                   <CButton variant="danger">Danger</CButton>
                   <CButton variant="link">Link</CButton>
                 </CButtonGroup>
@@ -37,7 +38,8 @@
         <CCol col="12">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
+              <i class="fa fa-align-justify"></i>
+              <strong> Button group </strong>sizing
             </CCardHeader>
             <CCardBody>
               <div>
@@ -70,15 +72,15 @@
             <CCardBody>
               <div>
                 <CButtonGroup>
-                  <CButton class="d-sm-down-none">Button 1</CButton>
-                  <CButton class="d-sm-down-none">Button 2</CButton>
+                  <CButton class="c-d-sm-down-none">Button 1</CButton>
+                  <CButton class="c-d-sm-down-none">Button 2</CButton>
                   <CDropdown right text="Menu" variant="success">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownDivider></CDropdownDivider>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButton class="d-sm-down-none">Button 3</CButton>
+                  <CButton class="c-d-sm-down-none">Button 3</CButton>
                   <CDropdown right split text="Split Menu" variant="info">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
@@ -93,7 +95,8 @@
         <CCol col="12">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
+              <i class="fa fa-align-justify"></i>
+              <strong> Button group </strong>vertical variation
             </CCardHeader>
             <CCardBody>
               <div>
@@ -121,44 +124,47 @@
             <CCardBody>
               <div>
                 <CButtonToolbar aria-label="Toolbar with button groups">
-                  <CButtonGroup class="mx-1">
-                    <CButton class="d-sm-down-none">&laquo;</CButton>
+                  <CButtonGroup class="c-mx-1">
+                    <CButton class="c-d-sm-down-none">&laquo;</CButton>
                     <CButton>&lsaquo;</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="mx-1">
-                    <CButton class="d-sm-down-none">Edit</CButton>
+                  <CButtonGroup class="c-mx-1">
+                    <CButton class="c-d-sm-down-none">Edit</CButton>
                     <CButton>Undo</CButton>
                     <CButton>Redo</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
                     <CButton>&rsaquo;</CButton>
-                    <CButton class="d-sm-down-none">&raquo;</CButton>
+                    <CButton class="c-d-sm-down-none">&raquo;</CButton>
                   </CButtonGroup>
                 </CButtonToolbar>
               </div>
-              <hr class="d-sm-down-none"/>
+              <hr class="c-d-sm-down-none"/>
               <div>
-                <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
-                  <CButtonGroup size="sm" class="mx-1">
+                <CButtonToolbar
+                  aria-label="Toolbar with button groups and input groups"
+                  class="c-d-sm-down-none"c-
+                >
+                  <CButtonGroup size="sm" class="c-mx-1">
                     <CButton>New</CButton>
                     <CButton>Edit</CButton>
                   </CButtonGroup>
                   <CFormInput
-                    class="mb-0 w-25 mx-1"
+                    class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
                     prepend="$"
                     append=".00"
                     value="100"
                   />
                   <CFormSelect
-                    class="mb-0 w-25 mx-1"
+                    class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
                     prepend="Size"
                     value="Medium"
                     :options="['Large','Medium','Small']"
                     custom
                   />
-                  <CButtonGroup  size="sm" class="mx-1">
+                  <CButtonGroup size="sm" class="c-mx-1">
                     <CButton>Save</CButton>
                     <CButton>Cancel</CButton>
                   </CButtonGroup>
@@ -167,13 +173,13 @@
               <hr/>
               <div>
                 <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
-                  <CButtonGroup class="mx-1 d-sm-down-none">
+                  <CButtonGroup class="c-mx-1 c-d-sm-down-none">
                     <CButton>New</CButton>
                     <CButton>Edit</CButton>
                     <CButton>Undo</CButton>
                   </CButtonGroup>
                   <CDropdown
-                    class="mx-1"
+                    class="c-mx-1"
                     placement="bottom-end"
                     buttonContent="Menu"
                   >
@@ -181,7 +187,7 @@
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
                     <CButton>Save</CButton>
                     <CButton>Cancel</CButton>
                   </CButtonGroup>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 639a6182..b40e39a2 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12" md="6">
           <CCard>
@@ -15,7 +15,7 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown1" buttonHtml="Dropdown Button" class="m-2">
+                <CDropdown buttonHtml="Dropdown Button" class="c-m-2">
                   <CDropdownItem>First Action</CDropdownItem>
                   <CDropdownItem>Second Action</CDropdownItem>
                   <CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
                 </CDropdown>
               </div>
               <!-- <div>
-                <CDropdown id="ddown-buttons" buttonHtml="Dropdown using buttons as menu items" class="m-2">
+                <CDropdown buttonHtml="Dropdown using buttons as menu items" class="c-m-2">
                   <CDropdownItem>I'm a button</CDropdownItem>
                   <CDropdownItem>I'm also a button</CDropdownItem>
                   <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -33,7 +33,7 @@
                 </CDropdown>
               </div> -->
               <div>
-                <CDropdown id="ddown-divider" buttonHtml="Dropdown with divider" class="m-2">
+                <CDropdown buttonHtml="Dropdown with divider" class="c-m-2">
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second item</CDropdownItem>
                   <CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-header" buttonHtml="Dropdown with header" class="m-2">
+                <CDropdown buttonHtml="Dropdown with header" class="c-m-2">
                   <CDropdownHeader>Dropdown header</CDropdownHeader>
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second Item</CDropdownItem>
@@ -53,20 +53,26 @@
         <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>positioning</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-left" buttonHtml="Left align" variant="primary" class="m-2">
+                <CDropdown
+                  buttonHtml="Left align"
+                  variant="primary"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-right"
-                           placement="bottom-end"
-                           buttonHtml="Right align"
-                           variant="primary"
-                           class="m-2"
+                <CDropdown
+                  placement="bottom-end"
+                  buttonHtml="Right align"
+                  variant="primary"
+                  class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -74,11 +80,11 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-dropup"
-                           buttonHtml="Drop-Up"
-                           variant="info"
-                           class="m-2"
-                           dropup
+                <CDropdown
+                  buttonHtml="Drop-Up"
+                  variant="info"
+                  class="c-m-2"
+                  dropup
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -86,10 +92,10 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-offset"
-                           :offset="25"
-                           buttonHtml="Offset Dropdown"
-                           class="m-2"
+                <CDropdown
+                  :offset="25"
+                  buttonHtml="Offset Dropdown"
+                  class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -97,7 +103,11 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-split" split buttonHtml="Split Dropdown" class="m-2">
+                <CDropdown
+                  split
+                  buttonHtml="Split Dropdown"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -111,14 +121,17 @@
         <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>hidden caret</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown variant="link"
-                           size="lg"
-                           buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
-                           no-caret
+                <CDropdown
+                  variant="link"
+                  size="lg"
+                  buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
+                  no-caret
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -131,27 +144,46 @@
         <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>sizing</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-lg" size="lg" buttonHtml="Large" class="m-2">
+                <CDropdown
+                  size="lg"
+                  buttonHtml="Large"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-lg-split" size="lg" split buttonHtml="Large Split" class="m-2">
+                <CDropdown
+                  size="lg"
+                  split
+                  buttonHtml="Large Split"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
                 <br>
-                <CDropdown id="ddown-sm" size="sm" buttonHtml="Small" class="m-2">
+                <CDropdown
+                  size="sm"
+                  buttonHtml="Small"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-sm-split" size="sm" split buttonHtml="Small Split" class="m-2">
+                <CDropdown
+                  size="sm"
+                  split buttonHtml="Small Split"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -162,78 +194,132 @@
         </CCol>
       </CRow>
       <CRow>
-        <CCol col="12" md="6">
+        <!-- <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>headers and accessibility</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-aria" buttonHtml="Dropdown ARIA" variant="primary" class="m-2">
-                  <div role="group" aria-lableledby="header1">
-                    <CDropdownHeader id="header1">Groups</CDropdownHeader>
-                    <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
-                    <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
+                <CDropdown
+                  buttonHtml="Dropdown ARIA" variant="primary"
+                  class="c-m-2"
+                >
+                  <div role="group">
+                    <CDropdownHeader>Groups</CDropdownHeader>
+                    <CDropdownItem>Add</CDropdownItem>
+                    <CDropdownItem>Delete</CDropdownItem>
                   </div>
-                  <div role="group" aria-lableledby="header2">
-                    <CDropdownHeader id="header2">Users</CDropdownHeader>
-                    <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
-                    <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
+                  <div role="group">
+                    <CDropdownHeader>Users</CDropdownHeader>
+                    <CDropdownItem>Add</CDropdownItem>
+                    <CDropdownItem>Delete</CDropdownItem>
                   </div>
                   <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
+                  <CDropdownItem>
+                    Something <strong>not</strong> associated with user
+                  </CDropdownItem>
                 </CDropdown>
               </div>
             </CCardBody>
           </CCard>
-        </CCol>
+        </CCol> -->
         <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small><code>variant</code></small>
             </CCardHeader>
             <CCardBody>
-              <CDropdown size="sm" id="ddown_primary" buttonHtml="Primary" variant="primary" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Primary"
+                variant="primary"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_secondary" buttonHtml="Secondary" variant="secondary" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Secondary"
+                variant="secondary"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_success" buttonHtml="Success" variant="success" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Success"
+                variant="success"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_warning" buttonHtml="Warning" variant="warning" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Warning"
+                variant="warning"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_danger" buttonHtml="Danger" variant="danger" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Danger"
+                variant="danger"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_info" buttonHtml="Info" variant="info" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Info"
+                variant="info"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_light" buttonHtml="Light" variant="light" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Light"
+                variant="light"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_dark" buttonHtml="Dark" variant="dark" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Dark"
+                variant="dark"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_link" buttonHtml="Link" variant="link" class="m-0">
+              <CDropdown
+                size="sm"
+                buttonHtml="Link"
+                variant="link"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index d9977f7b..0061082c 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -1,103 +1,103 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CCard >
       <CCardHeader>
         <strong>Standard buttons</strong>
       </CCardHeader>
       <CCardBody>
-        <CRow class="align-items-center">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -111,95 +111,95 @@
         <p>
           Use <code>variant="outline-*"</code> prop
         </p>
-        <CRow class="align-items-center">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="outline-dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -212,95 +212,95 @@
           Use
           <code>ghost</code> prop for ghost buttons.
         </p>
-        <CRow class="align-items-center">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0" >
             <CButton block ghost variant="primary">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="success">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="warning">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="danger">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="info">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="light">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="dark">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -313,99 +313,99 @@
           Use
           <code>square</code> prop for square buttons.
         </p>
-        <CRow class="align-items-center">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" square>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" square>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" square>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" square>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" square>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" square>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" square>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" square>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" square>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" square disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" square disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" square disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" square disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" square disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" square disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" square disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" square disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" square disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -420,99 +420,99 @@
           Use
           <code>pill</code> prop for pill buttons.
         </p>
-        <CRow class="align-items-center">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" pill>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" pill>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" pill>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" pill>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" pill>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" pill>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" pill>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" pill>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" pill>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="12" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" pill disabled>Primary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" pill disabled>Secondary</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" pill disabled>Success</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" pill disabled>Warning</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" pill disabled>Danger</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" pill disabled>Info</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" pill disabled>Light</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" pill disabled>Dark</CButton>
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" pill disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -524,63 +524,63 @@
       </CCardHeader>
       <CCardBody>
         <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
-        <CRow class="align-items-center">
-          <CCol col="2" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Small
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary" size="sm">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="outline-secondary" size="sm">Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton size="sm" ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" size="sm" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" size="sm" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="2" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="outline-secondary" >Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
-          <CCol col="2" xl class="mb-3 mb-xl-0">
+        <CRow class="c-align-items-center c-mt-3">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Large
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary" size="lg">Standard Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="outline-secondary" size="lg">Outline Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton ghost variant="success" size="lg">Ghost Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" size="lg" square>Square Button</CButton>
           </CCol>
-          <CCol col="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" size="lg" pill>Pill Button</CButton>
           </CCol>
         </CRow>
@@ -591,28 +591,28 @@
         <strong>With Icons</strong>
       </CCardHeader>
       <CCardBody>
-        <CRow class="align-items-center">
-          <CCol sm xs="12" class="text-center mt-3">
+        <CRow class="c-align-items-center">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="primary">
               <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="secondary" outline>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="success">
               <i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="warning" square>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="danger" pill>
               <i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
             </CButton>
@@ -626,22 +626,22 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 0c767b8f..f1cf1860 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12" md="6">
           <CCard>
@@ -32,34 +32,34 @@
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Alert
-              <small> use <code>.alert-link</code> to provide links</small>
+              <small> use <code>.c-alert-link</code> to provide links</small>
             </CCardHeader>
             <CCardBody>
               <div>
                 <CAlert show variant="primary">
-                  Primary Alert with <a href="#" class="alert-link">an example link</a>.
+                  Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="secondary">
-                  Secondary Alert with <a href="#" class="alert-link">an example link</a>.
+                  Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="success">
-                  Success Alert with <a href="#" class="alert-link">an example link</a>.
+                  Success Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="danger">
-                  Danger Alert with <a href="#" class="alert-link">an example link</a>.
+                  Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="warning">
-                  Warning Alert with <a href="#" class="alert-link">an example link</a>.
+                  Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="info">
-                  Info Alert with <a href="#" class="alert-link">an example link</a>.
+                  Info Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="light">
-                  Light Alert with <a href="#" class="alert-link">an example link</a>.
+                  Light Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="dark">
                   Dark Alert with
-                  <CLink href="#" class="alert-link">an example link</CLink>
+                  <CLink href="#" class="c-alert-link">an example link</CLink>
                   .
                 </CAlert>
               </div>
@@ -73,14 +73,14 @@
             </CCardHeader>
             <CCardBody>
               <CAlert show variant="success">
-                <h4 class="alert-heading">Well done!</h4>
+                <h4 class="c-alert-heading">Well done!</h4>
                 <p>
                   Aww yeah, you successfully read this important alert message.
                   This example text is going to run a bit longer so that you can see
                   how spacing within an alert works with this kind of content.
                 </p>
                 <hr>
-                <p class="mb-0">
+                <p class="c-mb-0">
                   Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                 </p>
               </CAlert>
@@ -119,14 +119,14 @@
 
               <CAlert
                 :show.sync="dismissibleAlerts[3]"
-                class="alert-dismissible"
+                class="c-alert-dismissible"
                 v-slot="{dismiss}"
               >
                 Dismissible Alert with custom button!
                 <CButton
-                  class="position-absolute bg-primary"
+                  class="c-position-absolute c-bg-primary"
                   style="right:10px;top: 50%;transform: translateY(-50%);"
-                  text="<i>Close</i>"
+                  textHtml="<i>Close</i>"
                   @click="dismiss"
                 />
               </CAlert>
@@ -140,7 +140,7 @@
               <CButton
                 @click="showDismissibleAlerts"
                 variant="info"
-                class="m-1"
+                class="c-m-1"
               >
                 Show dismissible alerts
               </CButton>
@@ -148,7 +148,8 @@
           </CCard>
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
+              <i class="fa fa-align-justify"></i> Alerts
+              <small>auto dismissible</small>
             </CCardHeader>
             <CCardBody>
               <div>
@@ -162,18 +163,20 @@
                   <strong>{{dismissCountDown}}</strong> seconds...
                 </CAlert>
 
-                <CAlert :show.sync="dismissCountDown"
-                         dismissible
-                         variant="info"
+                <CAlert
+                  :show.sync="dismissCountDown"
+                  dismissible
+                  variant="info"
                 >
                   Alert will dismiss after {{dismissCountDown}} seconds...
-                  <CProgress variant="info"
-                              :max="dismissSecs"
-                              :value="dismissCountDown"
-                              height="4px">
-                  </CProgress>
+                  <CProgress
+                    variant="info"
+                    :max="dismissSecs"
+                    :value="dismissCountDown"
+                    height="4px"
+                  />
                 </CAlert>
-                <CButton @click="showAlert" variant="info" class="m-1">
+                <CButton @click="showAlert" variant="info" class="c-m-1">
                   Show alert with timer
                 </CButton>
               </div>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index e0cd2056..4efbc30d 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,6 +1,6 @@
 <template functional>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12" md="6">
           <CCard>
@@ -22,7 +22,8 @@
             </CCardBody>
             <CCardFooter>
               <CButton variant="primary">
-                Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
+                Notifications
+                <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
               </CButton>
             </CCardFooter>
           </CCard>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index a73ff065..a172e753 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
+  <div class="c-wrapper">
+    <div class="c-animated c-fadeIn">
       <CRow>
         <CCol col="12">
           <CCard>
@@ -8,32 +8,32 @@
               <i class="fa fa-align-justify"></i> Bootstrap Modals
             </CCardHeader>
             <CCardBody>
-              <CButton variant="secondary" @click="myModal = true" class="mr-1">
+              <CButton variant="secondary" @click="myModal = true" class="c-mr-1">
                 Launch demo modal
               </CButton>
-              <CButton variant="secondary" @click="largeModal = true" class="mr-1">
+              <CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
                 Launch large modal
               </CButton>
-              <CButton variant="secondary" @click="smallModal = true" class="mr-1">
+              <CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
                 Launch small modal
               </CButton>
               <hr>
-              <CButton variant="primary" @click="primaryModal = true" class="mr-1">
+              <CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
                 Launch primary modal
               </CButton>
-              <CButton variant="success" @click="successModal = true" class="mr-1">
+              <CButton variant="success" @click="successModal = true" class="c-mr-1">
                 Launch success modal
               </CButton>
-              <CButton variant="warning" @click="warningModal = true" class="mr-1">
+              <CButton variant="warning" @click="warningModal = true" class="c-mr-1">
                 Launch warning modal
               </CButton>
-              <CButton variant="danger" @click="dangerModal = true" class="mr-1">
+              <CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
                 Launch danger modal
               </CButton>
-              <CButton variant="info" @click="infoModal = true" class="mr-1">
+              <CButton variant="info" @click="infoModal = true" class="c-mr-1">
                 Launch info modal
               </CButton>
-              <CButton variant="dark" @click="darkModal = true" class="mr-1">
+              <CButton variant="dark" @click="darkModal = true" class="c-mr-1">
                 Launch dark modal
               </CButton>
             </CCardBody>
@@ -65,9 +65,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            size="sm"
-            :visible.sync="smallModal"
+    <CModal
+      title="Modal title"
+      size="sm"
+      :visible.sync="smallModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -79,7 +80,7 @@
 
     <CModal
       title="Modal title"
-      class="modal-primary"
+      class="c-modal-primary"
       :visible.sync="primaryModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -91,7 +92,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="modal-success"
+      class="c-modal-success"
       :visible.sync="successModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -103,7 +104,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="modal-warning"
+      class="c-modal-warning"
       :visible.sync="warningModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -115,7 +116,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="modal-danger"
+      class="c-modal-danger"
       :visible.sync="dangerModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -127,7 +128,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="modal-info"
+      class="c-modal-info"
       :visible.sync="infoModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -140,16 +141,16 @@
     <CModal
       :visible.sync="darkModal"
       :noBackdrop="false"
-      :noCloseOnBackdrop="false"
+      :noCloseOnBackdrop="fsalse"
       :noFade="false"
       :centered="true"
       title="Modal title 2"
       size="lg"
       variant="dark"
       borderVariant="danger2"
-      addModalClasses="hehe1"
-      addDialogClasses="hehe2"
-      addContentClasses="hehe3"
+      addModalClassess="hehe1"
+      addDialogClassess="hehe2"
+      addContentClassess="hehe3"
       :noHeader="false"
       :noBody="false"
       :noFooter="false"
@@ -161,8 +162,8 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       <template #header="{hide}">
-        <h5 class="modal-title">Custom modal title</h5>
-        <CButtonClose @click="hide()" class="text-white"/>
+        <h5 class="c-modal-title">Custom modal title</h5>
+        <CButtonClose @click="hide()" class="c-text-white"/>
       </template>
       <template #footer="{hide}">
         <CButton @click="hide()" variant="danger">Discard</CButton>