Click a color above to explore the palette.

Text

The elements and content on this page are for demonstration only.

Bootstrap

Select a palette, change the primary, secondary, success, danger, info, and warning colors. Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom Bootstrap theme.

The whole idea of this tool is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.

To know Bootstrap, is to know that there are a ton of SASS variables. Changing these variables is the very core of Bootstrap customization. Even if you don't have any experience with SASS, you can use this to easily generate the CSS for your custom theme.

Bootstrap Theme Builder

Rapidy build custom themes for Bootstrap, the world's most popular front-end component library for mobile-first, responsive Web apps.

This is a customizer and theme builder for Bootstrap. Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and easily generate CSS from SASS to give your Bootstrap projects a unique look-and-feel.

Card Outline

Fonts are obviously another huge factor in making all Bootstrap sites look the same. Bootstrap 5's native font family is Roboto.

Font

Colors Fonts SASS Variables Download

Theme vs. Template

In context, "Theme" refers to the style layer or "skin". The "Theme" encompasses colors, fonts and style. A "Template" refers to a page layout and its' HTML structure.

Button

Heading 6

Heading 5

Heading 4

Heading 3

Heading 2

Heading 1

Lead

Paragraph

Display 4

Display 3

Display 2

Display 1

First

Last

Address

Username

Username is required.

Check me out

The rows & columns of the world famous Bootstrap grid speak for themselves.

Location	Date	Visits
Westfield	08.05.18 badge	2323
Galway	08.05.18 badge-pill	5362
Bern	08.05.18	153

Right tooltip (hover)
Bottom tooltip (hover)

Whoot! You successfully read this important alert message.

Get more Bootstrap examples & templates at Themes.guide

Colors

Choose a theme palette...

{{p.name}} ^V

Change theme colors...

Customize {{cp.cloned}}

Apply

Fonts

Change the font family

Headings Base

Variables

Override defaults (optional)

Error:

Reset variables

Apply colors & fonts only (Ignore variables)

Minify CSS

SCSS input Copy

CSS output Apply Copy CSS Open Codeply

Loading...