Hello again, everyone.
So I want to add bootstrap to our project for this lesson, I'll continue throughout this course just
using the first project that we created with the default settings.
So now here's the first thing I want you to do is clean this page completely to do that, delete everything
in the app component that HTML.
So look, now a blank page appears in the browser, remember what I mentioned before, what we see in
the browser is in the Avatar component, that HTML page.
So by cleaning this section, we'll have a well, a clear slate to work with.
All right, so we want to add bootstrap to our project and use readymade textiles for our styles, and
for this we'll need to install bootstrap via NPM.
So inside this eye, right, npm install, double dash, save, bootstrap.
Right here in the terminal.
And so the latest version of Bootstrap gets loaded.
Now, we had previously uploaded globally and we're typing G in between this time, we installed Bootstrap
locally.
All right, so the offloads complete and bootstrap for has been loaded into our project.
And bootstrap should be installed under no doubt module's.
So when we look now, we'll see it here.
And the installation looks successful now if you can't see the bootstrap file under node modules, try
turning off Visual Studio Code.
When you open up your editor again, you'll see the bootstrap under Noad Module's.
All right, so you can see it successfully installed, so now we need to notify Angular.
Of our bootstrap now.
There's not much we have to do about that, actually, we just need to specify it in Angular Jason that
we use bootstrap.
So now just open, angular, Jason, and.
Look here, it says style success under the style section, under the SIRC or sauce folder.
So if you remember, we made six definitions for Stiles while creating a project.
And here we can edit styles within this page if we want to, but now I just want to use the ready-Made
code for styles.
And we just need to specify the bootstrap address here, Snel right node module's first right here and.
When we look, we can see that there are many dependencies under no module's.
When we go down a little bit, we'll see bootstrap and bootstrap, then dissed, then success and bootstrap
that success and then bootstrapped, Mendoza says I.
So I'm just going to write one by one and the angular dot Jason folder nowhat underscore module slash
bootstraps.
Yes, yes.
Bootstrapped Mendax, yes.
So what we do here is just report the bootstrap address.
It was very important to enter the path correctly here, double check it, make sure.
Now, just save the changes that we made and run and serve to add a new configuration.
Great, so now let's have a look at localhost Colin 4200.
Now, of course, the page is blank because we've deleted everything in the outer component, not HTML
page.
But let's say inspect here.
So when we look at the elements, we can see that there are two choices for styles, the first of these
is bootstrap.
All right.
So that means we've added it correctly.
Good job.
And now I want to show you a little example, so.
I'll come up here to the Dow component, that HTML page and here, all right.
Hello, world with an H2 tag.
So when I say the changes, we see the bootstrappers use for style.
And now we can add a button to try out to so simply want to add and here I want to show that we're only
using bootstrap and we can add the code available in it.
All right, so we've just seen how to include a new configuration in our project.
First, we saved Bootstrap to our project and we notified Angular of the bootstrap files downloaded
under node underscore modules.
To do this, we included the bootstrap path to angular Jason.
Cool.
All right, so I think we've done enough here.
See in the next lesson.