OBE:BS4 SETTINGS

A tool to generate the JSON code needed to customize your OBE:BS4 Suite build process for any of your projects.

Build System

O P T I O N S

Toggle on/off all of the options you want included in your OBE:BS4 tooling suite build process.

Bootstrap Options

OBE:BS4 Color Classes

OBE:BS4 Elements, Components, & Plugins

Dependency: Extended Modal Utility Classes
Dependency: Toggle Text Mini-Plugin

OBE:BS4 Utility Classes

OBE:BS4 1 Color Gradient Tints/Shades

OBE:BS4 Contextual Color Tints/Shades

OBE:BS4 Font Options

OBE:BS4 Color Wheel Hex Codes

Bootstrap Contextual Classes Options

Additional Bootstrap Color Options

BODY STYLES
(Impacted BS4 SCSS)
Sets $body-bg
Sets $body-color
LINK STYLES
(Impacted BS4 SCSS)
Sets $link-color and $link-hover-color (with darken(15%))
Sets $link-decoration
This color gets appended to the $link-decoration value above.
Sets $link-hover-decoration
This color gets appended to the $link-hover-decoration value above.
HIGHLIGHTS & MARKS
(Impacted BS4 SCSS)
Sets $mark-bg
ACTIVE COMPONENT ELEMENTS
(Impacted BS4 SCSS)
Sets $component-active-bg
Sets $component-active-color
INPUT ELEMENTS
(Impacted BS4 SCSS)
Sets $input-bg
Sets $input-color
Sets $input-placeholder-color
Sets $input-disabled-bg
INPUT GROUP ADDONS
(Impacted BS4 SCSS)
Sets $input-group-addon-bg
Sets $input-group-addon-color
DROPDOWN COMPONENTS
(Impacted BS4 SCSS)
Sets $dropdown-header-color
Sets $dropdown-link-color, plus $dropdown-link-hover-color, $dropdown-link-active-color using darken(5%)
Sets $dropdown-link-hover-bg, $dropdown-link-active-bg, $pagination-hover-bg, $list-group-hover-bg and $list-group-action-active-bg
Sets $dropdown-link-disabled-color and $dropdown-header-color

Core Colors Options

Sets $theme-color-interval
Sets $yiq-contrasted-threshold (values between 0 and 255)
Sets $yiq-text-dark
Sets $yiq-text-light
Sets $escaped-characters

Core Spacing Options

Sets $spacer

Core Links Options

Sets $link-hover-color
Sets $emphasized-link-hover-darken-percentage (links with a .text-* class)

Core Paragraphs Options

Sets $paragraph-margin-bottom

Core Grids Options

Sets $grid-breakpoints
Sets $container-max-widths
Sets $grid-columns
Sets $grid-gutter-width
Sets $grid-row-columns (.row-cols-* classes)

Core Components Options

Sets $line-height-lg
Sets $line-height-sm
Sets $border-width
Sets $border-color
Sets $border-radius
Sets $border-radius-lg
Sets $border-radius-sm
Sets $rounded-pill
Sets $box-shadow-sm
Sets $box-shadow
Sets $box-shadow-lg
Sets $caret-width
Sets $caret-vertical-align
Sets $caret-spacing
Sets $transition-base
Sets $transition-fade
Sets $transition-collapse

Core Typography Options

Sets $font-family-base
Sets $font-size-base
Sets $font-size-lg
Sets $font-size-sm
Sets $font-weight-lighter
Sets $font-weight-light
Sets $font-weight-normal
Sets $font-weight-bold
Sets $font-weight-bolder
Sets $font-weight-base
Sets $line-height-base
Sets $h1-font-size
Sets $h2-font-size
Sets $h3-font-size
Sets $h4-font-size
Sets $h5-font-size
Sets $h6-font-size
Sets $headings-margin-bottom
Sets $headings-font-family
Sets $headings-font-weight
Sets $headings-line-height
Sets $headings-color
Sets $display1-size
Sets $display2-size
Sets $display3-size
Sets $display4-size
Sets $display1-weight
Sets $display2-weight
Sets $display3-weight
Sets $display4-weight
Sets $display-line-height
Sets $lead-font-size
Sets $lead-font-weight
Sets $small-font-size
Sets $text-muted
Sets $blockquote-small-color
Sets $blockquote-small-font-size
Sets $blockquote-font-size
Sets $hr-border-color
Sets $hr-border-width
Sets $mark-padding
Sets $dt-font-weight
Sets $kbd-box-shadow
Sets $nested-kbd-font-weight
Sets $list-inline-padding
Sets $hr-margin-y

Core Tables Options

Sets $table-cell-padding
Sets $table-cell-padding-sm
Sets $table-color
Sets $table-bg
Sets $table-accent-bg
Sets $table-hover-color
Sets $table-hover-bg
Sets $table-active-bg
Sets $table-border-width
Sets $table-border-color
Sets $table-head-bg
Sets $table-head-color
Sets $table-dark-color
Sets $table-dark-bg
Sets $table-dark-accent-bg
Sets $table-dark-hover-color
Sets $table-dark-hover-bg
Sets $table-dark-border-color
Sets $table-striped-order
Sets $table-caption-color
Sets $table-bg-level
Sets $table-border-level

Core Buttons + Forms Options

Sets $input-btn-padding-y
Sets $input-btn-padding-x
Sets $input-btn-font-family
Sets $input-btn-font-size
Sets $input-btn-line-height
Sets $input-btn-focus-width
Sets $input-btn-focus-color
Sets $input-btn-focus-box-shadow
Sets $input-btn-padding-y-sm
Sets $input-btn-padding-x-sm
Sets $input-btn-font-size-sm
Sets $input-btn-line-height-sm
Sets $input-btn-padding-y-lg
Sets $input-btn-padding-x-lg
Sets $input-btn-font-size-lg
Sets $input-btn-line-height-lg
Sets $input-btn-border-width

Core Buttons Options

Sets $btn-padding-y
Sets $btn-padding-x
Sets $btn-font-family
Sets $btn-font-size
Sets $btn-line-height
Sets $btn-white-space. Set to "nowrap" to prevent text wrapping.
Sets $btn-padding-y-sm
Sets $btn-padding-x-sm
Sets $btn-font-size-sm
Sets $btn-line-height-sm
Sets $btn-padding-y-lg
Sets $btn-padding-x-lg
Sets $btn-font-size-lg
Sets $btn-line-height-lg
Sets $btn-border-width
Sets $btn-font-weight
Sets $btn-box-shadow
Sets $btn-focus-width
Sets $btn-focus-box-shadow
Sets $btn-disabled-opacity
Sets $btn-active-box-shadow
Sets $btn-link-disabled-color
Sets $btn-block-spacing-y
Sets $btn-border-radius. Use this setting to set a button radius independently from the global border radius.
Sets $btn-border-radius-lg. Use this setting to set a large button radius independently from the global border radius.
Sets $btn-border-radius-sm. Use this setting to set a small button radius independently from the global border radius.
Sets $btn-transition

Core Forms: General Options

Sets $label-margin-bottom
Sets $input-padding-y
Sets $input-padding-x
Sets $input-font-family
Sets $input-font-size
Sets $input-font-weight
Sets $input-line-height
Sets $input-padding-y-sm
Sets $input-padding-x-sm
Sets $input-font-size-sm
Sets $input-line-height-sm
Sets $input-padding-y-lg
Sets $input-padding-x-lg
Sets $input-font-size-lg
Sets $input-line-height-lg
Sets $input-border-color
Sets $input-border-width
Sets $input-box-shadow
Sets $input-border-radius
Sets $input-border-radius-lg
Sets $input-border-radius-sm
Sets $input-focus-bg
Sets $input-focus-border-color
Sets $input-focus-color
Sets $input-focus-width
Sets $input-focus-box-shadow
Sets $input-plaintext-color
Sets $input-height-border
Sets $input-height-inner
Sets $input-height-inner-half
Sets $input-height-inner-quarter
Sets $input-height
Sets $input-height-sm
Sets $input-height-lg
Sets $input-transition
Sets $form-text-margin-top
Sets $form-check-input-gutter
Sets $form-check-input-margin-y
Sets $form-check-input-margin-x
Sets $form-check-inline-margin-x
Sets $form-check-inline-input-margin-x
Sets $form-grid-gutter-width
Sets $form-group-margin-bottom
Sets $input-group-addon-border-color

Core Forms: General Custom Elements Options

Sets $custom-forms-transition
Sets $custom-control-gutter
Sets $custom-control-spacer-x
Sets $custom-control-cursor
Sets $custom-control-indicator-size
Sets $custom-control-indicator-bg
Sets $custom-control-indicator-bg-size
Sets $custom-control-indicator-box-shadow
Sets $custom-control-indicator-border-color
Sets $custom-control-indicator-border-width
Sets $custom-control-label-color
Sets $custom-control-indicator-disabled-bg
Sets $custom-control-label-disabled-color
Sets $custom-control-indicator-checked-color
Sets $custom-control-indicator-checked-bg
Sets $custom-control-indicator-checked-disabled-bg
Sets $custom-control-indicator-checked-box-shadow
Sets $custom-control-indicator-checked-border-color
Sets $custom-control-indicator-focus-box-shadow
Sets $custom-control-indicator-focus-border-color
Sets $custom-control-indicator-active-color
Sets $custom-control-indicator-active-bg
Sets $custom-control-indicator-active-box-shadow
Sets $custom-control-indicator-active-border-color
Sets $custom-checkbox-indicator-border-radius
Sets $custom-checkbox-indicator-icon-checked
Sets $custom-checkbox-indicator-indeterminate-bg
Sets $custom-checkbox-indicator-indeterminate-color
Sets $custom-checkbox-indicator-icon-indeterminate
Sets $custom-checkbox-indicator-indeterminate-box-shadow
Sets $custom-checkbox-indicator-indeterminate-border-color
Sets $custom-radio-indicator-border-radius
Sets $custom-radio-indicator-icon-checked
Sets $custom-switch-width
Sets $custom-switch-indicator-border-radius
Sets $custom-switch-indicator-size

Core Forms: Custom Select Options

Sets $custom-select-padding-y
Sets $custom-select-padding-x
Sets $custom-select-font-family
Sets $custom-select-font-size
Sets $custom-select-height
Sets $custom-select-indicator-padding. This provides extra padding to account for the presence of the background-image based indicator.
Sets $custom-select-font-weight
Sets $custom-select-line-height
Sets $custom-select-color
Sets $custom-select-disabled-color
Sets $custom-select-bg
Sets $custom-select-disabled-bg
Sets $custom-select-bg-size. This setting is in pixels due to image dimensions.
Sets $custom-select-indicator-color
Sets $custom-select-indicator
Sets $custom-select-background. Used so you can have multiple background elements (Such as arrow + feedback icons, etc.)
Sets $custom-select-feedback-icon-padding-right
Sets $custom-select-feedback-icon-position
Sets $custom-select-feedback-icon-size
Sets $custom-select-border-width
Sets $custom-select-border-color
Sets $custom-select-border-radius
Sets $custom-select-box-shadow
Sets $custom-select-focus-border-color
Sets $custom-select-focus-width
Sets $custom-select-focus-box-shadow
Sets $custom-select-padding-y-sm
Sets $custom-select-padding-x-sm
Sets $custom-select-font-size-sm
Sets $custom-select-height-sm
Sets $custom-select-padding-y-lg
Sets $custom-select-padding-x-lg
Sets $custom-select-font-size-lg
Sets $custom-select-height-lg

Core Forms: Custom Range Options

Sets $custom-range-track-width
Sets $custom-range-track-height
Sets $custom-range-track-cursor
Sets $custom-range-track-bg
Sets $custom-range-track-border-radius
Sets $custom-range-track-box-shadow
Sets $custom-range-thumb-width
Sets $custom-range-thumb-height
Sets $custom-range-thumb-bg
Sets $custom-range-thumb-border
Sets $custom-range-thumb-border-radius
Sets $custom-range-thumb-box-shadow
Sets $custom-range-thumb-focus-box-shadow
Sets $custom-range-thumb-focus-box-shadow-width. This setting is for a focus box shadow issue in IE/Edge.
Sets $custom-range-thumb-active-bg
Sets $custom-range-thumb-disabled-bg

Core Forms: Custom File Upload Options

Sets $custom-file-height
Sets $custom-file-height-inner
Sets $custom-file-focus-border-color
Sets $custom-file-focus-box-shadow
Sets $custom-file-disabled-bg
Sets $custom-file-padding-y
Sets $custom-file-padding-x
Sets $custom-file-line-height
Sets $custom-file-font-family
Sets $custom-file-font-weight
Sets $custom-file-color
Sets $custom-file-bg
Sets $custom-file-border-width
Sets $custom-file-border-color
Sets $custom-file-border-radius
Sets $custom-file-box-shadow
Sets $custom-file-button-color
Sets $custom-file-button-bg
Sets $custom-file-text

Core Form Validation Options

Sets $form-feedback-margin-top
Sets $form-feedback-font-size
Sets $form-feedback-valid-color
Sets $form-feedback-invalid-color
Sets $form-feedback-icon-valid-color
Sets $form-feedback-icon-valid
Sets $form-feedback-icon-invalid-color
Sets $form-feedback-icon-invalid
Sets $form-validation-states-init. NOTE: this $form-validation-states-init var MUST be called in the $form-validation-states map merge below!
Sets $form-validation-states

Core Z-Index Options

Sets $zindex-dropdown
Sets $zindex-sticky
Sets $zindex-fixed
Sets $zindex-modal-backdrop
Sets $zindex-modal
Sets $zindex-popover
Sets $zindex-tooltip

Core Navs Options

Sets $nav-link-padding-y
Sets $nav-link-padding-x
Sets $nav-link-disabled-color
Sets $nav-tabs-border-color
Sets $nav-tabs-border-width
Sets $nav-tabs-border-radius
Sets $nav-tabs-link-hover-border-color
Sets $nav-tabs-link-active-color
Sets $nav-tabs-link-active-bg
Sets $nav-tabs-link-active-border-color
Sets $nav-pills-border-radius
Sets $nav-pills-link-active-color
Sets $nav-pills-link-active-bg
Sets $nav-divider-color
Sets $nav-divider-margin-y

Core Navbars Options

Sets $navbar-padding-y
Sets $navbar-padding-x
Sets $navbar-nav-link-padding-x
Sets $navbar-brand-font-size
Sets $nav-link-height. This setting should be computed (once passed into SASS) so the navbar-brand will have the same height as navbar-text and nav-link elements.
Sets $navbar-brand-height
Sets $navbar-brand-padding-y
Sets $navbar-toggler-padding-y
Sets $navbar-toggler-padding-x
Sets $navbar-toggler-font-size
Sets $navbar-toggler-border-radius
Sets $navbar-dark-color
Sets $navbar-dark-hover-color
Sets $navbar-dark-active-color
Sets $navbar-dark-disabled-color
Sets $navbar-dark-toggler-icon-bg
Sets $navbar-dark-toggler-border-color
Sets $navbar-light-color
Sets $navbar-light-hover-color
Sets $navbar-light-active-color
Sets $navbar-light-disabled-color
Sets $navbar-light-toggler-icon-bg
Sets $navbar-light-toggler-border-color
Sets $navbar-light-brand-color
Sets $navbar-light-brand-hover-color
Sets $navbar-dark-brand-color
Sets $navbar-dark-brand-hover-color

Core Dropdown Options

Sets $dropdown-min-width
Sets $dropdown-padding-y
Sets $dropdown-spacer
Sets $dropdown-font-size
Sets $dropdown-color
Sets $dropdown-bg
Sets $dropdown-border-color
Sets $dropdown-border-radius
Sets $dropdown-border-width
Sets $dropdown-inner-border-radius
Sets $dropdown-divider-bg
Sets $dropdown-divider-margin-y
Sets $dropdown-box-shadow
Sets $dropdown-link-hover-color
Sets $dropdown-link-active-color
Sets $dropdown-link-active-bg
Sets $dropdown-item-padding-y
Sets $dropdown-item-padding-x

Core Pagination Options

Sets $pagination-padding-y
Sets $pagination-padding-x
Sets $pagination-padding-y-sm
Sets $pagination-padding-x-sm
Sets $pagination-padding-y-lg
Sets $pagination-padding-x-lg
Sets $pagination-line-height
Sets $pagination-color
Sets $pagination-bg
Sets $pagination-border-width
Sets $pagination-border-color
Sets $pagination-focus-box-shadow
Sets $pagination-focus-outline
Sets $pagination-hover-color
Sets $pagination-hover-bg
Sets $pagination-hover-border-color
Sets $pagination-active-color
Sets $pagination-active-bg
Sets $pagination-active-border-color
Sets $pagination-disabled-color
Sets $pagination-disabled-bg
Sets $pagination-disabled-border-color

Core Jumbotron Options

Sets $jumbotron-padding
Sets $jumbotron-color
Sets $jumbotron-bg

Core Cards Options

Sets $card-spacer-y
Sets $card-spacer-x
Sets $card-border-width
Sets $card-border-radius
Sets $card-border-color
Sets $card-inner-border-radius
Sets $card-cap-bg
Sets $card-cap-color
Sets $card-height
Sets $card-color
Sets $card-bg
Sets $card-img-overlay-padding
Sets $card-group-margin
Sets $card-deck-margin
Sets $card-columns-count
Sets $card-columns-gap
Sets $card-columns-margin