diff --git a/docs/formBuilder/options/disableInjectedStyle.md b/docs/formBuilder/options/disableInjectedStyle.md
index d76a2a49e..34ed150c9 100644
--- a/docs/formBuilder/options/disableInjectedStyle.md
+++ b/docs/formBuilder/options/disableInjectedStyle.md
@@ -1,7 +1,19 @@
 # disableInjectedStyle
-I'm not sure why anyone would want to do this but it's been requested a couple times so here it is... `disableInjectedStyle` enables you to disabled the injeted style that ships with the plugin.
 
-## Usage
+FormBuilder ships with a minimal Bootstrap 3 set of CSS classes for rendering form controls. You may choose to disable these to ensure they do not clash with a Bootstrap 4 or 5 included stylesheet
+
+## Disable Embedded Bootstrap Classes
+```javascript
+var options = {
+  disableInjectedStyle: "bootstrap"
+};
+$(container).formBuilder(options);
+```
+
+## Disable all embedded styles
+
+You can also completely disable all embedded styles, I'm not sure why anyone would want to do this, but it's been requested a couple of times so here it is... `disableInjectedStyle` enables you to disable the injected style that ships with the plugin.
+
 ```javascript
 var options = {
   disableInjectedStyle: true
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
index 2d2fa52ff..aa05c563e 100644
--- a/src/js/form-builder.js
+++ b/src/js/form-builder.js
@@ -2395,9 +2395,11 @@ function FormBuilder(opts, element, $) {
 
   loadFields()
 
-  if (opts.disableInjectedStyle) {
+  if (opts.disableInjectedStyle === true) {
     const styleTags = document.getElementsByClassName('formBuilder-injected-style')
     forEach(styleTags, i => remove(styleTags[i]))
+  } else if (opts.disableInjectedStyle === 'bootstrap') {
+    d.editorWrap.classList.remove('formbuilder-embedded-bootstrap')
   }
 
   document.dispatchEvent(events.loaded)
diff --git a/src/js/form-render.js b/src/js/form-render.js
index b3cb69b84..da12ad9e0 100644
--- a/src/js/form-render.js
+++ b/src/js/form-render.js
@@ -100,7 +100,7 @@ class FormRender {
           fields = [fields]
         }
         const renderedFormWrap = utils.markup('div', fields, {
-          className: 'rendered-form',
+          className: 'rendered-form formbuilder-embedded-bootstrap',
         })
         this.appendChild(renderedFormWrap)
 
@@ -241,9 +241,11 @@ class FormRender {
       opts.notify.error(opts.messages.noFormData)
     }
 
-    if (opts.disableInjectedStyle) {
+    if (opts.disableInjectedStyle === true) {
       const styleTags = document.getElementsByClassName('formBuilder-injected-style')
       forEach(styleTags, i => remove(styleTags[i]))
+    } else if (opts.disableInjectedStyle === 'bootstrap' && opts.render && element) {
+      element.getElementsByClassName('formbuilder-embedded-bootstrap').item(0)?.classList.remove('formbuilder-embedded-bootstrap')
     }
     return formRender
   }
diff --git a/src/js/helpers.js b/src/js/helpers.js
index 10f960a33..016588c20 100644
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -1154,7 +1154,7 @@ export default class Helpers {
 
     d.editorWrap = m('div', null, {
       id: `${data.formID}-form-wrap`,
-      className: `form-wrap form-builder ${mobileClass()}`,
+      className: `form-wrap form-builder formbuilder-embedded-bootstrap ${mobileClass()}`,
     })
 
     d.stage = m('ul', null, {
diff --git a/src/sass/_stage.scss b/src/sass/_stage.scss
index 3dad187f9..b24adadf9 100644
--- a/src/sass/_stage.scss
+++ b/src/sass/_stage.scss
@@ -370,9 +370,14 @@
 
     .toggle-form {
       &:hover {
+        border-color: lighten($grey, 40%);
         background-color: $edit;
         color: $white;
       }
+
+      &::before {
+        margin: 0;
+      }
     }
 
     .copy-button {
@@ -688,56 +693,6 @@
   }
 }
 
-/*   ------------   TOOLTIP   ------------   */
-
-*[tooltip] {
-  position: relative;
-}
-
-*[tooltip]:hover:after {
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 5px 5px 5px 0;
-  bottom: 23px;
-  color: $white;
-  content: attr(tooltip);
-  padding: 10px 5px;
-  position: absolute;
-  z-index: 98;
-  left: 2px;
-  width: 230px;
-  text-shadow: none;
-  font-size: 12px;
-  line-height: 1.5em;
-  cursor: default;
-}
-
-*[tooltip]:hover:before {
-  border: solid;
-  border-color: $grey-dark transparent;
-  border-width: 6px 6px 0;
-  bottom: 17px;
-  content: '';
-  left: 2px;
-  position: absolute;
-  z-index: 99;
-  cursor: default;
-}
-
-.tooltip-element {
-  visibility: visible;
-  color: $white;
-  background: $black;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  display: inline-block;
-  text-align: center;
-  line-height: 16px;
-  margin: 0 5px;
-  font-size: 12px;
-  cursor: default;
-}
-
 /*   ------------   Toast Message   ------------   */
 .snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */
diff --git a/src/sass/_tooltip.scss b/src/sass/_tooltip.scss
new file mode 100644
index 000000000..41821b905
--- /dev/null
+++ b/src/sass/_tooltip.scss
@@ -0,0 +1,48 @@
+// TOOLTIP   ------------
+*[tooltip] {
+  position: relative;
+}
+
+*[tooltip]:hover::after {
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 5px 5px 5px 0;
+  bottom: 23px;
+  color: $white;
+  content: attr(tooltip);
+  padding: 10px 5px;
+  position: absolute;
+  z-index: 98;
+  left: 2px;
+  width: 230px;
+  text-shadow: none;
+  font-size: 12px;
+  line-height: 1.5em;
+  cursor: default;
+}
+
+*[tooltip]:hover::before {
+  border: solid;
+  border-color: $grey-dark transparent;
+  border-width: 6px 6px 0;
+  bottom: 17px;
+  content: '';
+  left: 2px;
+  position: absolute;
+  z-index: 99;
+  cursor: default;
+}
+
+.tooltip-element {
+  visibility: visible;
+  color: $white;
+  background: $black;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: inline-block;
+  text-align: center;
+  line-height: 16px;
+  margin: 0 5px;
+  font-size: 12px;
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/sass/base/_bs.scss b/src/sass/base/_bs.scss
index b44b3b7ac..27dd268ea 100644
--- a/src/sass/base/_bs.scss
+++ b/src/sass/base/_bs.scss
@@ -1,8 +1,4 @@
 // Minimal Bootstrap
-* {
-  box-sizing: border-box;
-}
-
 button,
 input,
 select,
@@ -202,61 +198,4 @@ textarea.form-control {
 
 .pull-left {
   float: left;
-}
-
-.formbuilder-required,
-.required-asterisk {
-  color: $error;
-}
-
-.formbuilder-checkbox-group,
-.formbuilder-radio-group {
-  input[type='checkbox'],
-  input[type='radio'] {
-    margin: 0 4px 0 0;
-  }
-}
-
-.formbuilder-checkbox-inline,
-.formbuilder-radio-inline {
-  margin-right: 8px;
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 0;
-  label {
-    input[type='text'] {
-      margin-top: 0;
-    }
-  }
-}
-
-.formbuilder-checkbox-inline:first-child,
-.formbuilder-radio-inline:first-child {
-  padding-left: 0;
-}
-
-.formbuilder-autocomplete-list {
-  background-color: $white;
-  display: none;
-  list-style: none;
-  padding: 0;
-  border: 1px solid $grey-light;
-  border-width: 0 1px 1px;
-  position: absolute;
-  z-index: 20;
-  max-height: 200px;
-  overflow-y: auto;
-
-  li {
-    display: none;
-    cursor: default;
-    padding: 5px;
-    margin: 0;
-    transition: background-color 200ms ease-in-out;
-
-    &:hover,
-    &.active-option {
-      background-color: $input-box-shadow-color;
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/sass/base/_fields.scss b/src/sass/base/_fields.scss
new file mode 100644
index 000000000..7ed7094c4
--- /dev/null
+++ b/src/sass/base/_fields.scss
@@ -0,0 +1,56 @@
+.formbuilder-required,
+.required-asterisk {
+  color: $error;
+}
+
+.formbuilder-checkbox-group,
+.formbuilder-radio-group {
+  input[type='checkbox'],
+  input[type='radio'] {
+    margin: 0 4px 0 0;
+  }
+}
+
+.formbuilder-checkbox-inline,
+.formbuilder-radio-inline {
+  margin-right: 8px;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 0;
+  label {
+    input[type='text'] {
+      margin-top: 0;
+    }
+  }
+}
+
+.formbuilder-checkbox-inline:first-child,
+.formbuilder-radio-inline:first-child {
+  padding-left: 0;
+}
+
+.formbuilder-autocomplete-list {
+  background-color: $white;
+  display: none;
+  list-style: none;
+  padding: 0;
+  border: 1px solid $grey-light;
+  border-width: 0 1px 1px;
+  position: absolute;
+  z-index: 20;
+  max-height: 200px;
+  overflow-y: auto;
+
+  li {
+    display: none;
+    cursor: default;
+    padding: 5px;
+    margin: 0;
+    transition: background-color 200ms ease-in-out;
+
+    &:hover,
+    &.active-option {
+      background-color: $input-box-shadow-color;
+    }
+  }
+}
diff --git a/src/sass/form-builder.scss b/src/sass/form-builder.scss
index cb4755cb9..e144965c3 100644
--- a/src/sass/form-builder.scss
+++ b/src/sass/form-builder.scss
@@ -3,10 +3,18 @@
 @import 'base/mixins';
 
 .form-wrap.form-builder {
-  @import 'base/bs';
+  * {
+    box-sizing: border-box;
+  }
+
+  &.formbuilder-embedded-bootstrap {
+    @import 'base/bs';
+  }
+  @import 'base/fields';
   @import 'base/animation';
   @import 'controls';
   @import 'stage';
+  @import 'tooltip';
   @import 'kc-toggle';
   position: relative;
 
@@ -15,104 +23,82 @@
     display: table;
     clear: both;
   }
-}
 
-.cb-wrap,
-.stage-wrap {
-  vertical-align: top;
+  .cb-wrap,
+  .stage-wrap {
+    vertical-align: top;
 
-  &.pull-right {
-    float: right;
-  }
+    &.pull-right {
+      float: right;
+    }
 
-  &.pull-left {
-    float: left;
+    &.pull-left {
+      float: left;
+    }
   }
-}
-
-.form-elements,
-.form-group,
-.multi-row span,
-textarea {
-  display: block;
-}
-
-.form-elements::after,
-.form-group::after {
-  content: '.';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.form-elements .field-options div:hover,
-.frmb .legend,
-.frmb .prev-holder {
-  cursor: move;
-}
-
-// tooltips
-.frmb-tt {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1px solid darken($grey, 25%);
-  background-color: $grey;
-  border-radius: 5px;
-  padding: 5px;
-  color: $white;
-  z-index: 20;
-  text-align: left;
-  font-size: 12px;
-  pointer-events: none;
 
-  &::before {
-    border-color: darken($grey, 25%) transparent;
-    bottom: -11px;
+  .form-elements,
+  .form-group,
+  .multi-row span,
+  textarea {
+    display: block;
   }
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    border-style: solid;
-    border-width: 10px 10px 0;
-    border-color: $grey transparent;
+  .form-elements::after,
+  .form-group::after {
+    content: '.';
     display: block;
-    width: 0;
-    z-index: 1;
-    margin-left: -10px;
-    bottom: -10px;
-    left: 20px;
+    height: 0;
+    clear: both;
+    visibility: hidden;
   }
 
-  a {
-    text-decoration: underline;
-    color: $white;
+  .form-elements .field-options div:hover,
+  .frmb .legend,
+  .frmb .prev-holder {
+    cursor: move;
   }
-}
 
-.frmb li {
-  &:hover,
-  .formbuilder-mobile & {
-    .del-button,
-    .toggle-form {
-      opacity: 1;
+  // tooltips
+  .frmb-tt {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 1px solid darken($grey, 25%);
+    background-color: $grey;
+    border-radius: 5px;
+    padding: 5px;
+    color: $white;
+    z-index: 20;
+    text-align: left;
+    font-size: 12px;
+    pointer-events: none;
+
+    &::before {
+      border-color: darken($grey, 25%) transparent;
+      bottom: -11px;
     }
-  }
-}
-
-.toggle-form {
-  opacity: 0;
 
-  &:hover {
-    border-color: lighten($grey, 40%);
-  }
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-style: solid;
+      border-width: 10px 10px 0;
+      border-color: $grey transparent;
+      display: block;
+      width: 0;
+      z-index: 1;
+      margin-left: -10px;
+      bottom: -10px;
+      left: 20px;
+    }
 
-  &::before {
-    margin: 0;
+    a {
+      text-decoration: underline;
+      color: $white;
+    }
   }
 }
 
diff --git a/src/sass/form-render.scss b/src/sass/form-render.scss
index d5c3f8162..1c6ea2d2a 100644
--- a/src/sass/form-render.scss
+++ b/src/sass/form-render.scss
@@ -1,87 +1,49 @@
 @import 'base/variables';
 
-
 .rendered-form {
-  @import 'base/bs';
+  * {
+    box-sizing: border-box;
+  }
+
+  &.formbuilder-embedded-bootstrap {
+    @import 'base/bs';
+  }
+  @import 'base/fields';
+  @import 'tooltip';
   @import 'kc-toggle';
 
   label {
     font-weight: normal;
   }
-}
-
-.form-group .formbuilder-required {
-  color: $error;
-}
 
-.other-option:checked + label {
-  input {
-    display: inline-block;
+  .form-group .formbuilder-required {
+    color: $error;
   }
-}
-
-.other-val {
-  margin-left: 5px;
-  display: none;
-}
 
-// TOOLTIP   ------------
-*[tooltip] {
-  position: relative;
-}
-
-*[tooltip]:hover::after {
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 5px 5px 5px 0;
-  bottom: 23px;
-  color: $white;
-  content: attr(tooltip);
-  padding: 10px 5px;
-  position: absolute;
-  z-index: 98;
-  left: 2px;
-  width: 230px;
-  text-shadow: none;
-  font-size: 12px;
-  line-height: 1.5em;
-}
-
-*[tooltip]:hover::before {
-  border: solid;
-  border-color: #222 transparent;
-  border-width: 6px 6px 0;
-  bottom: 17px;
-  content: '';
-  left: 2px;
-  position: absolute;
-  z-index: 99;
-}
-
-.tooltip-element {
-  color: $white;
-  background: $black;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  display: inline-block;
-  text-align: center;
-  line-height: 16px;
-  margin: 0 5px;
-  font-size: 12px;
-}
-
-.form-control {
-  &.number {
-    width: auto;
+  .other-option:checked + label {
+    input {
+      display: inline-block;
+    }
   }
 
-  &[type='color'] {
-    width: 60px;
-    padding: 2px;
-    display: inline-block;
+  .other-val {
+    margin-left: 5px;
+    display: none;
   }
 
-  &[multiple] {
-    height: auto;
+  .form-control {
+    &.number {
+      width: auto;
+    }
+
+    &[type='color'] {
+      width: 60px;
+      padding: 2px;
+      display: inline-block;
+    }
+
+    &[multiple] {
+      height: auto;
+    }
   }
-}
+}
\ No newline at end of file