Table of Contents

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:

App interface overview

  • 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 Type string
variable the editor will auto suggest all previously declared variables Type variable
boolean can take either a true or false value, will show a toggle Type boolean
size editor will display a plus and minus icons close to the variable input so you can adjust sizes easily value Type size
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 Type color
font will auto suggest all available Google fonts so you can see how different fonts look on your theme Type font

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

Variable types

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.

Import theme

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.

Code snippets

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.

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.

Preview

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:

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Custom variables go here...
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

// Custom variables go here...

bootstrap.css or bootstrap.min.css

Place exported file in your project directory and include it in your HTML:

<link rel="stylesheet" href="./css/bootstrap.css">
<!-- or -->
<link rel="stylesheet" href="./css/bootstrap.min.css">

Video

I have made a 3 minute video where I change fonts, colors and some other variables to give you an idea how to get building.