Bootstrap v5.0.0 Beta 2 Customizer

Currently v5.0.0 Beta 2

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"

min-contrast-ratio

color-contrast-dark

color-contrast-light

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

teal-100

teal-200

teal-300

teal-400

teal-500

teal-600

teal-700

teal-800

teal-900

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

Characters which are escaped by the escape-svg fun

Options

enable-caret

enable-rounded

enable-shadows

enable-gradients

enable-transitions

enable-reduced-motion

enable-smooth-scroll

enable-grid-classes

enable-button-pointers

enable-rfs

enable-validation-icons

enable-negative-margins

enable-deprecation-messages

enable-important-utilities

variable-prefix

Gradient

gradient

Spacing

spacer

spacers: 0

spacers: 1

spacers: 2

spacers: 3

spacers: 4

spacers: 5

negative-spacers

Position

position-values: 0

position-values: 50

position-values: 100

Body

body-bg

body-color

body-text-align

Links

link-color

link-decoration

link-shade-percentage

link-hover-color

link-hover-decoration

stretched-link-pseudo-element

stretched-link-z-index

Paragraphs

paragraph-margin-bottom

Grid breakpoints

grid-breakpoints: xs

grid-breakpoints: sm

grid-breakpoints: md

grid-breakpoints: lg

grid-breakpoints: xl

grid-breakpoints: xxl

Grid containers

container-max-widths: sm

container-max-widths: md

container-max-widths: lg

container-max-widths: xl

container-max-widths: xxl

Grid columns

grid-columns

grid-gutter-width

grid-row-columns

gutters

container-padding-x

Components

border-width

border-widths: 0

border-widths: 1

border-widths: 2

border-widths: 3

border-widths: 4

border-widths: 5

border-color

border-radius

border-radius-sm

border-radius-lg

border-radius-pill

box-shadow

box-shadow-sm

box-shadow-lg

box-shadow-inset

component-active-color

component-active-bg

caret-width

caret-vertical-align

caret-spacing

transition-base

transition-fade

transition-collapse

aspect-ratios: "1x1"

aspect-ratios: "4x3"

aspect-ratios: "16x9"

aspect-ratios: "21x9"

Typography

font-family-sans-serif

font-family-monospace

font-family-base

font-family-code

font-size-root

font-size-base

font-size-sm

font-size-lg

font-weight-lighter

font-weight-light

font-weight-normal

font-weight-bold

font-weight-bolder

font-weight-base

line-height-base

line-height-sm

line-height-lg

h1-font-size

h2-font-size

h3-font-size

h4-font-size

h5-font-size

h6-font-size

font-sizes: 1

font-sizes: 2

font-sizes: 3

font-sizes: 4

font-sizes: 5

font-sizes: 6

headings-margin-bottom

headings-font-family

headings-font-style

headings-font-weight

headings-line-height

headings-color

display-font-sizes: 1

display-font-sizes: 2

display-font-sizes: 3

display-font-sizes: 4

display-font-sizes: 5

display-font-sizes: 6

display-font-weight

display-line-height

lead-font-size

lead-font-weight

small-font-size

sub-sup-font-size

text-muted

initialism-font-size

blockquote-margin-y

blockquote-font-size

blockquote-footer-color

blockquote-footer-font-size

hr-margin-y

hr-color

hr-height

hr-opacity

legend-margin-bottom

legend-font-size

legend-font-weight

mark-padding

dt-font-weight

nested-kbd-font-weight

list-inline-padding

mark-bg

Tables

table-cell-padding-y

table-cell-padding-x

table-cell-padding-y-sm

table-cell-padding-x-sm

table-cell-vertical-align

table-color

table-bg

table-th-font-weight

table-striped-color

table-striped-bg-factor

table-striped-bg

table-active-color

table-active-bg-factor

table-active-bg

table-hover-color

table-hover-bg-factor

table-hover-bg

table-border-factor

table-border-width

table-border-color

table-striped-order

table-group-separator-color

table-caption-color

table-bg-scale

table-variants: "primary"

table-variants: "secondary"

table-variants: "success"

table-variants: "info"

table-variants: "warning"

table-variants: "danger"

table-variants: "light"

table-variants: "dark"

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-opacity

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-padding-y-lg

input-btn-padding-x-lg

input-btn-font-size-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-padding-y-lg

btn-padding-x-lg

btn-font-size-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-color

btn-link-hover-color

btn-link-disabled-color

btn-border-radius

btn-border-radius-sm

btn-border-radius-lg

btn-transition

btn-hover-bg-shade-amount

btn-hover-bg-tint-amount

btn-hover-border-shade-amount

btn-hover-border-tint-amount

btn-active-bg-shade-amount

btn-active-bg-tint-amount

btn-active-border-shade-amount

btn-active-border-tint-amount

Forms

form-text-margin-top

form-text-font-size

form-text-font-style

form-text-font-weight

form-text-color

form-label-margin-bottom

form-label-font-size

form-label-font-style

form-label-font-weight

form-label-color

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-padding-y-lg

input-padding-x-lg

input-font-size-lg

input-bg

input-disabled-bg

input-disabled-border-color

input-color

input-border-color

input-border-width

input-box-shadow

input-border-radius

input-border-radius-sm

input-border-radius-lg

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-check-input-width

form-check-min-height

form-check-padding-start

form-check-margin-bottom

form-check-label-color

form-check-label-cursor

form-check-transition

form-check-input-active-filter

form-check-input-bg

form-check-input-border

form-check-input-border-radius

form-check-radio-border-radius

form-check-input-focus-border

form-check-input-focus-box-shadow

form-check-input-checked-color

form-check-input-checked-bg-color

form-check-input-checked-border-color

form-check-input-checked-bg-image

form-check-radio-checked-bg-image

form-check-input-indeterminate-color

form-check-input-indeterminate-bg-color

form-check-input-indeterminate-border-color

form-check-input-indeterminate-bg-image

form-check-input-disabled-opacity

form-check-label-disabled-opacity

form-check-btn-check-disabled-opacity

form-switch-color

form-switch-width

form-switch-padding-start

form-switch-bg-image

form-switch-border-radius

form-switch-transition

form-switch-focus-color

form-switch-focus-bg-image

form-switch-checked-color

form-switch-checked-bg-image

form-switch-checked-bg-position

form-check-inline-margin-end

input-group-addon-padding-y

input-group-addon-padding-x

input-group-addon-font-weight

input-group-addon-color

input-group-addon-bg

input-group-addon-border-color

form-select-padding-y

form-select-padding-x

form-select-font-family

form-select-font-size

form-select-indicator-padding

form-select-font-weight

form-select-line-height

form-select-color

form-select-disabled-color

form-select-bg

form-select-disabled-bg

form-select-disabled-border-color

form-select-bg-position

form-select-bg-size

form-select-indicator-color

form-select-indicator

form-select-feedback-icon-padding-end

form-select-feedback-icon-position

form-select-feedback-icon-size

form-select-border-width

form-select-border-color

form-select-border-radius

form-select-box-shadow

form-select-focus-border-color

form-select-focus-width

form-select-focus-box-shadow

form-select-padding-y-sm

form-select-padding-x-sm

form-select-font-size-sm

form-select-padding-y-lg

form-select-padding-x-lg

form-select-font-size-lg

form-range-track-width

form-range-track-height

form-range-track-cursor

form-range-track-bg

form-range-track-border-radius

form-range-track-box-shadow

form-range-thumb-width

form-range-thumb-height

form-range-thumb-bg

form-range-thumb-border

form-range-thumb-border-radius

form-range-thumb-box-shadow

form-range-thumb-focus-box-shadow

form-range-thumb-focus-box-shadow-width

form-range-thumb-active-bg

form-range-thumb-disabled-bg

form-range-thumb-transition

form-file-button-color

form-file-button-bg

form-file-button-hover-bg

form-floating-height

form-floating-padding-x

form-floating-padding-y

form-floating-input-padding-t

form-floating-input-padding-b

form-floating-label-opacity

form-floating-label-transform

form-floating-transition

Form validation

form-feedback-margin-top

form-feedback-font-size

form-feedback-font-style

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"

Z-index master list

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-font-size

nav-link-font-weight

nav-link-color

nav-link-hover-color

nav-link-transition

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

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-brand-margin-end

navbar-toggler-padding-y

navbar-toggler-padding-x

navbar-toggler-font-size

navbar-toggler-border-radius

navbar-toggler-focus-width

navbar-toggler-transition

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-x

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

dropdown-dark-color

dropdown-dark-bg

dropdown-dark-border-color

dropdown-dark-divider-bg

dropdown-dark-box-shadow

dropdown-dark-link-color

dropdown-dark-link-hover-color

dropdown-dark-link-hover-bg

dropdown-dark-link-active-color

dropdown-dark-link-active-bg

dropdown-dark-link-disabled-color

dropdown-dark-header-color

Pagination

pagination-padding-y

pagination-padding-x

pagination-padding-y-sm

pagination-padding-x-sm

pagination-padding-y-lg

pagination-padding-x-lg

pagination-color

pagination-bg

pagination-border-width

pagination-border-radius

pagination-margin-start

pagination-border-color

pagination-focus-color

pagination-focus-bg

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

pagination-transition

pagination-border-radius-sm

pagination-border-radius-lg

Cards

card-spacer-y

card-spacer-x

card-title-spacer-y

card-border-width

card-border-radius

card-border-color

card-inner-border-radius

card-cap-padding-y

card-cap-padding-x

card-cap-bg

card-cap-color

card-height

card-color

card-bg

card-img-overlay-padding

card-group-margin

Accordion

accordion-padding-y

accordion-padding-x

accordion-color

accordion-bg

accordion-border-width

accordion-border-color

accordion-border-radius

accordion-body-padding-y

accordion-body-padding-x

accordion-button-padding-y

accordion-button-padding-x

accordion-button-color

accordion-button-bg

accordion-transition

accordion-button-active-bg

accordion-button-active-color

accordion-button-focus-border-color

accordion-button-focus-box-shadow

accordion-icon-width

accordion-icon-color

accordion-icon-active-color

accordion-icon-transition

accordion-icon-transform

accordion-button-icon

accordion-button-active-icon

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-spacing

toast-header-color

toast-header-background-color

toast-header-border-color

Badges

badge-font-size

badge-font-weight

badge-color

badge-padding-y

badge-padding-x

badge-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-sm

modal-md

modal-lg

modal-xl

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-scale

alert-border-scale

alert-color-scale

alert-dismissible-padding-r

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-item-bg-scale

list-group-item-color-scale

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-x

breadcrumb-margin-bottom

breadcrumb-bg

breadcrumb-divider-color

breadcrumb-active-color

breadcrumb-divider

breadcrumb-divider-flipped

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-opacity

carousel-indicator-active-bg

carousel-indicator-active-opacity

carousel-indicator-transition

carousel-caption-width

carousel-caption-color

carousel-caption-padding-y

carousel-caption-spacer

carousel-control-icon-width

carousel-control-prev-icon-bg

carousel-control-next-icon-bg

carousel-transition-duration

carousel-transition

carousel-dark-indicator-active-bg

carousel-dark-caption-color

carousel-dark-control-icon-filter

Spinners

spinner-width

spinner-height

spinner-border-width

spinner-animation-speed

spinner-width-sm

spinner-height-sm

spinner-border-width-sm

Close

btn-close-width

btn-close-height

btn-close-padding-x

btn-close-padding-y

btn-close-color

btn-close-bg

btn-close-focus-shadow

btn-close-opacity

btn-close-hover-opacity

btn-close-focus-opacity

btn-close-disabled-opacity

btn-close-white-filter

Code

code-font-size

code-color

kbd-padding-y

kbd-padding-x

kbd-font-size

kbd-color

kbd-bg

pre-color

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