One reason to use Bootstrap is that you can easily build a customized version. The primary reason to customize a Bootstrap build is to adjust the theme from the default. While we can use stylesheet.css to adjust the presentation, it’s much more effective to adjust theming the Bootstrap way. That means changing the SASS variables and recompiling Bootstrap to generate a new bootstrap.css file.
Bootstrap stylesheets are built using the build process described in the package.json file. Therefore, customizing a Bootstrap build means first downloading the Bootstrap source tree, making modifications, then using the npm run dist command to build the distribution. By the end of this section, you’ll know how to do all that.
The Bootstrap uses SASS, which is one of the CSS preprocessors used to simplify CSS development. In Bootstrap’s code, one file (scss/_variables.scss) contains variables used throughout the rest of Bootstrap’s .scss files. Change one variable and it automatically affects the rest of Bootstrap.
If you’ve followed the directions given earlier, you have a directory, chap06/notes, containing the Notes application source code. Create a directory named chap06/notes/theme, within which we’ll set up a custom Bootstrap build process.
In order to have a clear record of the steps involved, we’ll use a package.json file in that directory to automate the build process. There isn’t any Node.js code involved; npm is also a convenient tool to automate the software build processes.
To start, we need a script for downloading the Bootstrap source tree from https://github.com/twbs/bootstrap. While the bootstrap npm package includes SASS source files, it isn’t sufficient to build Bootstrap, and therefore we must download the source tree. What we do is navigate to the GitHub repository, click on the Releases tab, and select the URL for the most recent release. But instead of downloading it manually, let’s automate the process.
With theme/package.json can contain this scripts section:
{
“scripts”: {
“download”: “wget -O -https:// github.com/twbs/bootstrap/archive/v4.5.0.tar.gz | tar xvfz -“,
“postdownload”: “cd bootstrap-4.5.0 && npm install”
}
}
This will automatically download and unpack the Bootstrap source distribution, and then the postdownload step will run npm install to install the dependencies declared by the Bootstrap project. This gets the source tree all set up and ready to modify and build.
Type this command:
$ npm run download
This executes the steps to download and unpack the Bootstrap source tree. The scripts we gave will work for a Unix-like system, but if you are on Windows it will be easiest to run this in the Windows Subsystem for Linux.
This much only installs the tools necessary to build Bootstrap. The documentation on the Bootstrap website also discusses installing Bundler from the Ruby Gems repository, but that tool only seems to be required to bundle the built distribution. We do not need that tool, so skip that step.
To build Bootstrap, let’s add the following lines to the scripts section in our theme/package.json file:
“scripts”: {
…
“clean”: “rm -rf bootstrap-4.5.0”,
“build”: “cd bootstrap-4.5.0 && npm run dist”,
“watch”: “cd bootstrap-4.5.0 && npm run watch”
…
}
Obviously, you’ll need to adjust these directory names when a new Bootstrap release is issued.
In the Bootstrap source tree, running npm run dist builds Bootstrap using a process recorded in the Bootstrap package.json file. Likewise, npm run watch sets up an automated process to scan for changed files and rebuilds Bootstrap upon changing any file. Running npm run clean will delete the Bootstrap source tree. By adding these lines to our theme/package.json file, we can start this in the Terminal and we can now rerun the build as needed without having to scratch our heads, struggling to remember what to do.
To avoid having the Bootstrap source code checked into your Git repository, add a theme/.gitignore file:
bootstrap-4.*
This will tell Git to not commit the Bootstrap source tree to the source repository. There’s no need to commit third-party sources to your source tree since we have recorded in the package.json file the steps required to download the sources.
Now run a build with this command:
$ npm run build
The built files land in the theme/bootstrap-4.5.0/dist directory. The content of that directory will match the contents of the npm package for Bootstrap.
Before proceeding, let’s take a look around the Bootstrap source tree. The scss directory contains the SASS source that will be compiled into the Bootstrap CSS files. To generate a customized Bootstrap build will require a few modifications in that directory.
The bootstrap-4.5.0/scss/bootstrap.scss file contains @import directives to pull in all Bootstrap components. The file bootstrap-4.5.0/scss/_variables.scss contains definitions used in the remainder of the Bootstrap SASS source. Editing or overriding these values will change the look of websites using the resulting Bootstrap build.
For example, these definitions determine the main color values:
$white: #fff !default;
$gray-100: #f8f9fa !default;
…
$gray-800: #343a40 !default;
…
$blue: #007bff !default;
…
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
…
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
These are similar to normal CSS statements. The !default attribute designates these values as the default. Any !default values can be overridden without editing _values.scss.
To create a custom theme we could change _variables.scss, then rerun the build. But what if Bootstrap makes a considerable change to _variables.scss that we miss? It’s better to instead create a second file that overrides values in _variables.scss.
With that in mind, create a file, theme/_custom.scss, containing the following:
$white: #fff !default;
$gray-900: #212529 !default;
$body-bg: $gray-900 !default;
$body-color: $white !default;
This reverses the values for the $body-bg and $body-color settings in _variables.scss. The Notes app will now use white text on a dark background, rather than the default white background with dark text. Because these declarations do not use !default, they’ll override the values in _variables.scss.
Then, make a copy of scss/bootstrap.scss in the theme directory and modify it like so:
@import “custom”;
@import “functions”;
@import “variables”;
…
This adds an @import header for the _custom.scss file we just created. That way, Bootstrap will load our definitions during the build process.
Finally, add this line to the scripts section of theme/package.json:
“prebuild”: “cp _custom.scss bootstrap.scss bootstrap-4.5.0/scss”,
“postbuild”: “mkdir -p dist && cp -r bootstrap-4.5.0/dist .”,
With these scripts, before building Bootstrap, these two files will be copied in place, and afterward, the built files will be copied to a directory named dist. The prebuild step lets us commit our copy of the _custom.scss and bootstrap.scss files into our source repository, while being free to delete the Bootstrap source at any time.
Likewise, the postbuild step lets us commit the custom theme we built to the source repository.
Next, rebuild Bootstrap:
$ npm run build
> @ prebuild /Users/David/chap06/notes/theme
> cp scss bootstrap.scss bootstrap-4.5.0/scss
> @ build /Users/David/chap06/notes/theme
> cd bootstrap-4.5.0 && npm run dist
…
While that’s building, let’s modify notes/app.mjs to mount the build directory:
// app.use(‘/assets/vendor/bootstrap’, express.static(
// path.join( dirname, ‘node_modules’, ‘bootstrap’, ‘dist’)));
app.use(‘/assets/vendor/bootstrap’, express.static(
path.join( dirname, ‘theme’, ‘dist’)));
What we’ve done is switch from the Bootstrap configuration in node_modules to what we just built in the theme directory.
Then reload the application, and you’ll see the coloring change.
There are two changes required to get this exact presentation. The button elements we used earlier have the btn-outline-dark class, which works well on a light background. Because the background is now dark, these buttons need to use light coloring.
To change the buttons, in views/index.hbs, make this change:
<a class=”btn btn-lg btn-block btn-outline-light“
href=”/notes/view?key={{ key }}”> {{ title }} </a>
Make a similar change in views/noteview.hbs:
<a class=”btn btn-outline-light” href=”/notes/destroy?key={{notekey}}”
role=”button”> Delete </a>
<a class=”btn btn-outline-light” href=”/notes/edit?key={{notekey}}”
role=”button”> Edit </a>
That’s cool, we can now rework the Bootstrap color scheme any way we want. Don’t show this to your user experience team, because they’ll throw a fit. We did this to prove the point that we can edit _custom.scss and change the Bootstrap theme.
The next thing to explore is using a pre-built, third-party Bootstrap theme.
1. Using third-party custom Bootstrap themes
If all this is too complicated for you, several websites provide pre-built Bootstrap themes, or else simplified tools to generate a Bootstrap build. To get our feet wet, let’s download a theme from Bootswatch (https://bootswatch.com/). This is both a collection of free and open source themes and a build system for generating custom Bootstrap themes (https://github.com/thomaspark/bootswatch/).
Let’s use the Minty theme from Bootswatch to explore the needed changes. You can download the theme from the website or add the following to the scripts section of package.json:
“dl-minty”: “mkdir -p minty && npm run dl-minty-css && npm run dl- minty-min-css”,
“dl-minty-css”: “wget https://bootswatch.com/4/minty/bootstrap.css -O minty/bootstrap.css”,
“dl-minty-min-css”: “wget https://bootswatch.com/4/minty/bootstrap.min.css -O minty/bootstrap.min.css”
This will download the prebuilt CSS files for our chosen theme. In passing, notice that the Bootswatch website offers _variables.scss and _bootswatch.scss files, which should be usable with a workflow similar to what we implemented in the previous section. The GitHub repository matching the Bootswatch website has a complete build procedure for building custom themes.
Perform the download with the following command:
$ npm run dl-minty
> notes@0.0.0 dl-minty /Users/David/chap06/notes
> mkdir -p minty && npm run dl-minty-css && npm run dl-minty-min-css
> notes@0.0.0 dl-minty-css /Users/David/chap06/notes
> wget https://bootswatch.com/4/minty/bootstrap.css -O minty/bootstrap.css
> notes@0.0.0 dl-minty-min-css /Users/David/chap06/notes
wget https://bootswatch.com/4/minty/bootstrap.min.css -O minty/bootstrap.min.css
In app.mjs we will need to change the Bootstrap mounts to separately mount the JavaScript and CSS files. Use the following:
// app.use(‘/assets/vendor/bootstrap’, express.static(
// path.join( dirname, ‘node_modules’, ‘bootstrap’, ‘dist’)));
// app.use(‘/assets/vendor/bootstrap’, express.static(
// path.join( dirname, ‘theme’, ‘bootstrap-4.0.0’, ‘dist’)));
app.use(‘/assets/vendor/bootstrap/js’, express.static(
path.join( dirname, ‘node_modules’, ‘bootstrap’, ‘dist’, ‘js’)));
app.use(‘/assets/vendor/bootstrap/css’, express.static(
path.join( dirname, ‘minty’)));
Instead of one mount for /vendor/bootstrap, we now have two mounts for each of the subdirectories. While the Bootswatch team provides bootstrap.css and bootstrap.min.css, they do not provide the JavaScript source. Therefore, we use the /vendor/bootstrap/css mount point to access the CSS files you downloaded from the theme provider, and the /vendor/bootstrap/js mount point to access the JavaScript files in the Bootstrap npm package.
Because Minty is a light-colored theme, the buttons now need to use the dark style. We had earlier changed the buttons to use a light style because of the dark background. We must now switch from btn-outline-light back to btn- outline-dark. In partials/header.hbs, the color scheme requires a change in the navbar content:
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<span class=”navbar-text text-dark col”>{{ title }}</span>
<a class=”nav-item nav-link btn btn-dark col-auto”
href=’/notes/add’>ADD Note</a>
</div>
We selected the text-dark and btn-dark classes to provide some contrast against the background.
Re-run the application and you’ll see something like this:
With that, we have completed our exploration of customizing the look and feel of a Bootstrap-based application. We can now wrap up the chapter.
Source: Herron David (2020), Node.js Web Development: Server-side web development made easy with Node 14 using practical examples, Packt Publishing.