diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
index b24bbc57e1..f69da999a7 100644
--- a/docs/userGuide/syntax/boxes.mbdf
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -45,6 +45,47 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </variable>
 </include>
 
+**The built in types can be colored.**
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<box>
+    default
+</box>
+<box type="info" theme="primary">
+    primary
+</box>
+<box type="info" theme="secondary">
+    secondary
+</box>
+<box type="info" theme="success">
+    success
+</box>
+<box type="info" theme="danger">
+    danger
+</box>
+<box type="info" theme="warning">
+    warning
+</box>
+<box type="info" theme="info">
+    info
+</box>
+<box type="info" theme="light">
+    light
+</box>
+<box type="info" theme="dark">
+    dark
+</box>
+<box type="info" theme="muted">
+    muted
+</box>
+<box type="info" theme="white">
+    white
+</box>
+</variable>
+</include>
+
 **Markbind also supports a light color scheme for boxes**
 
 <include src="codeAndOutput.md" boilerplate >
@@ -190,6 +231,7 @@ icon-size | `String` | `null` | Resizes the icon. Supports integer-scaling of th
 icon-color | `String` | `null` | Color of the icon.
 header{{slot_info_trigger}} <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>heading <br> (deprecated)</small> | `String` | `null` | Markdown text of the box header.
 type | `String` | `''` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
+theme | `String` | `''` | Supports: `primary`, `secondary`, `success`, `danger`, `warning`, `tip`, `light`, `dark` or empty for default.
 light | `Boolean` | `false` | Uses a light color scheme for the box.
 seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated.
 no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. 
diff --git a/package-lock.json b/package-lock.json
index 11221915d7..5ece7cc286 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1930,6 +1930,7 @@
 				"jest-resolve": "^26.6.2",
 				"jest-util": "^26.6.2",
 				"jest-worker": "^26.6.2",
+				"node-notifier": "^8.0.0",
 				"slash": "^3.0.0",
 				"source-map": "^0.6.0",
 				"string-length": "^4.0.1",
@@ -2548,6 +2549,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -2632,6 +2636,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -2664,6 +2671,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -2804,6 +2814,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -2916,6 +2929,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -2978,6 +2994,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3188,6 +3207,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3240,6 +3262,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3402,6 +3427,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3511,6 +3539,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3591,6 +3622,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3714,6 +3748,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -3764,6 +3801,9 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
 			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -4469,6 +4509,7 @@
 				"merge-source-map": "^1.1.0",
 				"postcss": "^7.0.14",
 				"postcss-selector-parser": "^6.0.2",
+				"prettier": "^1.18.2",
 				"source-map": "~0.6.1",
 				"vue-template-es2015-compiler": "^1.9.0"
 			},
@@ -6333,6 +6374,7 @@
 			"dependencies": {
 				"anymatch": "~3.1.1",
 				"braces": "~3.0.2",
+				"fsevents": "~2.3.1",
 				"glob-parent": "~5.1.0",
 				"is-binary-path": "~2.1.0",
 				"is-glob": "~4.0.1",
@@ -8625,7 +8667,8 @@
 				"esprima": "^4.0.1",
 				"estraverse": "^5.2.0",
 				"esutils": "^2.0.2",
-				"optionator": "^0.8.1"
+				"optionator": "^0.8.1",
+				"source-map": "~0.6.1"
 			},
 			"bin": {
 				"escodegen": "bin/escodegen.js",
@@ -10736,6 +10779,9 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
 			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+			"dependencies": {
+				"graceful-fs": "^4.1.6"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -11281,6 +11327,7 @@
 				"minimist": "^1.2.5",
 				"neo-async": "^2.6.0",
 				"source-map": "^0.6.1",
+				"uglify-js": "^3.1.4",
 				"wordwrap": "^1.0.0"
 			},
 			"bin": {
@@ -13267,6 +13314,7 @@
 				"@types/node": "*",
 				"anymatch": "^3.0.3",
 				"fb-watchman": "^2.0.0",
+				"fsevents": "^2.1.2",
 				"graceful-fs": "^4.2.4",
 				"jest-regex-util": "^26.0.0",
 				"jest-serializer": "^26.6.2",
@@ -14462,6 +14510,7 @@
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
 			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
 			"dependencies": {
+				"graceful-fs": "^4.1.6",
 				"universalify": "^2.0.0"
 			},
 			"optionalDependencies": {
@@ -14683,6 +14732,7 @@
 				"anymatch": "^2.0.0",
 				"async-each": "^1.0.1",
 				"braces": "^2.3.2",
+				"fsevents": "^1.2.7",
 				"glob-parent": "^3.1.0",
 				"inherits": "^2.0.3",
 				"is-binary-path": "^1.0.0",
@@ -16654,6 +16704,7 @@
 			"dependencies": {
 				"a-sync-waterfall": "^1.0.0",
 				"asap": "^2.0.3",
+				"chokidar": "^3.3.0",
 				"commander": "^5.1.0"
 			},
 			"bin": {
@@ -23099,8 +23150,10 @@
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
 			"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
 			"dependencies": {
+				"chokidar": "^3.4.1",
 				"graceful-fs": "^4.1.2",
-				"neo-async": "^2.5.0"
+				"neo-async": "^2.5.0",
+				"watchpack-chokidar2": "^2.0.1"
 			},
 			"optionalDependencies": {
 				"chokidar": "^3.4.1",
@@ -23157,6 +23210,7 @@
 				"anymatch": "^2.0.0",
 				"async-each": "^1.0.1",
 				"braces": "^2.3.2",
+				"fsevents": "^1.2.7",
 				"glob-parent": "^3.1.0",
 				"inherits": "^2.0.3",
 				"is-binary-path": "^1.0.0",
diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue
index a9f8dd0eaf..80ce6b3feb 100644
--- a/packages/vue-components/src/TipBox.vue
+++ b/packages/vue-components/src/TipBox.vue
@@ -110,6 +110,8 @@
 </template>
 
 <script>
+import { classifyBootstrapStyle } from './utils/utils';
+
 export default {
   props: {
     dismissible: {
@@ -172,6 +174,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    theme: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    bootStrapStyle() {
+      return classifyBootstrapStyle(this.type, this.theme);
+    },
   },
   methods: {
     isSeamless() {
@@ -251,78 +262,16 @@ export default {
       return {};
     },
     getBootstrapAlertStyle() {
-      switch (this.type) {
-      case 'warning':
-        return 'alert-warning';
-      case 'info':
-        return 'alert-info';
-      case 'definition':
-        return 'alert-primary';
-      case 'success':
-      case 'tip':
-        return 'alert-success';
-      case 'important':
-      case 'wrong':
-        return 'alert-danger';
-      default:
-        return 'alert-default';
-      }
+      return `alert-${this.bootStrapStyle.style}`;
     },
     getBootstrapTextStyle() {
-      switch (this.type) {
-      case 'warning':
-        return 'text-warning';
-      case 'info':
-        return 'text-info';
-      case 'definition':
-        return 'text-primary';
-      case 'success':
-      case 'tip':
-        return 'text-success';
-      case 'important':
-      case 'wrong':
-        return 'text-danger';
-      default:
-        return '';
-      }
+      return `text-${this.bootStrapStyle.style}`;
     },
     getBootstrapBorderStyle() {
-      switch (this.type) {
-      case 'warning':
-        return 'border-warning';
-      case 'info':
-        return 'border-info';
-      case 'definition':
-        return 'border-primary';
-      case 'success':
-      case 'tip':
-        return 'border-success';
-      case 'important':
-      case 'wrong':
-        return 'border-danger';
-      default:
-        return '';
-      }
+      return `border-${this.bootStrapStyle.style}`;
     },
     getFontAwesomeIconStyle() {
-      switch (this.type) {
-      case 'wrong':
-        return 'fa-times';
-      case 'warning':
-        return 'fa-exclamation';
-      case 'info':
-        return 'fa-info';
-      case 'success':
-        return 'fa-check';
-      case 'important':
-        return 'fa-flag';
-      case 'tip':
-        return 'fa-lightbulb';
-      case 'definition':
-        return 'fa-atlas';
-      default:
-        return '';
-      }
+      return this.bootStrapStyle.icon;
     },
   },
 };
@@ -330,7 +279,6 @@ export default {
 
 <style scoped>
     .box-container {
-        width: 100%;
         padding: 0;
         border-radius: 6px;
     }
diff --git a/packages/vue-components/src/utils/utils.js b/packages/vue-components/src/utils/utils.js
index 7cabe3e9be..21d22145f6 100644
--- a/packages/vue-components/src/utils/utils.js
+++ b/packages/vue-components/src/utils/utils.js
@@ -159,3 +159,74 @@ export function VueFixer (vue) {
   vue.mixins.unshift(mixin)
   return vue
 }
+
+// Used in the TipBox component to classify the different styles used by bootstrap from the user input.
+// @params (the user input type of the box)
+export function classifyBootstrapStyle(type, theme) {
+  const defaultStyles
+    = ['warning', 'info', 'definition', 'success', 'danger', 'tip', 'important', 'wrong'];
+  const colorStyles
+    = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+  
+  const typeStyle = defaultStyles.includes(type) ? type : '';
+  const themeStyle = colorStyles.includes(theme) ? theme : '';
+
+  let mainStyle;
+  let iconStyle;
+
+  if (themeStyle) {
+    mainStyle = themeStyle;
+  } else {
+    switch (typeStyle) {
+    case 'warning':
+      mainStyle = 'warning';
+      break;
+    case 'info':
+      mainStyle = 'info';
+      break;
+    case 'definition':
+      mainStyle = 'primary';
+      break;
+    case 'success':
+    case 'tip':
+      mainStyle = 'success';
+      break;
+    case 'important':
+    case 'wrong':
+      mainStyle = 'danger';
+      break;
+    default:
+      mainStyle = 'default';
+      break;
+    }
+  }
+
+  switch (typeStyle) {
+    case 'wrong':
+      iconStyle = 'fa-times';
+      break;
+    case 'warning':
+      iconStyle = 'fa-exclamation';
+      break;
+    case 'info':
+      iconStyle = 'fa-info';
+      break;
+    case 'success':
+      iconStyle = 'fa-check';
+      break;
+    case 'important':
+      iconStyle = 'fa-flag';
+      break;
+    case 'tip':
+      iconStyle = 'fa-lightbulb';
+      break;
+    case 'definition':
+      iconStyle = 'fa-atlas';
+      break;
+    default:
+      iconStyle = '';
+      break;
+    }
+
+  return {style: mainStyle, icon: iconStyle};
+}