Creating a Custom Bootstrap Version

Overview

Bootstrap is a popular CSS Framework for developing responsive and mobile-first websites. What a lot of people don’t realize is that it is easy to customize it and build your own custom version for use in your websites. This tutorial covers how I modified Bootstrap under macOS to customize larger than normal breakpoints for a project I was working on.

These steps assume that you have macOS Catalina installed and working as well as Homebrew.

Tools/Versions Used:

Source Code Installation Process

  1. Update Homebrew’s packages:
  1. Install and verify the correct version of Node (NPM) using Homebew. Node should report the version number if it is properly installed as v14.4.0.
  1. Download the latest version of the Bootstrap source from the Bootstrap web site using the “Download Source” option (be sure you get the Source and not the distribution version).

    On macOS it will automatically extract the ZIP file that is downloaded into a directory. In my case the directory was named bootstrap-4.5.2 which was located at /Users/jtucker/Downloads/bootstrap-4.5.2.
  1. This step is optional. Copy the entire contents of the bootstrap-4.5.2 to a directory in your home folder named Source/bootstrap so it won’t get lost in the Downloads folder. For the rest of the article I will be working with the code in this directory (in my case the path is /Users/jtucker/Source/bootstrap).
  2. Open a macOS Terminal.
  3. Go to the newly created Bootstrap source home directory and install its local dependencies listed in package.json:
  1. Use Ruby to install Bundler. This will install all the Ruby dependencies:
  1. Test a build to see if everything is working:

Assuming everything works correctly you should now have a directory located in a subfolder named dist that will include all the distribution files that you would normally get if you downloaded the distribution from the Bootstrap website.

Modifying Bootstrap

Now that we have a working version of the Boostrap source code that can be compiled, we will make a minor modification to the breakpoints that are included in the CSS file.

  1. Create a _custom.scss file that will contain the additional custom breakpoints and add some content to it
  1. Add the following content:
  1. Edit the bootstrap.scss and add the custom import to the top of the file. This will allow the variables that are defined in the _custom.sass to override the ones defined in the standard. Depending on your needs, you can also do this for the bootstrap-grid and bootstrap-reboot files.
  1. Build the new distro:

The new CSS files will be in the dist folder and you can use these files instead of the standard Bootstrap ones.

Leave a comment

Your email address will not be published. Required fields are marked *