You’ve made a lot of progress over the last four parts of this course. Along the way, you’ve created a functional prototype for your portfolio website using only Bootstrap classes and without writing or changing a single line of CSS!
The default themes and examples provided by Bootstrap are great for creating a website quickly and efficiently. However, it’s essential to put your own stamp on your project to make it unique. There are many resources online to do this. For example, you can get Bootstrap themes from the official website, which demonstrates the level of detail the framework offers in terms of customization.
Configure Your Project to Make It Customizable
Before creating your own theme, you need to make sure your project is correctly configured. So far, you’ve been using BootstrapCDN compiled files. The only way to replace these files is to create Bootstrap substitution classes, but that would be time-consuming and may lead to errors.
We’ll use Sass to generate variables.
You need to install Sass with Bootstrap 5 for your project using npm.
You should now have the right tools on hand to start adding a personal touch to your project!
Open a command terminal, go to the root folder of the directory that contains your project files, then run the following command:
$ npm init
You can accept the default values or add your own responses to the suggestions. Once you’ve run the command, you’ll have a new file called package.json in the root of your project folder.
Then, use npm to download the latest version of Bootstrap to your project.
Run the following command in the terminal:
$ npm install bootstrap
This command creates a directory called node_modules, containing a subdirectory called bootstrap. This directory contains the compiled Bootstrap files in the dist directory and Bootstrap’s source files (non-compiled) in the scss directory.
Now create two directories in the root folder of your project: name one scss, where you’ll store your Sass files, and name the other css for your CSS files.
In the scss directory, create a file named style.scss.
As you’re going to override the Bootstrap variables, you’ll need to import the relevant file(s) from the directory node_modules/bootstrap/scss into your project.
To do this, add the following line in the style.scss folder:
@import "../node_modules/bootstrap/scss/bootstrap.scss"This will include the whole of Bootstrap in your project.
Alternatively, you can optimize the size of the CSS file generated by only importing the folders needed for customization. However, to make things simpler, we’ll import the whole of Bootstrap in this course.
To generate the CSS file that your project will use, first install Sass (if you haven’t already) by running the following command:
$ npm install -g sass
Once Sass is installed, you should be able to launch automatic compilation of your SCSS file using the following command:
$ sass --watch scss:css
Doing this will generate a file called style.css in the css directory. The option--watchkeeps the command running and recompiles the CSS files in the css directory whenever changes are made to the scss directory. This is very useful when you’re working on your files.
The final step is to replace the reference to the CDN version of Bootstrap in the header of your HTML files with reference to the generated style.css file.
You now need to replace this line in the <head> section of your HTML files:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">With this line:
<link rel="stylesheet" href="css/style.css" />Test your files by opening them in a browser. They should still render all the Bootstrap components correctly.
To fix this, search for the file _offcanvas.scssin your Bootstrap folder, then take the name of the z-index variable of the .offcanvas class. If it hasn’t changed, this variable should be $zindex-offcanvas . Add it to your _variables_overrides.scss file and give it a higher value than the z-index of the class .modal-backdrop , i.e., 1051 if this hasn’t changed by the time you read this.
You’ve just fixed a bug with only one line of code! Well done!
Customize Your Pages
It’s now time to start customizing your website!
Bootstrap 5 uses Sass variables and cards to define many website parameters and components.
Open and examine the file node_modules/bootstrap/scss/_variables.scss, which is where color variables used for certain classes you’ve encountered in this course are set (e.g., the colors of the .bg- and button-* classes), among other things.
You can change any default value in Bootstrap by replacing the variables defined in this file. As you’ll notice, they are defined using the Sass !default flag.
To override them, they need to be set before importing the library and not have a!defaultflag.
To do this, create a file with the name _variables_overrides.scss in the scss file of your project, and import it. Once the file is created, add the import to the top of the style.scss file.
The content of the style.scss file should then look like this:
@import "variables_overrides.scss"; // <-- add this line at the top of the file
@import "../node_modules/bootstrap/scss/bootstrap.scss";Now you’ve created the Sass architecture for your project, you’re ready to change the Bootstrap 5 default variables to customize your theme.
To do this, open the page node_moduls/bootstrap/scss/_variables.scss in your IDE, then copy and paste the variables you want to change into the _variables_overrides.scss file.
If you want to change the primary color for all the classes using it, you can replace the Sass variable “ $primary ” with the value of the new color you want in _variables_overrides.scss.
$primary: #20c997;
Over to You!
Your mission is to:
Change the
$primaryand$secondarycolors.Enable
shadowsin the general settings.Disable
roundedin the general settings.
Once you’ve made these changes, watch the screencast below to compare your work with ours!
Let’s Recap!
Bootstrap can be configured using npm and Sass to customize the appearance of your website. It also makes it easier to update your CSS style using the power of Sass.
You can replace the default Sass variables in Bootstrap to improve the framework’s performance and customize themes.
You can create your own color themes and integrate a particular font by changing the value of the relevant variables in the
variables.scssfile.It’s easy to change the appearance of a theme by enabling or disabling Sass options in Bootstrap.
Now you know how to create your own design theme and customize the appearance of your Bootstrap website, you’re ready to move to the next step: creating utility classes using the Bootstrap 5 utility API.
