About

I made this tool because customizing Bootstrap should be simple, and I'm slightly addicted to building Bootstrap themes. There isn't another Bootstrap SASS to CSS customization tool that makes it easier to visualize custom colors, fonts, icons, and variables. You can choose a starter theme, or build your own.

If you find it useful, please follow and RT @ThemesGuide, and try my other Bootstrap tools & templates at Themes.guide

The whole idea of Themestr.app 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. Advanced users can delve into the SASS as desired. It's a 4-step process...

① Pick the Colors

Change Bootstrap's -primary, -secondary, -success, -danger, -info, -warning, -light and -dark colors. Click on the checkbox or the name of a theme to select it. Once it's active you can then customize the colors.

② Pick the Fonts

Override the default "Roboto" font-family. Choose from "Headings" to override only the headings (recommended), or "Base" to override all fonts.

③ Change any Bootstrap Variables

There are many, many variables. The variable names are self-explanatory, and the more relevant ones are displayed first.

④ Generate the Theme!

The SASS is automatically generated by Themestr.app. The SASS input is sent to a server-side SASS processor, which outputs the custom CSS theme.

How to Use the Custom Theme

Save the CSS output as a .css 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.


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

Note: At the time of this writing, the generated theme file is intended to be separate from the bootstrap.css, but that may be optional in the future if enough Themestr.app users prefer to make the entire core Bootstrap and theme compiled into a single file. Stay tuned… If you're familiar with SASS, you can simply use the generated SASS, and send it through a SASS processor as desired to generate the CSS.