Now to get started with bootstrap, you again,
should create a new file in a new folder.
Here, I'm again, in an empty folder.
And I will again add my index HTML file.
And now I want to build a basic website,
an example website, with bootstrap.
For this, before we copy and paste any example code,
we should go back to the getting started part
of the documentation here on get bootstrapped.com,
and there go to introduction.
Now here you learn that the easiest way
of adding bootstrap to your page
is to add this link element,
which simply loads a CSS file
that was not written by you and that is
not stored on your computer, but which is
instead loaded from some web address.
So it's stored on some remote server,
some remote computer, and we load it from there.
And that is something you can do in
web development and HTML.
So here we can click this copy button
or manually copy this entire code here.
And then in our index HTML file
I'll add this default website skeleton,
this HTML skeleton here,
and here I'll name this third-party example.
And below this title,
I will now add, copy in, this link here.
And I'll press that auto format shortcut,
which does actually split this across multiple lines.
So now we have line breaks inside of one of the same
element, but not inside of the attribute values,
but instead between our different attributes.
And those line breaks as learned before,
are simply added to improve readability.
Now we can see that on our link element,
we now also have more attributes than what we saw before,
but we can ignore these attributes for now.
In the end, these are just attributes,
which ensured that the bootstrap CSS file
is loaded appropriately and securely.
And now that does enable these bootstrap
CSS classes on our page.
Now, we could get started and use bootstrap
by going back to components and there maybe grab
the nav bar.
So click on nav bar and then here we could add
such a navigation bar to our page.
And for this we can just copy all that code here,
if we want to, this example code,
and then add it on our page.
Now, of course you can always tweak this
to your requirements.
You don't have to use the full code,
but here I do want to use that full code.
So instead of the body, we maybe add a
header element and inside of that header,
I now paste in this bootstrap example code.
This nav element with all its nested elements
and the those bootstrap CSS classes.
And now I pressed the auto format shortcut,
I'll save everything.
And if we now open this page
with the live server extension again,
you should see your navigation bar here at the top.
And we have that because of those CSS classes
that are added in this code.
Now, if you read through the full documentation
for the nav bar, you do actually learn that
there are many things you can customize
and fine tune to your exact requirements,
whatever you need.
And um here, I will keep it fairly simple
because this is just an example
to introduce you to bootstrap, but of course,
feel free to play around with those different options
and the different classes and the
different ways of using this toolbar,
since you have a lot of flexibility here.
But I'll stick to this basic example here,
because it's not about building an actual website here,
but just about getting started with third-party
packages in general.