Table of Contents
- About Bootstrap.build
- App interface overview
- Variable types
- Header controls
- Use custom theme in your project
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
- 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
|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)
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.
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 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.
||a complete CSS file of your custom build of bootstrap framework|
||a minified version of your custom Bootstrap build|
Use custom theme in your project
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:
bootstrap.css or bootstrap.min.css
Place exported file in your project directory and include it in your HTML:
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.