The recommended way to customize a Bootstrap theme is to manually write your own custom.scss SASS file with overwrites of variables from _variables.scss.

Navigating a file with over 900 lines of code and searching for variable that you need, however, can be a challenging task.

Bootstrap.build was built to make it easier to build and maintain Bootstrap themes and has some features for basic prototyping of themes. The tool lets you create or modify custom.scss right inside the editor and preview your theme in real time using official examples from Bootstrap’s docs. All variables are categorized (e.g. you will find all variables related to buttons styling under Buttons category).

When you just open the editor, the app layout is divided in 3 parts:

On the left hand side you can see all available documentation sections. To change the section and preview different components, click on the section of your interest

In the middle, you can see the preview of Bootstrap documentation as you would see on the official bootstrap website

On the right hand side you can see a list of Bootstrap variables related to the currently open section. if you need to modify variables that are not related to this section you can use a dropdown in the right top corner and change variables independently.

Variable types inside the editor

To make your life easier, each variable inside the editor can take one of the 6 types.

Type

Behaviour

Demo

string

does not have any special behaviour and usually used for SASS expressions and anything that does not fall under any other type

variable

the editor will auto suggest all previously declared variables

boolean

can take either a true or false value, will show a toggle

size

editor will display a plus and minus icons close to the variable input so you can adjust sizes easily value

color

when you focus on a field with a type of color, you will see a Sketch-like colour picker, which let’s you adjust colors

font

will auto suggest all available Google fonts so you can see how different fonts look on your theme

💡 You can switch between types (for example, to look up a variable)

Header controls

Theme import

Load your own custom.scss into the editor or one of 20+ pre-made themes by Bootswatch. Loading your own custom.scss is particularly useful to maintain your Bootstrap theme over time. You can export custom.scss file from the editor and load it back into the editor.

Show/hide code snippets

Code snippets toggle is used to enable or disable code snippets in the documentation, it’s enabled by default, but may be used in case you need a more concise way to preview examples in the documentation.

Compile strategy

A dropdown on the right is used to control how you want to compile your SASS - you can either compile it on my servers or in your browser, depending on your machine and internet connection speed. If you’re using the app from a mobile device, it’s a good idea to use server compile strategy.

Preview

Preview your theme on real life examples provided by official Bootstrap documentation, this preview will open in a separate window. This window is fully connected to the editor, so when you make adjustments to the theme, the preview will update in the real time.

Export

Export button is the main feature of the editor. You can export one of the following:

Option

Explanation

custom.scss

SCSS file with custom variables which you will include in your project

bootstrap.css

a complete CSS file of your custom build of bootstrap framework

bootstrap.min.css

a minified version of your custom Bootstrap build

Use custom theme in your project

custom.scss

After you have exported the custom.scss file you will need to modify it by adding @include rules to the beginning of the file to include entire Bootstrap framework, or parts that you need, for example: