Installing & Customizing Bootstrap

Depending on how you're using Bootstrap in a project changes how it's compiled for use.

Option 1: Generate a custom build

1. Make sure the LTS version of NodeJS is installed: Installation guide

2. Clone the repository: Bootstrap on Github

3. Run npm install

4. Apply theme styles at the top of scss/_variables.scss:

   $body-bg: #aaa;
   $blue: #bbb;
   // …etc

   Note: See the section on FOX Colors for more information on theming Bootstrap.

5. After theming is complete, run npm run css to generate a minified file at dist/css/bootstrap.min.css

6. Integrate the CSS and JS files into your local project or upload to a CDN.

Option 2: Customize Bootstrap in an existing project

If you're using NPM and have a build process for Sass files already set up, you can import bootstrap directly into your project and customize it.

1. Add Bootstrap: npm i --save bootstrap

2. Create a dedicated Sass file as a container (paths below are examples):

   $ touch src/scss/shared/_bootstrap.scss

   // in the container file you just created,
   // add FOX theme definitions to the top:
   $body-bg: #aaa;
   $blue: #bbb;
   // …etc
   
   // import bootstrap directly from node modules
   // this requires a relative path to node_modules
   @import "../path/to/node_modules/bootstrap/scss/bootstrap";

   Note: See the section on FOX Colors for more information on theming Bootstrap.

3. Import that file first into your top-level Sass file:

   // in src/scss/main.scss for example:
   @import "shared/bootstrap";
   
   // the rest of your @imports
   @import "shared/vars";
   @import "pages/main";
   // …etc

4. The theme overrides present in _bootstrap.scss will affect the theme and will be built into your final compiled file.

FOX Colors

For the latest, and to get these colors in CSS, see the Invision DSM.

FOX-Branded Sass file

The following Sass block will apply FOX colors to Bootstrap:

// Named colors from DSM
$color-black-resin: #232222;
$color-fox-pop-blue: #004c97;
$color-fox-red: #d2232a;
$color-fox-gray: #e5e5e5;
$color-fox-dark-blue: #00263e;
$color-fox-dark-red: #830b0d;
$color-fox-light-blue: #008bcd;

// Begin Bootstrap customizations
$body-bg: $color-fox-pop-blue;
$blue: $color-fox-pop-blue;
$danger: $color-fox-red;

This block can go in two places depending on how Bootstrap is integrated into your project:

1. In a cloned Bootstrap repository, add it to the top of scss/_variables.scss then build the project.

2. In a package-managed app, create a _bootstrap.scss file, add the theming overrides, then:

   @import "../path/to/node_modules/bootstrap/scss/bootstrap";

   Download a sample file.

For more details on both options, see Installing and Customizing Bootstrap.