diff --git a/src/Dropdown.vue b/src/Dropdown.vue
index 15810ccc..6e125186 100644
--- a/src/Dropdown.vue
+++ b/src/Dropdown.vue
@@ -51,6 +51,10 @@ export default {
     menuAlignRight: {
       type: Boolean,
       default: false
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -58,7 +62,7 @@ export default {
       return `btn-${this.type}`;
     },
     classes () {
-      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group']
+      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group', this.addClass]
     },
     menuClasses() {
       return [{show: this.showBool}, {'dropdown-menu-right': this.menuAlignRight}];
diff --git a/src/Modal.vue b/src/Modal.vue
index 4f83f41f..1684d21f 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -1,10 +1,11 @@
 <template>
   <div role="dialog"
-    v-bind:class="{
-    'modal':true,
-    'fade':effect === 'fade',
-    'zoom':effect === 'zoom'
-    }">
+    :class="[
+    {
+      'modal':true,
+      'fade':effect === 'fade',
+      'zoom':effect === 'zoom'
+    }, addClass]">
     <div v-bind:class="{'modal-dialog':true,'modal-lg':largeBool,'modal-sm':smallBool}" role="document"
       v-bind:style="{width: optionalWidth}">
       <div class="modal-content">
@@ -70,6 +71,10 @@ export default {
     },
     id: {
       type: String
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data() {
diff --git a/src/Navbar.vue b/src/Navbar.vue
index b61d8a9b..f7c69134 100644
--- a/src/Navbar.vue
+++ b/src/Navbar.vue
@@ -1,12 +1,13 @@
 <template>
-  <nav ref="navbar" :class="['navbar', 'navbar-expand-md', {
+  <nav ref="navbar" :class="['navbar', 'navbar-expand-md',
+  {
     'navbar-dark':(type === 'inverse'),
     'navbar-light':(type === 'default'),
     'bg-dark':(type === 'inverse'),
     'bg-light':(type === 'default'),
     'fixed-top':(placement === 'top'),
     'fixed-bottom':(placement === 'bottom')
-  }]">
+  }, addClass]">
     <div class="container-fluid">
       <div class="navbar-brand"><slot name="brand"></slot></div>
       <button v-if="!slots.collapse" class="navbar-toggler" type="button" aria-expanded="false" aria-label="Toggle navigation" @click="toggleCollapse">
@@ -38,6 +39,10 @@ export default {
     placement: {
       type: String,
       default: ''
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data () {
diff --git a/src/Panel.vue b/src/Panel.vue
index 0d5f2b07..bea25ed4 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="card-container" ref="cardContainer">
+    <span :class="['card-container', addClass]" ref="cardContainer">
         <div class="morph" v-show="localMinimized">
             <button :class="['morph-display-wrapper', 'btn', btnType, 'card-title']" @click="open()">
                 <template v-if="altContent">
@@ -135,6 +135,10 @@
       preload: {
         type: Boolean,
         default: false
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {
diff --git a/src/Pic.vue b/src/Pic.vue
index 82ed6c74..0e6bf6e4 100644
--- a/src/Pic.vue
+++ b/src/Pic.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="image-wrapper">
+    <div :class="['image-wrapper', addClass]">
         <img ref="pic" @load.once="computeWidth" :src="src" :alt="alt" :width="computedWidth" class="img-fluid rounded">
         <div class="image-caption">
             <slot></slot>
@@ -25,6 +25,10 @@
       width: {
         type: String,
         default: ''
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {
diff --git a/src/Popover.vue b/src/Popover.vue
index 0197f910..887b9f26 100644
--- a/src/Popover.vue
+++ b/src/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :class="[addClass]">
     <span ref="trigger" v-if="hasSlot" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -28,6 +28,10 @@ export default {
     trigger: {
       type: String,
       default: 'hover'
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {
diff --git a/src/Question.vue b/src/Question.vue
index 36e3bb67..496e3c60 100644
--- a/src/Question.vue
+++ b/src/Question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="question-wrapper">
+    <div :class="['question-wrapper', addClass]">
         <div class="body-wrapper">
             <!-- Default slot is question body -->
             <slot></slot>
@@ -42,6 +42,10 @@
       hasInput: {
         type: Boolean,
         default: false
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {
diff --git a/src/Tabset.vue b/src/Tabset.vue
index c0e7c829..a653aa96 100644
--- a/src/Tabset.vue
+++ b/src/Tabset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="[addClass]">
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" :class="getNavStyleClass" role="tablist">
       <template v-for="t in headers">
@@ -33,6 +33,10 @@ export default {
     active: {
       type: Number,
       default: 0
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data () {
diff --git a/src/TipBox.vue b/src/TipBox.vue
index ce52a44d..f1cc9325 100644
--- a/src/TipBox.vue
+++ b/src/TipBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="alert container" :class="[boxStyle]" :style="customStyle">
+    <div class="alert container" :class="[boxStyle, addClass]" :style="customStyle">
         <div class="icon-wrapper" v-if="!isDefault">
             <span v-html="iconType"></span>
         </div>
@@ -36,6 +36,10 @@
       type: {
         type: String,
         default: 'none'
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {
diff --git a/src/Tooltip.vue b/src/Tooltip.vue
index d7b97679..c674541e 100644
--- a/src/Tooltip.vue
+++ b/src/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :class="[addClass]">
     <span ref="trigger" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -33,6 +33,10 @@ export default {
     placement: {
       type: String,
       default: 'top'
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {
diff --git a/src/trigger.vue b/src/trigger.vue
index 5d9a0318..32c93abe 100644
--- a/src/trigger.vue
+++ b/src/trigger.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="trigger"><slot></slot></span>
+    <span ref="trigger" :class="[addClass]"><slot></slot></span>
 </template>
 
 <script>
@@ -16,6 +16,10 @@
       },
       _triggerBy: {
         type: Object
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     mounted () {