Setup

Update the vueform.config.js and include bootstrap theme (Bootstrap 4 & 5 are supported):

js
// vueform.config.js

import bootstrap from '@vueform/vueform/themes/bootstrap'

export default {
  theme: bootstrap,
  // ...
}

Add theme scss after importing Bootstrap styles, which will use Bootstrap variables:

css
@import "node_modules/bootstrap/scss/bootstrap";
@import 'node_modules/@vueform/vueform/themes/bootstrap/scss/index.scss';

... or if you are not using scss you can also use the css:

css
@import "node_modules/bootstrap/dist/css/bootstrap.min.css";
@import 'node_modules/@vueform/vueform/themes/bootstrap/css/index.min.css';

Customization

The theme can be customized with the following CSS vars:

scss
*, :before, :after, :root {
  --vf-primary: #{$primary};
  --vf-primary-darker: #{darken($primary, 15%)};
  --vf-danger: #{$danger};
  --vf-danger-lighter: #{lighten($danger, 38.5%)};
  --vf-success: #{$success};
  --vf-success-lighter: #{lighten($success, 45%)};

  --vf-ring-width: #{$input-focus-width};
  --vf-ring-color: #{rgba(red($primary), green($primary), blue($primary), 0.4)};

  --vf-gray-50: #f9fafb;
  --vf-gray-100: #{$gray-100};
  --vf-gray-200: #{$gray-200};
  --vf-gray-300: #{$gray-300};
  --vf-gray-400: #{$gray-400};
  --vf-gray-500: #{$gray-500};
  --vf-gray-600: #{$gray-600};
  --vf-gray-700: #{$gray-700};
  --vf-gray-800: #{$gray-800};
  --vf-gray-900: #{$gray-900};

  --vf-font-size: #{$font-size-base};
  --vf-font-size-sm: #{$font-size-sm};
  --vf-font-size-lg: #{$font-size-lg};

  --vf-font-size-small: #{$small-font-size};
  --vf-font-size-small-sm: #{$small-font-size};
  --vf-font-size-small-lg: #{$small-font-size};

  --vf-line-height: #{$line-height-base}rem;
  --vf-line-height-sm: #{$line-height-sm}rem;
  --vf-line-height-lg: #{$line-height-lg}rem;

  --vf-line-height-small: #{$line-height-base}rem;
  --vf-line-height-small-sm: #{$line-height-sm}rem;
  --vf-line-height-small-lg: #{$line-height-lg}rem;

  --vf-letter-spacing: 0;
  --vf-letter-spacing-sm: 0;
  --vf-letter-spacing-lg: 0;

  --vf-letter-spacing-small: 0;
  --vf-letter-spacing-small-sm: 0;
  --vf-letter-spacing-small-lg: 0;

  --vf-gutter: calc(#{$grid-gutter-width} / 2);
  --vf-gutter-sm: calc(#{$grid-gutter-width} / 4);
  --vf-gutter-lg: calc(#{$grid-gutter-width} / 2);

  --vf-min-height-input: #{$input-height};
  --vf-min-height-input-sm: #{$input-height-sm};
  --vf-min-height-input-lg: #{$input-height-lg};

  --vf-py-input: #{$input-padding-y};
  --vf-py-input-sm: #{$input-padding-y-sm};
  --vf-py-input-lg: #{$input-padding-y-lg};

  --vf-px-input: #{$input-padding-x};
  --vf-px-input-sm: #{$input-padding-x-sm};
  --vf-px-input-lg: #{$input-padding-x-lg};

  --vf-py-btn: #{$btn-padding-y};
  --vf-py-btn-sm: #{$btn-padding-y-sm};
  --vf-py-btn-lg: #{$btn-padding-y-lg};

  --vf-px-btn: #{$btn-padding-x};
  --vf-px-btn-sm: #{$btn-padding-x-sm};
  --vf-px-btn-lg: #{$btn-padding-x-lg};

  --vf-py-btn-small: calc(#{$btn-padding-y} * 0.75);
  --vf-py-btn-small-sm: calc(#{$btn-padding-y-sm} * 0.75);
  --vf-py-btn-small-lg: calc(#{$btn-padding-y-lg} * 0.75);

  --vf-px-btn-small: calc(#{$btn-padding-x} * 0.75);
  --vf-px-btn-small-sm: calc(#{$btn-padding-x-sm} * 0.75);
  --vf-px-btn-small-lg: calc(#{$btn-padding-x-lg} * 0.75);

  --vf-py-group-tabs: var(--vf-py-input);
  --vf-py-group-tabs-sm: var(--vf-py-input-sm);
  --vf-py-group-tabs-lg: var(--vf-py-input-lg);

  --vf-px-group-tabs: var(--vf-px-input);
  --vf-px-group-tabs-sm: var(--vf-px-input-sm);
  --vf-px-group-tabs-lg: var(--vf-px-input-lg);

  --vf-py-group-blocks: 0.75rem;
  --vf-py-group-blocks-sm: 0.625rem;
  --vf-py-group-blocks-lg: 0.875rem;

  --vf-px-group-blocks: 1rem;
  --vf-px-group-blocks-sm: 1rem;
  --vf-px-group-blocks-lg: 1rem;

  --vf-py-tag: 0;
  --vf-py-tag-sm: var(--vf-py-tag);
  --vf-py-tag-lg: var(--vf-py-tag);

  --vf-px-tag: 0.4375rem;
  --vf-px-tag-sm: var(--vf-px-tag);
  --vf-px-tag-lg: var(--vf-px-tag);

  --vf-py-slider-tooltip: 0.125rem;
  --vf-py-slider-tooltip-sm: 0.0625rem;
  --vf-py-slider-tooltip-lg: 0.1875rem;

  --vf-px-slider-tooltip: 0.375rem;
  --vf-px-slider-tooltip-sm: 0.3125rem;
  --vf-px-slider-tooltip-lg: 0.5rem;

  // Space between addon and text input
  --vf-space-addon: #{$input-padding-x};
  --vf-space-addon-sm: var(--vf-space-addon);
  --vf-space-addon-lg: var(--vf-space-addon);

  // Space between checkboxes & radios and their labels
  --vf-space-checkbox: #{$form-check-input-margin-x};
  --vf-space-checkbox-sm: var(--vf-space-checkbox);
  --vf-space-checkbox-lg: var(--vf-space-checkbox);

  // Space between tags in `TagsElement`
  --vf-space-tags: 0.1875rem;
  --vf-space-tags-sm: var(--vf-space-tags);
  --vf-space-tags-lg: var(--vf-space-tags);

  // Space between the field's top and floating label
  --vf-floating-top: 0rem;
  --vf-floating-top-sm: 0rem;
  --vf-floating-top-lg: 0.6875rem;

  --vf-bg-input: #{$input-bg};
  --vf-bg-input-hover: var(--vf-bg-input);
  --vf-bg-input-focus: #{$input-focus-bg};
  --vf-bg-input-danger: var(--vf-bg-input);
  --vf-bg-input-success: var(--vf-bg-input);
  --vf-bg-disabled: #{$input-disabled-bg};
  --vf-bg-selected: rgba(17,24,39,0.05); // Used eg. when select option is hovered or a checkbox is selected in `blocks` view
  --vf-bg-passive: var(--vf-gray-300); // Used as a background color for eg. slider, toggle
  --vf-bg-icon: var(--vf-gray-500);
  --vf-bg-danger: var(--vf-danger-lighter);
  --vf-bg-success: var(--vf-success-lighter);
  --vf-bg-tag: var(--vf-primary);
  --vf-bg-slider-handle: var(--vf-primary);
  --vf-bg-toggle-handle: #ffffff;
  --vf-bg-date-head: var(--vf-gray-100);
  --vf-bg-addon: #{$input-group-addon-bg};
  --vf-bg-btn: var(--vf-primary);
  --vf-bg-btn-danger: var(--vf-danger);
  --vf-bg-btn-secondary: var(--vf-gray-200);

  --vf-color-input: #{$input-color};
  --vf-color-input-hover: var(--vf-color-input);
  --vf-color-input-focus: #{$input-focus-color};
  --vf-color-input-danger: var(--vf-color-input);
  --vf-color-input-success: var(--vf-color-input);
  --vf-color-disabled: #{$input-color};
  --vf-color-placeholder: #{$input-placeholder-color};
  --vf-color-passive: var(--vf-gray-700); // Used when text is displayed on passive background eg. `off` toggle
  --vf-color-muted: #{$text-muted}; // Used for helper texts eg. element description, floating label
  --vf-color-floating: var(--vf-color-muted);
  --vf-color-floating-focus: var(--vf-color-floating); // Used when the input is focused
  --vf-color-floating-success: var(--vf-color-floating); // Used when the input is filled with success
  --vf-color-floating-danger: var(--vf-color-floating); // Used when the input has error
  --vf-color-on-primary: #ffffff; // Used when text is displayed on primary color
  --vf-color-danger: var(--vf-danger);
  --vf-color-success: var(--vf-success);
  --vf-color-tag: var(--vf-color-on-primary);
  --vf-color-addon: #{$input-group-addon-color};
  --vf-color-date-head: var(--vf-gray-700);
  --vf-color-btn: var(--vf-color-on-primary);
  --vf-color-btn-danger: #ffffff;
  --vf-color-btn-secondary: var(--vf-gray-700);

  --vf-border-color-input: #{$input-border-color};
  --vf-border-color-input-hover: var(--vf-border-color-input);
  --vf-border-color-input-focus: #{$input-focus-border-color};
  --vf-border-color-input-danger: var(--vf-border-color-input);
  --vf-border-color-input-success: var(--vf-border-color-input);
  --vf-border-color-checked: var(--vf-primary);
  --vf-border-color-passive: var(--vf-gray-300); // Used as a border for passive states eg. `off` toggle
  --vf-border-color-slider-tooltip: var(--vf-primary);
  --vf-border-color-tag: var(--vf-primary);
  --vf-border-color-btn: var(--vf-primary);
  --vf-border-color-btn-danger: var(--vf-danger);
  --vf-border-color-btn-secondary: var(--vf-gray-200);

  --vf-border-width-input-t: #{$input-border-width};
  --vf-border-width-input-r: #{$input-border-width};
  --vf-border-width-input-b: #{$input-border-width};
  --vf-border-width-input-l: #{$input-border-width};

  --vf-border-width-radio-t: var(--vf-border-width-input-t);
  --vf-border-width-radio-r: var(--vf-border-width-input-r);
  --vf-border-width-radio-b: var(--vf-border-width-input-b);
  --vf-border-width-radio-l: var(--vf-border-width-input-l);

  --vf-border-width-checkbox-t: var(--vf-border-width-input-t);
  --vf-border-width-checkbox-r: var(--vf-border-width-input-r);
  --vf-border-width-checkbox-b: var(--vf-border-width-input-b);
  --vf-border-width-checkbox-l: var(--vf-border-width-input-l);

  --vf-border-width-dropdown: #{$input-border-width};
  --vf-border-width-btn: #{$input-border-width};
  --vf-border-width-toggle: 0.125rem;
  --vf-border-width-tag: 1px;

  --vf-shadow-input: #{$input-box-shadow};
  --vf-shadow-input-hover: #{$input-box-shadow};
  --vf-shadow-input-focus: #{$input-focus-box-shadow};
  --vf-shadow-handles: 0px 0px 0px 0px rgba(0,0,0,0);
  --vf-shadow-handles-hover: #{$input-box-shadow};
  --vf-shadow-handles-focus: #{$input-focus-box-shadow};
  --vf-shadow-btn: #{$btn-box-shadow};
  --vf-shadow-dropdown: 0px 0px 0px 0px rgba(0,0,0,0);

  --vf-radius-input: #{$input-border-radius};
  --vf-radius-input-sm: #{$input-border-radius-sm};
  --vf-radius-input-lg: #{$input-border-radius-lg};

  --vf-radius-btn: #{$btn-border-radius};
  --vf-radius-btn-sm: #{$btn-border-radius-sm};
  --vf-radius-btn-lg: #{$btn-border-radius-lg};

  // Used for eg. list button, slider tooltip, info tooltip
  --vf-radius-small: var(--vf-radius-input);
  --vf-radius-small-sm: var(--vf-radius-input-sm);
  --vf-radius-small-lg: var(--vf-radius-input);

  // Used for larger inputs eg. textarea, editor, drag and drop, checkbox/radio blocks
  --vf-radius-large: var(--vf-radius-input);
  --vf-radius-large-sm: var(--vf-radius-input-sm);
  --vf-radius-large-lg: var(--vf-radius-input);

  --vf-radius-tag: var(--vf-radius-input);
  --vf-radius-tag-sm: var(--vf-radius-input-sm);
  --vf-radius-tag-lg: var(--vf-radius-input);

  --vf-radius-checkbox: var(--vf-radius-input);
  --vf-radius-checkbox-sm: var(--vf-radius-input-sm);
  --vf-radius-checkbox-lg: var(--vf-radius-input);

  --vf-radius-slider: var(--vf-radius-input);
  --vf-radius-slider-sm: var(--vf-radius-input-sm);
  --vf-radius-slider-lg: var(--vf-radius-input);

  --vf-radius-image: var(--vf-radius-input);
  --vf-radius-image-sm: var(--vf-radius-input-sm);
  --vf-radius-image-lg: var(--vf-radius-input);

  --vf-radius-gallery: var(--vf-radius-input);
  --vf-radius-gallery-sm: var(--vf-radius-input-sm);
  --vf-radius-gallery-lg: var(--vf-radius-input);

  --vf-checkbox-size: 1rem;
  --vf-checkbox-size-sm: 0.875rem;
  --vf-checkbox-size-lg: 1rem;

  --vf-gallery-size: 6rem;
  --vf-gallery-size-sm: 5rem;
  --vf-gallery-size-lg: 7rem;

  --vf-toggle-width: 3rem;
  --vf-toggle-width-sm: 2.75rem;
  --vf-toggle-width-lg: 3rem;

  --vf-toggle-height: 1.25rem;
  --vf-toggle-height-sm: 1.125rem;
  --vf-toggle-height-lg: 1.25rem;

  --vf-slider-height: 0.375rem;
  --vf-slider-height-sm: 0.3125rem;
  --vf-slider-height-lg: 0.5rem;

  --vf-slider-height-vertical: 20rem;
  --vf-slider-height-vertical-sm: var(--vf-slider-height-vertical);
  --vf-slider-height-vertical-lg: var(--vf-slider-height-vertical);

  --vf-slider-handle-size: 1rem;
  --vf-slider-handle-size-sm: 0.875rem;
  --vf-slider-handle-size-lg: 1.25rem;

  --vf-slider-tooltip-distance: 0.5rem;
  --vf-slider-tooltip-distance-sm: 0.375rem;
  --vf-slider-tooltip-distance-lg: 0.5rem;

  --vf-slider-tooltip-arrow-size: 0.3125rem;
  --vf-slider-tooltip-arrow-size-sm: var(--vf-slider-tooltip-arrow-size);
  --vf-slider-tooltip-arrow-size-lg: var(--vf-slider-tooltip-arrow-size);
}
👋 Hire Vueform team for form customizations and developmentLearn more