Settings

Basic theme settings.

Draft theme is not saved yet.

Theme name

Colors

Picker, image extraction and Bootstrap palettes.

primary

secondary

light

dark

info

success

warning

danger

background

text

link

Typography

Font controls are coming next.

Google Fonts

Body bodyFontSize, bodyLineHeight, bodyFontWeight

Body font size (bodyFontSize)

1.00 rem

Body line height (bodyLineHeight)

1.50

Body font weight (bodyFontWeight)

Lead/Small leadFontSize, smallFontSize

Lead font size (leadFontSize)

1.25 rem

Small font size (smallFontSize)

0.88 em

Headings headingFontWeight, headingLineHeight, headingScale

Heading font weight (headingFontWeight)

Heading line height (headingLineHeight)

1.20

Heading scale (headingScale)

1.00

Display displayScale

Display scale (displayScale)

1.00

Paragraph paragraphMarginBottom

Paragraph margin bottom (paragraphMarginBottom)

1.00 rem

Blockquote blockquoteFontSize

Blockquote font size (blockquoteFontSize)

1.25 rem

Layout & Spacing

Container, grid, and base spacing.

Container containerMaxWidthXxl, containerPaddingX

Container max width XXL (containerMaxWidthXxl)

1320 px

Container padding X (containerPaddingX)

1.5 rem

Grid gridGutterWidth, gridColumns

Grid gutter width (gridGutterWidth)

1.5 rem

Grid columns (gridColumns)

12

Spacing baseSpacer

Base spacer (baseSpacer)

1 rem

Components

Bootstrap components and building blocks.

Buttons buttonPaddingY, buttonPaddingX, buttonBorderWidth

Vertical padding (buttonPaddingY)

0.375 rem

Horizontal padding (buttonPaddingX)

0.75 rem

Button border width (buttonBorderWidth)

1 px

Forms formPaddingY, formPaddingX, checkInputWidth, switchWidth, checkRadioBorderRadius

Vertical padding (formPaddingY)

0.375 rem

Horizontal padding (formPaddingX)

0.75 rem

Checkbox and radio size (checkInputWidth)

1 em

Switch width (switchWidth)

2 em

Radio button roundness (checkRadioBorderRadius)

50 %

Cards cardSpacerY, cardSpacerX, cardShadowPreset

Vertical padding (cardSpacerY)

1 rem

Horizontal padding (cardSpacerX)

1 rem

Card shadow (cardShadowPreset)

Lists and tables listGroupItemPaddingY, tableCellPaddingY, accordionPaddingY, tableStripedBgFactor

List item vertical padding (listGroupItemPaddingY)

0.5 rem

Table cell vertical padding (tableCellPaddingY)

0.5 rem

Accordion vertical padding (accordionPaddingY)

1 rem

Table stripe strength (tableStripedBgFactor)

0.05

Alerts and progress alertPaddingY, progressHeight, toastMaxWidth, spinnerWidth

Alert vertical padding (alertPaddingY)

1 rem

Progress bar height (progressHeight)

1 rem

Toast maximum width (toastMaxWidth)

350 px

Spinner size (spinnerWidth)

2 rem

Navigation dropdownMinWidth, dropdownPaddingY, paginationPaddingY, paginationPaddingX, breadcrumbDivider

Dropdown minimum width (dropdownMinWidth)

10 rem

Dropdown vertical padding (dropdownPaddingY)

0.5 rem

Pagination vertical padding (paginationPaddingY)

0.375 rem

Pagination horizontal padding (paginationPaddingX)

0.75 rem

Breadcrumb divider (breadcrumbDivider)

Overlays modalDialogMargin, modalSm, modalMd, modalLg, modalXl, offcanvasHorizontalWidth, offcanvasTransitionDuration, tooltipMaxWidth, popoverMaxWidth, btnCloseOpacity

Modal margin (modalDialogMargin)

0.5 rem

Modal width, small (modalSm)

300 px

Modal width, default (modalMd)

500 px

Modal width, large (modalLg)

800 px

Modal width, extra large (modalXl)

1140 px

Offcanvas width (offcanvasHorizontalWidth)

400 px

Offcanvas transition time (offcanvasTransitionDuration)

0.3 s

Tooltip maximum width (tooltipMaxWidth)

200 px

Popover maximum width (popoverMaxWidth)

276 px

Close button opacity (btnCloseOpacity)

0.5

Media thumbnailPadding, carouselControlWidth, carouselIndicatorWidth, carouselCaptionWidth

Thumbnail padding (thumbnailPadding)

0.25 rem

Carousel control width (carouselControlWidth)

15 %

Carousel indicator width (carouselIndicatorWidth)

30 px

Carousel caption width (carouselCaptionWidth)

70 %

Code monospaceFont

Monospace font (monospaceFont)

Accessibility minContrastRatio, enableReducedMotion, enableValidationIcons

Minimum text contrast (minContrastRatio)

4.5

Reduced motion (enableReducedMotion)

Respect the reduced motion setting

Validation icons (enableValidationIcons)

Show icons in valid and invalid fields

Elements

Category

Size Corners Weight

Field size Field corners

Density Link shape

Corners Shadow

Start a Theme

Create a new Bootstrap 5 theme or continue a draft.

Advertisement Reserved placement below the theme start block.

Presets Start from a prepared visual direction and tune it your way.

Help Quick return to the basics of working with a theme.

Guide

100%

Presets

Examples

E-commerce

Company and information pages

Blog and publishing

User account

Communication

Forms and interactions

Bookings and services

Media and galleries

Administration and SaaS

Landing pages and marketing

Help and documentation