• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Create Your Own Design Theme

Log in or subscribe for free to enjoy all this course has to offer!

You’ve made a lot of progress over the last four parts of this course. Along the way, you’ve built a pretty impressive prototype for the Space School website using only Bootstrap’s classes and without writing a single line of CSS!

As great as Bootstrap’s default theme and designs are for getting a site built quickly and efficiently, you’ll want to customize the design to make it stand out or bring it in line with the branding guidelines.

As you can see from the official Bootstrap Themes website, as well as many other resources online, Bootstrap can be customized quite extensively.

Setup for Customization

Before you can create your own theme and customizations, you need to make sure your project is set up to allow for the changes you want. So far, you’ve been using the compiled files from BootstrapCDN. The only way to override the compiled file is to create overrides of the generated Bootstrap classes, but that would be time-consuming and potentially quite error-prone.  

Instead, we’ll take advantage of the fact that Bootstrap 4 uses Sass for defining its variables, which is easy to customize. You can check out the course on how to Produce Maintainable CSS with Sass on OpenClassrooms if you need a refresher or to learn more about Sass. 

To use Sass with Bootstrap, you need to have Bootstrap 4 installed in your project using npm. If you don’t already have it on your computer, make sure it is before moving on to the next step (npm installation instructions). 

You’ll also need to have Sass installed (Sass installation instructions). 

OK, now that you have the right tools, it’s time to get started with the customizations!

Open a command line terminal, change to the root of the directory that contains your project’s files, and then run the following command:

$ npm init

You can accept the defaults or add your own answers to the prompts. Once the command is completed, you’ll have a new file called package.json in the root of your project folder. 

Next, use npm to download the latest version of Bootstrap into your project. Run the following from the terminal:

$ npm install --save bootstrap

Once it runs successfully, this command will create a directory called node_modules, which will contain a subdirectory called bootstrap. This directory contains the compiled Bootstrap files in the dist directory as well as Bootstrap’s source files in the scss directory.

Now, create two new directories in your project’s root: one called scss where your Sass files will go, and another called css where the compiled CSS files will go.

In your scss directory, create a file called style.scss. 

Since you’re going to be overriding Bootstrap’s variables, you need to import the relevant file(s) from the node_modules/bootstrap/scss directory into your project, so in the style.scss file, add the line:

@import "../node_modules/bootstrap/scss/bootstrap.scss"

This will include the whole of Bootstrap into your project. Alternatively, if you want to optimize the size of your generated CSS file, you could import only the parts of Bootstrap you’re using; however, we’ll be importing all of Bootstrap for this course.

To generate the CSS file that your project will use, run this command in the terminal:

$ sass --watch scss:css

This will generate a file called style.css in the css directory. The --watch option will keep the command running and recompile the CSS file(s) into the css directory whenever any changes are made to the content of the scss directory.

The final step for making your own customizations is to replace the reference to the CDN version of Bootstrap in the header of your HTML files with a reference to the generated style.css file.

So you should replace this line in the  <head>  section of your HTML files:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

With this line:

<link rel="stylesheet" href="css/style.css" />

Test your files by opening them in a browser. They should still be properly rendering the Bootstrap components.

Customize Your Design

Now it’s time to start the customizations!

Bootstrap 4 uses Sass variables and maps to set many of the parameters of the site and components. Open and examine the file node_modules/bootstrap/scss/_variables.scss (which will be referred to from now on as the variables.scss file) and you’ll see that this is where, for example, the color variables used for some of the classes you’ve come across in this course are set (e.g., the colors for the  .bg-*,  button-*, and  alert-*  classes).

You can change any of the Bootstrap defaults by overriding the variables that have been set in this file. As you’ll notice, they are set with the Sass !default flag. To override them, they need to be set before the Bootstrap library is imported. One way to do this is by creating a file called _variable_overrides.scss in the scss folder of your project and importing it. Go ahead and create that file and then add the import to the top of your style.scss file, which will now have this content:

@import "variable_overrides"; // <-- add this line at the top
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Change the Headings Font

The first customization will be to change the font for the headings. The Space School wants to see what the site would look like if they were in a standard Times/Times New Roman serif font.

Search through the variables.scss file and you’ll see a group of variables that control the heading styles. Find the line the has this variable and value:

$headings-font-family: null !default;

This shows there is a variable called $heading-font-family set to null which you can override. Copy the name of that variable and add it to the _variable_overrides.scss file with the following value:

$headings-font-family: "Times New Roman", Times, serif;

Make sure that your Sass files are recompiled into the style.css file and refresh any of the pages. You should see that all the headings are now rendering in a serif font.

Look for other variables that allow you to change the fonts on the site and try overriding them to see how you can customize them.

Create a Color Theme

The marketing department has put together some brand guidelines for the site's colors and has asked for the following changes to be made:

  • The primary color of the theme should be the hex value #22A1ED.

  • The dark color of the theme should be the hex value #04040C.

  • The color of headings should be the hex value #284876.

  • The background color of the cards should be the hex value #FCFCFC.

Search through the variables.scss file to find the names of the variables you need to override for these customizations. Test the changes on your pages to make sure your theme has been applied. The background of the navbar should be the new dark, the buttons in the lesson cards should be the new primary, the headings should be the new color, and the cards should pop out a bit more with their new background color.

If you need some help you can check out the _variable_overrides.scss file in the part-5/chapter-1/custom-css folder in the course’s Git repository.

You can add CSS to customize your site as well as override the defaults for the Boostrap variables.  Search Bootstrap’s documentation for any class names you want to add to your project to see if they’re already used by any of their components or utilities. Don't use the Bootstrap class names for your custom CSS.

Let’s Recap!

You’ve learned how to:

  • Set up Bootstrap for customization by using npm and Sass.

  • Identify and override the default Bootstrap Sass variables.

  • Create your own color and font theme.

Now that you’ve learned how to create your own design theme and customize the look of your Bootstrap site, you’re ready to take the next step and learn how to customize your site’s functionality with JavaScript and jQuery.

Example of certificate of achievement
Example of certificate of achievement