Bootstrap v4.5.1 Customizer

Currently v4.5.1

Sass variables

Customize Sass variables to define colors, sizes and more inside your custom CSS stylesheets.

Color system

white

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

black

grays: "100"

grays: "200"

grays: "300"

grays: "400"

grays: "500"

grays: "600"

grays: "700"

grays: "800"

grays: "900"

blue

indigo

purple

pink

red

orange

yellow

green

teal

cyan

colors: "blue"

colors: "indigo"

colors: "purple"

colors: "pink"

colors: "red"

colors: "orange"

colors: "yellow"

colors: "green"

colors: "teal"

colors: "cyan"

colors: "white"

colors: "gray"

colors: "gray-dark"

primary

secondary

success

info

warning

danger

light

dark

theme-colors: "primary"

theme-colors: "secondary"

theme-colors: "success"

theme-colors: "info"

theme-colors: "warning"

theme-colors: "danger"

theme-colors: "light"

theme-colors: "dark"

theme-color-interval

yiq-contrasted-threshold

yiq-text-dark

yiq-text-light

Options

enable-caret

enable-rounded

enable-shadows

enable-gradients

enable-transitions

enable-prefers-reduced-motion-media-query

enable-hover-media-query

enable-grid-classes

enable-pointer-cursor-for-buttons

enable-print-styles

enable-responsive-font-sizes

enable-validation-icons

enable-deprecation-messages

Spacing

spacer

spacers: 0

spacers: 1

spacers: 2

spacers: 3

spacers: 4

spacers: 5

sizes: 25

sizes: 50

sizes: 75

sizes: 100

sizes: auto

body-bg

body-color

Links

link-color

link-decoration

link-hover-color

link-hover-decoration

emphasized-link-hover-darken-percentage

Paragraphs

paragraph-margin-bottom

Grid breakpoints

grid-breakpoints: xs

grid-breakpoints: sm

grid-breakpoints: md

grid-breakpoints: lg

grid-breakpoints: xl

Grid containers

container-max-widths: sm

container-max-widths: md

container-max-widths: lg

container-max-widths: xl

Grid columns

grid-columns

grid-gutter-width

grid-row-columns

Components

line-height-lg

line-height-sm

border-width

border-color

border-radius

border-radius-lg

border-radius-sm

rounded-pill

box-shadow-sm

box-shadow

box-shadow-lg

component-active-color

component-active-bg

caret-width

caret-vertical-align

caret-spacing

transition-base

transition-fade

transition-collapse

Typography

font-family-sans-serif

font-family-monospace

font-family-base

font-size-base

font-size-lg

font-size-sm

font-weight-lighter

font-weight-light

font-weight-normal

font-weight-bold

font-weight-bolder

font-weight-base

line-height-base

h1-font-size

h2-font-size

h3-font-size

h4-font-size

h5-font-size

h6-font-size

headings-margin-bottom

headings-font-family

headings-font-weight

headings-line-height

headings-color

display1-size

display2-size

display3-size

display4-size

display1-weight

display2-weight

display3-weight

display4-weight

display-line-height

lead-font-size

lead-font-weight

small-font-size

text-muted

blockquote-small-color

blockquote-small-font-size

blockquote-font-size

hr-border-color

hr-border-width

mark-padding

dt-font-weight

kbd-box-shadow

nested-kbd-font-weight

list-inline-padding

mark-bg

hr-margin-y

Tables

table-cell-padding

table-cell-padding-sm

table-color

table-bg

table-accent-bg

table-hover-color

table-hover-bg

table-active-bg

table-border-width

table-border-color

table-head-bg

table-head-color

table-dark-color

table-dark-bg

table-dark-accent-bg

table-dark-hover-color

table-dark-hover-bg

table-dark-border-color

table-striped-order

table-caption-color

table-bg-level

table-border-level

Buttons + Forms

input-btn-padding-y

input-btn-padding-x

input-btn-font-family

input-btn-font-size

input-btn-line-height

input-btn-focus-width

input-btn-focus-color

input-btn-focus-box-shadow

input-btn-padding-y-sm

input-btn-padding-x-sm

input-btn-font-size-sm

input-btn-line-height-sm

input-btn-padding-y-lg

input-btn-padding-x-lg

input-btn-font-size-lg

input-btn-line-height-lg

input-btn-border-width

Buttons

btn-padding-y

btn-padding-x

btn-font-family

btn-font-size

btn-line-height

btn-white-space

btn-padding-y-sm

btn-padding-x-sm

btn-font-size-sm

btn-line-height-sm

btn-padding-y-lg

btn-padding-x-lg

btn-font-size-lg

btn-line-height-lg

btn-border-width

btn-font-weight

btn-box-shadow

btn-focus-width

btn-focus-box-shadow

btn-disabled-opacity

btn-active-box-shadow

btn-link-disabled-color

btn-block-spacing-y

btn-border-radius

btn-border-radius-lg

btn-border-radius-sm

btn-transition

Forms

label-margin-bottom

input-padding-y

input-padding-x

input-font-family

input-font-size

input-font-weight

input-line-height

input-padding-y-sm

input-padding-x-sm

input-font-size-sm

input-line-height-sm

input-padding-y-lg

input-padding-x-lg

input-font-size-lg

input-line-height-lg

input-bg

input-disabled-bg

input-color

input-border-color

input-border-width

input-box-shadow

input-border-radius

input-border-radius-lg

input-border-radius-sm

input-focus-bg

input-focus-border-color

input-focus-color

input-focus-width

input-focus-box-shadow

input-placeholder-color

input-plaintext-color

input-height-border

input-height-inner

input-height-inner-half

input-height-inner-quarter

input-height

input-height-sm

input-height-lg

input-transition

form-text-margin-top

form-check-input-gutter

form-check-input-margin-y

form-check-input-margin-x

form-check-inline-margin-x

form-check-inline-input-margin-x

form-grid-gutter-width

form-group-margin-bottom

input-group-addon-color

input-group-addon-bg

input-group-addon-border-color

custom-forms-transition

custom-control-gutter

custom-control-spacer-x

custom-control-cursor

custom-control-indicator-size

custom-control-indicator-bg

custom-control-indicator-bg-size

custom-control-indicator-box-shadow

custom-control-indicator-border-color

custom-control-indicator-border-width

custom-control-label-color

custom-control-indicator-disabled-bg

custom-control-label-disabled-color

custom-control-indicator-checked-color

custom-control-indicator-checked-bg

custom-control-indicator-checked-disabled-bg

custom-control-indicator-checked-box-shadow

custom-control-indicator-checked-border-color

custom-control-indicator-focus-box-shadow

custom-control-indicator-focus-border-color

custom-control-indicator-active-color

custom-control-indicator-active-bg

custom-control-indicator-active-box-shadow

custom-control-indicator-active-border-color

custom-checkbox-indicator-border-radius

custom-checkbox-indicator-icon-checked

custom-checkbox-indicator-indeterminate-bg

custom-checkbox-indicator-indeterminate-color

custom-checkbox-indicator-icon-indeterminate

custom-checkbox-indicator-indeterminate-box-shadow

custom-checkbox-indicator-indeterminate-border-color

custom-radio-indicator-border-radius

custom-radio-indicator-icon-checked

custom-switch-width

custom-switch-indicator-border-radius

custom-switch-indicator-size

custom-select-padding-y

custom-select-padding-x

custom-select-font-family

custom-select-font-size

custom-select-height

custom-select-indicator-padding

custom-select-font-weight

custom-select-line-height

custom-select-color

custom-select-disabled-color

custom-select-bg

custom-select-disabled-bg

custom-select-bg-size

custom-select-indicator-color

custom-select-indicator

custom-select-background

custom-select-feedback-icon-padding-right

custom-select-feedback-icon-position

custom-select-feedback-icon-size

custom-select-border-width

custom-select-border-color

custom-select-border-radius

custom-select-box-shadow

custom-select-focus-border-color

custom-select-focus-width

custom-select-focus-box-shadow

custom-select-padding-y-sm

custom-select-padding-x-sm

custom-select-font-size-sm

custom-select-height-sm

custom-select-padding-y-lg

custom-select-padding-x-lg

custom-select-font-size-lg

custom-select-height-lg

custom-range-track-width

custom-range-track-height

custom-range-track-cursor

custom-range-track-bg

custom-range-track-border-radius

custom-range-track-box-shadow

custom-range-thumb-width

custom-range-thumb-height

custom-range-thumb-bg

custom-range-thumb-border

custom-range-thumb-border-radius

custom-range-thumb-box-shadow

custom-range-thumb-focus-box-shadow

custom-range-thumb-focus-box-shadow-width

custom-range-thumb-active-bg

custom-range-thumb-disabled-bg

custom-file-height

custom-file-height-inner

custom-file-focus-border-color

custom-file-focus-box-shadow

custom-file-disabled-bg

custom-file-padding-y

custom-file-padding-x

custom-file-line-height

custom-file-font-family

custom-file-font-weight

custom-file-color

custom-file-bg

custom-file-border-width

custom-file-border-color

custom-file-border-radius

custom-file-box-shadow

custom-file-button-color

custom-file-button-bg

custom-file-text: en

Form validation

form-feedback-margin-top

form-feedback-font-size

form-feedback-valid-color

form-feedback-invalid-color

form-feedback-icon-valid-color

form-feedback-icon-valid

form-feedback-icon-invalid-color

form-feedback-icon-invalid

form-validation-states: "valid"

form-validation-states: "color"

form-validation-states: "icon"

zindex-dropdown

zindex-sticky

zindex-fixed

zindex-modal-backdrop

zindex-modal

zindex-popover

zindex-tooltip

Navs

nav-link-padding-y

nav-link-padding-x

nav-link-disabled-color

nav-tabs-border-color

nav-tabs-border-width

nav-tabs-border-radius

nav-tabs-link-hover-border-color

nav-tabs-link-active-color

nav-tabs-link-active-bg

nav-tabs-link-active-border-color

nav-pills-border-radius

nav-pills-link-active-color

nav-pills-link-active-bg

nav-divider-color

nav-divider-margin-y

Navbar

navbar-padding-y

navbar-padding-x

navbar-nav-link-padding-x

navbar-brand-font-size

nav-link-height

navbar-brand-height

navbar-brand-padding-y

navbar-toggler-padding-y

navbar-toggler-padding-x

navbar-toggler-font-size

navbar-toggler-border-radius

navbar-dark-color

navbar-dark-hover-color

navbar-dark-active-color

navbar-dark-disabled-color

navbar-dark-toggler-icon-bg

navbar-dark-toggler-border-color

navbar-light-color

navbar-light-hover-color

navbar-light-active-color

navbar-light-disabled-color

navbar-light-toggler-icon-bg

navbar-light-toggler-border-color

navbar-light-brand-color

navbar-light-brand-hover-color

navbar-dark-brand-color

navbar-dark-brand-hover-color

Dropdowns

dropdown-min-width

dropdown-padding-y

dropdown-spacer

dropdown-font-size

dropdown-color

dropdown-bg

dropdown-border-color

dropdown-border-radius

dropdown-border-width

dropdown-inner-border-radius

dropdown-divider-bg

dropdown-divider-margin-y

dropdown-box-shadow

dropdown-link-color

dropdown-link-hover-color

dropdown-link-hover-bg

dropdown-link-active-color

dropdown-link-active-bg

dropdown-link-disabled-color

dropdown-item-padding-y

dropdown-item-padding-x

dropdown-header-color

dropdown-header-padding

Pagination

pagination-padding-y

pagination-padding-x

pagination-padding-y-sm

pagination-padding-x-sm

pagination-padding-y-lg

pagination-padding-x-lg

pagination-line-height

pagination-color

pagination-bg

pagination-border-width

pagination-border-color

pagination-focus-box-shadow

pagination-focus-outline

pagination-hover-color

pagination-hover-bg

pagination-hover-border-color

pagination-active-color

pagination-active-bg

pagination-active-border-color

pagination-disabled-color

pagination-disabled-bg

pagination-disabled-border-color

Jumbotron

jumbotron-padding

jumbotron-color

jumbotron-bg

Cards

card-spacer-y

card-spacer-x

card-border-width

card-border-radius

card-border-color

card-inner-border-radius

card-cap-bg

card-cap-color

card-height

card-color

card-bg

card-img-overlay-padding

card-group-margin

card-deck-margin

card-columns-count

card-columns-gap

card-columns-margin

Tooltips

tooltip-font-size

tooltip-max-width

tooltip-color

tooltip-bg

tooltip-border-radius

tooltip-opacity

tooltip-padding-y

tooltip-padding-x

tooltip-margin

tooltip-arrow-width

tooltip-arrow-height

tooltip-arrow-color

form-feedback-tooltip-padding-y

form-feedback-tooltip-padding-x

form-feedback-tooltip-font-size

form-feedback-tooltip-line-height

form-feedback-tooltip-opacity

form-feedback-tooltip-border-radius

Popovers

popover-font-size

popover-bg

popover-max-width

popover-border-width

popover-border-color

popover-border-radius

popover-inner-border-radius

popover-box-shadow

popover-header-bg

popover-header-color

popover-header-padding-y

popover-header-padding-x

popover-body-color

popover-body-padding-y

popover-body-padding-x

popover-arrow-width

popover-arrow-height

popover-arrow-color

popover-arrow-outer-color

Toasts

toast-max-width

toast-padding-x

toast-padding-y

toast-font-size

toast-color

toast-background-color

toast-border-width

toast-border-color

toast-border-radius

toast-box-shadow

toast-header-color

toast-header-background-color

toast-header-border-color

Badges

badge-font-size

badge-font-weight

badge-padding-y

badge-padding-x

badge-border-radius

badge-transition

badge-focus-width

badge-pill-padding-x

badge-pill-border-radius

Modals

modal-inner-padding

modal-footer-margin-between

modal-dialog-margin

modal-dialog-margin-y-sm-up

modal-title-line-height

modal-content-color

modal-content-bg

modal-content-border-color

modal-content-border-width

modal-content-border-radius

modal-content-inner-border-radius

modal-content-box-shadow-xs

modal-content-box-shadow-sm-up

modal-backdrop-bg

modal-backdrop-opacity

modal-header-border-color

modal-footer-border-color

modal-header-border-width

modal-footer-border-width

modal-header-padding-y

modal-header-padding-x

modal-header-padding

modal-xl

modal-lg

modal-md

modal-sm

modal-fade-transform

modal-show-transform

modal-transition

modal-scale-transform

Alerts

alert-padding-y

alert-padding-x

alert-margin-bottom

alert-border-radius

alert-link-font-weight

alert-border-width

alert-bg-level

alert-border-level

alert-color-level

Progress bars

progress-height

progress-font-size

progress-bg

progress-border-radius

progress-box-shadow

progress-bar-color

progress-bar-bg

progress-bar-animation-timing

progress-bar-transition

List group

list-group-color

list-group-bg

list-group-border-color

list-group-border-width

list-group-border-radius

list-group-item-padding-y

list-group-item-padding-x

list-group-hover-bg

list-group-active-color

list-group-active-bg

list-group-active-border-color

list-group-disabled-color

list-group-disabled-bg

list-group-action-color

list-group-action-hover-color

list-group-action-active-color

list-group-action-active-bg

Image thumbnails

thumbnail-padding

thumbnail-bg

thumbnail-border-width

thumbnail-border-color

thumbnail-border-radius

thumbnail-box-shadow

Figures

figure-caption-font-size

figure-caption-color

Breadcrumbs

breadcrumb-font-size

breadcrumb-padding-y

breadcrumb-padding-x

breadcrumb-item-padding

breadcrumb-margin-bottom

breadcrumb-bg

breadcrumb-divider-color

breadcrumb-active-color

breadcrumb-divider

breadcrumb-border-radius

Carousel

carousel-control-color

carousel-control-width

carousel-control-opacity

carousel-control-hover-opacity

carousel-control-transition

carousel-indicator-width

carousel-indicator-height

carousel-indicator-hit-area-height

carousel-indicator-spacer

carousel-indicator-active-bg

carousel-indicator-transition

carousel-caption-width

carousel-caption-color

carousel-control-icon-width

carousel-control-prev-icon-bg

carousel-control-next-icon-bg

carousel-transition-duration

carousel-transition

Spinners

spinner-width

spinner-height

spinner-border-width

spinner-width-sm

spinner-height-sm

spinner-border-width-sm

Close

close-font-size

close-font-weight

close-color

close-text-shadow

Code

code-font-size

code-color

kbd-padding-y

kbd-padding-x

kbd-font-size

kbd-color

kbd-bg

pre-color

pre-scrollable-max-height

Utilities

displays

overflows

positions

user-selects

Printing

print-page-size

print-body-min-width

Download

Hooray! Your custom version of Bootstrap CSS is now ready to be compiled. Just click the button below to finish the process.

Sass variables
Download

Customize and download