And once they are installed,
we can go to the next step.
Going back to our project folder,
you would see that if you go into node_modules,
you will see a folder in there named Bootstrap.
And inside the folder named Bootstrap,
you'll find a folder named dist.
So, inside dist folder,
you'll find two sub-folders named CSS and js.
If you go into the CSS folder,
you'll find a whole bunch of precompiled CSS files here.
The one that is of interest to us at the start is Bootstrap min.css.
That's the file that we are going to include into our
index.html file in order to make use of Bootstrap in our project.
Similarly, going to the js folder,
you would see that there is a Bootstrap min.js file.
We're going to include that also into our index.htm.
So that'll be the next step that you will see me doing.
Before we go to the next step,
let's start up our lite-server so that we can see the changes that we make to the
index.html immediately reflected into our web page in real time.
So let's start up lite-servers.
So, type the prompt type npm start,
and then that should start up your lite-server.
You can now see, on the screen,
my editor on the left and the current version of the index.html page on the right.
So, as you can see,
I have already configured the index.html page with some content.
This web page looks like the typical web page of a computer science professor.
Let's now open the index.html page in our editor.
And then in the head part of the index.html page,
right before the title,
I'm going to paste in a little bit of code.
This code snippet is given to you in the instructions.
So you can simply copy and paste this code snippet,
and I'll walk you through what this code snippet is trying to do.
You will notice that I have three meta tags here.
The first one says charset="utf-8".
So this is the unicode that is going to be used.
The second line which says meta name="viewport",
I'm going to come back and explain this particular line to
you in the next lesson when we will look at responsive web design.
Now, let me draw your attention to this particular line which
says link rel="stylesheet", and then href.
Note that I am specifying href as "node_modules/bootstrap/dist/css/bootstrap.min.css".
So what I am specifying is that the bootstrap.min.css file,
which contains the CSS classes corresponding to Bootstrap that we have
downloaded using NPM to our node_modules folder,
I'm going to include that into the head of my index.html page.
So you need to include the CSS classes provided by Bootstrap.
You also need to include the JavaScript classes provided by Bootstrap,
which we're going to do at the bottom of this page.
Going to the bottom of this page, note,
just before the closing body tag,
I'm going to paste in the code to include all the scripts there.
So, to do that,
I just paste in the three lines for the script to include the jQuery,
Popper.js, and also the Bootstrap min.js.
And note the order in which I have included this.
So the Bootstrap is at the bottom.
Then, since Bootstrap is dependent upon both jQuery and Popper in that order,
so I will first input jQuery.
And then after that, we input Popper, and then finally,
Bootstrap min.js at the bottom of the index.html file.
Now, this is included at the bottom of the page.
Because when you are loading the page from a web server,
you want the CSS classes to be loaded immediately so that as the page starts rendering,
when the JavaScript is fetched,
the JavaScript needs to execute in order to make changes
to your page with the JavaScript code,
and that will take a little bit of time.
So you don't want the user to be waiting for
the entire page to be loaded before they see something in their browser window.
So that's why we normally load the JavaScript classes
towards the end of our html page just before the body tech.
After making these changes,
let's save the file.
Now, the reason why I am showing the index.html
file in my editor and also the browser right next to it is,
the moment you save the changes that you have made to the index.html file,
note how the browser rendering of that file
immediately updates and see Bootstrap already in action on the page.
Right now, you'll see that your page is using Times New Roman to render all the content.
The moment I save the web page,
you notice that the fonts being used on your web page have changed.
Now, your web page is set up to make use of the Bootstrap classes,
and it is using Bootstraps default typography to render all the content.
Bootstrap by default uses Helvetica Neue for the font.
You can change the default font for bootstrap and so on,
but that will be beyond the scope of our discussion right now.
So, once you set up your index.html page and save it,
you will immediately see Bootstrap coming into action in our web page.
So this is how I'm going to keep illustrating,
as we add various bootstraps, CSS classes,
and components to our web page,
how the rendering of it in our browser will keep changing.
Now, obviously, the rendering of the page in our browser is still terrible.
It's better than the typical computer science professors web page,
but definitely not readable.
We need to now bring into action the various CSS classes and
the JavaScript components that
our Bootstrap web UI framework provides in order to design our web page.
So we will do that step by step as we go through this exercise.
This may be a convenient time for you to do a git commit of
the changes that you have made so that at the end of this exercise,
your state of your project folder will be saved to your git repository.
Going to my conFusion folder in another tab of my terminal window,
if I type git status,
I now see that my index.html file and the package of JSON file have been modified.
So I'm going to do a commit.
