Table of contents :

Visual Studio Code logo

10. VSCode,
     Compile Bootstrap with VSCode.


This chapter shows you how to compile a webpage that is styled with Bootstrap, and with some styling of your own.
It DOES NOT explain all ins and outs of how to style with Bootstrap. There are other pages on the web that explain that in more detail.

The focus of this chapter is on what to write, and where to put it, to get Bootstrap to style your page as you want.

10.1. VSCode, Download and install the Bootstrap files.

The first step is to get the Bootstrap files in the right place for compiling with VSCode. Because the documentation links on the Bootstrap Home-page, depend on the Bootstrap version, do the following:
Go to the Bootstrap Home page, click on the pink Get Started button, so yo go to the Getting Started page. Open the Getting Started menu on the left side and click on Download, this gives you:
Visual Studio Code, add Bootstrap files.
Visual Studio Code, add Bootstrap files.

You can see in the url, this page is dependant on the Bootstrap version (in yellow). On the left side you see the menu. Scroll down a bit till you see:
Visual Studio Code, download Bootstrap files.
Visual Studio Code, download Bootstrap files.

Click on the pink Download source button.
After that, find the bootstrap-5.x.x.zip-file on your system. The x-es tell you the sub-version number you downloaded. It might even be bootstrap-6 or 7 by the time you download it.

The contents of the zip-file looks like this:
Visual Studio Code, Bootstrap zip-file.
Visual Studio Code, Bootstrap zip-file. You need the scss- and the dist-directory.

Notice the dist- and scss-directory inside the zip-file.

First:
find the scss-directory in the zip-file, copy this directory, so each and every file and directory inside it will be in the copy, navigate to the boot5orig-scss directory in your test-environment:

Visual Studio Code, copy zipcontents to scss directory.
Visual Studio Code, copy zipcontents to scss directory.

And past the copied scss-directory from the zip-file into it. Your scss directory in your test environment, now looks like this:

Visual Studio Code, scss directory in your test environment.
Visual Studio Code, scss directory in your test environment.

Second:
find the dist-directory inside the bootstrap zip-file, copy it, and past that directory in the boot5orig-scss -directory in your testenvironment.

Visual Studio Code, dist directory in your test environment.
Visual Studio Code, dist directory in your test environment.

Your boot5orig-scss directory now looks like this:

Visual Studio Code, boot5-orig-scss directory in your test environment.
Visual Studio Code, boot5-orig-scss directory in your test environment.

The dist/css directory contains the original Bootstrap stylesheets as downloaded from the Bootstrap page.
The dist/js directory contains the original Bootstrap js-files from that same page.
And the scss directory contains the original, unmodified, scss-files downloaded from the Bootstrap-page.

Now everything is in place for a simple example with Bootstrap.

10.2. VSCode, simple example with Bootstrap.

We will start with the example of our previous chapter, containing
Basic HTML file: understanding-html-head-body2.html with styles linked in.

                      

                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                          <meta charset="UTF-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <meta http-equiv="X-UA-Compatible" content="ie=edge">
                          <title>Learning HTML description & title tags.</title>
                          <meta name="description" content="This you get to put what you want. ">

                          <link rel="stylesheet" href="/dist/css/vscode-basic-styles.css">

                        </head>

                        <body>
                          <h1>Hello World, this is my site !</h1>
                        </body>
                        </html>
                      
                    
Basic SCSS file: vscode-basic-styles.scss containing the styles for the HTML-file.

                      

                        h1 {
                          color: darkorchid;
                          text-decoration: overline;
                        }
                      
                    


It produced this webpage:

Visual Studio Code, Live Sass Compiler, Basic HTML file in browser.
Visual Studio Code, Live Sass Compiler, Basic HTML file file in browser.

Now we will combine our own styling with Bootstrap styling.
On line 10 of the above code for the HTML-page, inside THIS CODE , we have a link to our own stylesheet.
We will combine that with a link to the original Bootstrap stylesheet inside the dist/css directory we copied in the previous chapter. We put the link to Bootstrap, right before our link. DONT SAVE THE FILE YET !
We also need to link in the Bootstrap js-files. That is done at the very end of our html, just before the closing body-tag. Because Bootstrap needs popper, we insert that too (from the jsdeliver site). That gives us:
HTML file changed for Bootstrap, named: understanding-html-head-body3.html

                    

                          <!DOCTYPE html>
                          <html lang="en">
                          <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <meta http-equiv="X-UA-Compatible" content="ie=edge">
                            <title>Learning HTML description & title tags.</title>
                            <meta name="description" content="This you get to put what you want. ">

                            <link rel="stylesheet" href="/dist/css/bootstrap.css">

                          </head>

                          <body>
                            <h1>Hello World, this is my site !</h1>


                            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
                              integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
                              crossorigin="anonymous"></script>

                            <script src="/dist/js/bootstrap.min.js"></script>

                          </body>
                          </html>
                    
                  
When the file looks like above, save it, and watch what happens in your browser. Your browser will refresh and produce this webpage:

Live Sass Compiler-Bootstrap, Basic Bootstrap styling.
Live Sass Compiler-Bootstrap, Basic Bootstrap styling.

As you can see, the H1-heading now has a Black color, and the font changed to the default Bootstrap H1 font.

Now suppose we want to change the H1 color back to that purple color. We can do that in the following way:

Inside Bootstrap there is a scss-variable that holds the headings-color for all headings h1 - h6.
If we set that variable to the purple color, our heading will be what we want. Now remember that we declared a boot5vscode/scss directory to hold our own stylesheets. So go to that directory, declare a text-file my-html-head-body-styles.scss and open it in VSCode:

Live Sass Compiler-Bootstrap, Own Bootstrap styling.
Live Sass Compiler-Bootstrap, Own Bootstrap styling.

Type the line as in the example, and watch what happens when you save it:

Live Sass Compiler-Bootstrap, our own compiled css files.
Live Sass Compiler-Bootstrap, our own compiled css files.

The reason you see 4 compiled files instead of the 1 file you might have expected, is that of my settings for the sass compiler.

Live Sass Compiler-Bootstrap, settings for Compiling Bootstrap with SASS.
Live Sass Compiler-Bootstrap, settings for Compiling Bootstrap with SASS.

The first line, generateMap, lets Sass generate map-files, together with the css-files.

The second line, formats, has two blocks of settings, one for generating the minimized files, and the other for generating the normal expanded css files.

Now we will change our html file:

Live Sass Compiler-Bootstrap, html-file for example 1.
Live Sass Compiler-Bootstrap, html-file for example 1.

After saving it, our browser window gives the new purple heading:

Live Sass Compiler-Bootstrap, webpage with Bootstrap and own styling.
Live Sass Compiler-Bootstrap, webpage with Bootstrap and own styling.

The purple is coming from our own styling, the font is coming from the Bootstrap styling.

10.3. VSCode, more extensive Bootstrap example.

Before we go on with the next example, I strongly suggest you read the Bootstrap pages about Customizing with Sass. Together with the pages about: Options, Color, Components and the other chapters from the Customize-sidemenu on the left of that page.

They give you a better understanding of how Bootstrap is designed and organized.

In the way we styled our example 1 in the previous chapter, we could only change one thing at a time. Now what if we wanted to change the colour of ALL the headings or change Bootstraps default colour.
We would have to add a lot of extra in our stylesheet. From the Customize pages on the Bootstrap website, you will have learned, that by using and changing the variables of Bootstrap, we can change the look and feel into what we want.

For that we need to import Bootstrap into our own stylesheet in a special way. Lets have a look at the main Bootstrap stylesheet first, it is called bootstrap.scss, and we find it in our boot5vscode/boot5-orig-scss/scss - directory.

Live Sass Compiler-Bootstrap, extensive Bootstrap example- bootstrap.scss.
Live Sass Compiler-Bootstrap, extensive Bootstrap example- bootstrap.scss.

When you look at your bootstrap.scss file it might look slightly different because it is another version.

The commands @import mean, that on this place a file is linked-in from outside bootstrap.scss, it is compiled, and after that the SASS-compiler returns to the next line in bootstrap.scss to procede with the compilation. Each outside-file might itself contain other imports. So in fact bootstrap.scss is a whole tree of files, an upside-down tree, not just one file. All files are linked together with these imports.
You might have noticed, all imported file-names in the directory itself, start with an underscore, but in the import-statements in the above picture, no underscore is present. SASS interprets files without an underscore as the mainfile of a tree and will compile them on their own. Which will fail if they are dependant of other files. In the import statement however, no underscores must be written.

Now you will understand that something defined inside the file variables, on the second import-line, can and will have effect on each and every file below that import line.

That means that if you want to change something, you have to be aware of where to put that change, to have the effect you want.

As you might have understood from the explanation of Bootstrap variables on the Bootstrap pages, lots of styling in Bootstrap is done by variables, which are, ofcourse, declared in the file variables.

I suggest you open that variables file and have a look at it. You will need it lots of times. So familiarize yourself a bit with it.

Variables inside a scss-file are declared like this:
$this-is-a-variable: $white !deafault;
They start with a variable-name preceded with a dollar-sign and immediately followed bij a colon.
In this case the variable is a colour variable so it is followed bij a colour: $white. After the colour is !default and the statement ends with a semicolon.

Now that !default is important. It means that if the SASS-compiler, at the moment it encounters this variable-name, does not have a variable by that name yet, it will use the value given here, so it will use the white colour.
If it finds another declaration of the same variable-name it already has, it will skip the value found there and use the value it had from the first time that variable was defined.

Now this may sound silly, nobody will declare a variable twice, right???
But because of the tree I mentioned before, it is very well possible that those declarations are in completely separated files. And, more, there might be another definition given on purpose.

Let me explain:
In our example we changed the h1 color into purple. Now suppose we want ALL headings to be purple. We know Bootstrap makes them black. When we look in bootstraps variable file we see there is a variable: $headings-color: null !default;
this results in the black headings. Now if we want headings to be purple, we have to change exactly THAT variable into purple. But we need to change it, BEFORE the SASS compiler gets to this line, so in fact BEFORE it processes the import to the variables-file.

Live Sass Compiler-Bootstrap, extensive Bootstrap example- changing the headings variable.
Live Sass Compiler-Bootstrap, extensive Bootstrap example- changing the headings variable.

Now if we would put our own definition in the bootstrap.sccs file itself it would make it unreadable when we have many changes. And we would lose control of the original bootstrap definitions.
So what we do is this, we create our own my-bootstrap-file inside the directory boot5vscode/scss, which is in fact a copy of the original bootstrap.scss file. Because our file does not reside in the directory where the original bootstrap.sccs file resides, we have to change all imports to point to the original bootstrap files. Like this:

Live Sass Compiler-Bootstrap, extensive Bootstrap example- changing the headings variable.
Live Sass Compiler-Bootstrap, extensive Bootstrap example- changing the headings variable.

For clarity there is some extra comment heading, so it is obvious this is not the original bootstrap.scss. You can find the code of this file
modified scss-file: my-bootstrap.scss.

                      

                        // ********************************************************
                        // THIS IS THE SPECIAL IMPORT-FILE FOR THE EXTENDED EXAMPLE
                        // ********************************************************
                        /*!
                        * Bootstrap v5.1.1 (https://getbootstrap.com/)
                        * Copyright 2011-2021 The Bootstrap Authors
                        * Copyright 2011-2021 Twitter, Inc.
                        * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
                        */

                        // scss-docs-start import-stack

                        // Configuration
                        @import "../boot511-scss/scss/functions"; 
                        @import "../boot511-scss/scss/variables";
                        @import "../boot511-scss/scss/mixins";
                        @import "../boot511-scss/scss/utilities";

                        // Layout & components
                        @import "../boot511-scss/scss/root";
                        @import "../boot511-scss/scss/reboot";
                        @import "../boot511-scss/scss/type";
                        @import "../boot511-scss/scss/images";
                        @import "../boot511-scss/scss/containers";
                        @import "../boot511-scss/scss/grid";
                        @import "../boot511-scss/scss/tables";
                        @import "../boot511-scss/scss/forms";
                        @import "../boot511-scss/scss/buttons";
                        @import "../boot511-scss/scss/transitions";
                        @import "../boot511-scss/scss/dropdown";
                        @import "../boot511-scss/scss/button-group";
                        @import "../boot511-scss/scss/nav";
                        @import "../boot511-scss/scss/navbar";
                        @import "../boot511-scss/scss/card";
                        @import "../boot511-scss/scss/accordion";
                        @import "../boot511-scss/scss/breadcrumb";
                        @import "../boot511-scss/scss/pagination";
                        @import "../boot511-scss/scss/badge";
                        @import "../boot511-scss/scss/alert";
                        @import "../boot511-scss/scss/progress";
                        @import "../boot511-scss/scss/list-group";
                        @import "../boot511-scss/scss/close";
                        @import "../boot511-scss/scss/toasts";
                        @import "../boot511-scss/scss/modal";
                        @import "../boot511-scss/scss/tooltip";
                        @import "../boot511-scss/scss/popover";
                        @import "../boot511-scss/scss/carousel";
                        @import "../boot511-scss/scss/spinners";
                        @import "../boot511-scss/scss/offcanvas";
                        @import "../boot511-scss/scss/placeholders";

                        // Helpers
                        @import "../boot511-scss/scss/helpers";

                        // Utilities
                        @import "../boot511-scss/scss/utilities/api";
                        // scss-docs-end import-stack

                      
                    


To change the colour of our H1 heading to purple, we need the variable
$headings-color
as mentioned before. And to make it work, we have to put the change just before the import-call to the variables-file. But this colour change might not be the only one, so it will be better if we would put all changes to variables, into a my-variables.scss -file of our own, and import that just before the import to the bootstrap variables file. We will name the file _my-variables.scss. (do not forget the underscore) So we get:
our own variables scss-file: _my-variables.scss.

                    

                      // ********************************************************
                      // This is the my-variables file for Bootstrap 5.1.1
                      // ********************************************************

                      $headings-color:     darkorchid;

                    
                  
modified scss-file: my-bootstrap.scss.

                    

                      // ********************************************************
                      // THIS IS THE SPECIAL IMPORT-FILE FOR THE EXTENDED EXAMPLE
                      // ********************************************************
                      /*!
                      * Bootstrap v5.1.1 (https://getbootstrap.com/)
                      * Copyright 2011-2021 The Bootstrap Authors
                      * Copyright 2011-2021 Twitter, Inc.
                      * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
                      */

                      // scss-docs-start import-stack

                      // Configuration
                      @import "../boot511-scss/scss/functions"; 

                      @import "my-variables";

                      @import "../boot511-scss/scss/variables";
                      @import "../boot511-scss/scss/mixins";
                      @import "../boot511-scss/scss/utilities";


                    
                  
Notice the underscore in the filename on disk, but no underscore in the import-statement!

Because the _my-variables.scss -file is in the same directory as the my-bootstrap.scss file, we do not need any directory references in this import-statement.

Now the last thing we need is to change our html-file, to work with our newly compiled file.

Live Sass Compiler-Bootstrap, extensive Bootstrap example- use our own bootstrap styles.
Live Sass Compiler-Bootstrap, extensive Bootstrap example- use our own bootstrap styles.

We change the link on line 10 to our newly created my-bootstrap.css file, and save it. Our browserwindow now looks like this:

Live Sass Compiler-Bootstrap, extensive Bootstrap example- browser window.
Live Sass Compiler-Bootstrap, extensive Bootstrap example- browser window.