Bootstrap Builder, Themer & Customizer

Simple, free tools to kickstart your Bootstrap 5 projects

Bootstrap v5.0.1

Start Here

UI Builder

Generate a UI Kit complete with Bootstrap 5, custom theme, fonts & icons.

Themer

Don't want that typical Bootstrap look? Easily create a custom theme for Bootstrap 5.

Customizer

SASS to CSS? Customize the Bootstrap variables to build your own Bootstrap CSS.

Don't want to DIY? Browse our free 😎 Tophat Themes for Bootstrap.

Questions?

Find the answers here...

Themer - A "theme" is a lightweight style layer (or skin) that is meant to be used along with the standard Bootstrap CSS. The theme generated by this tool is minified, and doesn't contain the Bootstrap grid classes. Generally, a "theme" is used to modify the look-and-feel of Bootstrap such as colors, fonts, size and spacing.

Customizer - A "custom build" is a completely custom version of Bootstrap that is meant to be used in place of the standard Bootstrap CSS. The custom CSS is built using SASS and therefore you can modify any of the more than 500 Bootstrap SASS variables. Create a custom build to modify the grid layout or default breakpoints.

Save the CSS output as a file such as `theme.css`. To keep the theme file separate and smaller in size, the Bootstrap grid classes are not included in the CSS output. This means you'll need to reference the Bootstrap CSS as usual, and then reference the generated custom `theme.css` after the `bootstrap.css` in the HTML. This allows the `theme.css` to override the `bootstrap.css` with the appropriate classes as defined in the custom theme.

                <head>
                    ...
                    <link href="/path/to/bootstrap.min.css">
                    <link href="/path/to/theme.css">
                </head>

Yes, that's exactly how Themestr.app works. When you use the Themer or Customizer, the appropriate SASS variables are set and the SCSS input is generated. The SCSS input is then "compiled" using a SASS procesor and the result is the customized CSS. This makes it easy to customize Bootstrap even if you don't know SASS.

Learn more about customizing Bootstrap.

Yes, use the Customizer for this. Unlike, the Themer, the Customizer gives you access to all 500+ Bootstrap SASS variables. Therefore, you can generate a Bootstrap build with custom styles, breakpoints, container widths, gutter spacing and any other aspect of Bootstrap. There is also a variables keyword search that makes it easier to find the right variables to change.

Learn more about customizing Bootstrap.