Bootstrap theme builder.

Theme Builder

Use Bootstrap's global style variables to compile custom stylesheets. The goal of this app is to speed up design iteration and ensure cohesive design across all of Bootstrap's components.


The sass command-line application is required:

sudo npm install -g sass

Getting started

Run the following commands to get started:

git clone
cd themebuilder
npm run setup
npm start

Bootstrap uses SASS

Every Bootstrap download includes both compiled assets and source code. Normally the compiled and minified versions are adequate, but eventually you'll want to differentiate the style of your site. Using the CSS source code, in the scss/ directory, we can customize the default styles. All of the SASS files located within .scss/ reference global variables set inside a scss/_variables.scss file.

Using the provided global style directives, available in Bootstrap v4.0, we can customize how Bootstrap styles our web sites with only a few lines of code. Every SASS variable in Bootstrap 4 includes the !default flag, meaning you can override that default value in your own SASS even after that original variable’s been defined. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile.

Read more about Bootstrap customization and SASS at:


Get the project's history in


Andy Bettisworth


Script is released under the MIT License.


Something missing? Edit this app.

Keyboard Shortcuts

Key Action
/ Focus the search bar
Esc Focus the search bar and cleans it
Select the next search result
Select the previous search result
Enter Open the selected search result
cmdEnter Ctrl+Enter Open the selected search result in a new tab