Welcome back, everyone, to this section of the course, we're going to talk about Bootstrap.
Now that we understand each smell and CSAs, we're almost ready to complete, ah, this question of
the front end stack, one of the last topics we're going to be talking about is the bootstrap framework,
which allows us to quickly create common front end components that look good for our website.
You can think of bootstrap as a combination of a CSV file already created for you and Rick to use arranged
HTML components.
It also uses a grid system to easily resize her web page for things like mobile, tablet or desktop
screens.
In this section, we're simply going to explore a few examples of commonly used components and web page
features with Bootstrap that we can use in our own sites later on.
Do not feel like you need to memorize any of the bootstrap code here.
Really, the documentation is designed specifically to be used as a reference, and we really want to
become experts in retrieving and looking up the information that we're interested in, rather than becoming
experts in just memorizing every single bootstrap component.
So we're just going to talk about a few things in this section, and those are buttons, forms and nav
bar, which is a navigation bar.
And then the grid system within bootstrap.
Now, I do want to briefly explore the documentation just to get an idea of how it all works.
So let's go to get bootstrap dot com in our browser.
All right, here I am at GEP Bootstrap dot com at the home page.
There is the ability to actually download the source that is things like the JavaScript and CSS files
for the use of bootstrap.
However, there is this really nice feature, which is just deliver, which allows us to simply just
attach these links and then our website or web page will automatically connect using this just deliver
system.
So that's going to be really easy to use, and we should also note that there's a bunch of icons that
come with bootstrap that are open source and you can actually use them yourself as well.
So we're going to come over here and just show an example of what bootstrap is, how it works, and
just kind of a quick idea of what you would actually do this or use this for.
So if you go to examples at the top of the web page, this takes us to the bootstrap examples page and
you can see a bunch of snippets like headers, heroes, features, sidebar, custom components, etc.
So for example, let's say you end up developing a product and a website where there's some sort of
pricing information you can see right here that there's a pricing example, there's a navigation bar
at the top, there's pricing, and then there's these little cards.
You can compare plans, etc. So already this looks or should look pretty familiar to you.
And the more and more you end up using bootstrap, the more and more you're going to see bootstrap like
components across the entire internet.
And if you were curious as far as how to actually implement this on your own website, you could just
right click click on View Page Source and here is the actual source code.
Now, this is not maybe the nicest way to actually look at this.
So maybe you're only interested in some of the components, which is what we're going to be covering
in the section so we can go back here and we go to the docs.
There's a whole getting started introduction download section.
But really, what we're going to be focusing on are just separate components and ideas like forms and
layouts.
So I want to show you an example of how you can quickly go to the bootstrap documentation and implement
the actual code yourself.
So we're going to do here is let's imagine we wanted to maybe set up our own form, so click here on
forms.
I see I click on overview of forms and essentially the entire documentation is going to be an example
of something.
And then the code for that example, if you come here, you'll notice there's code.
And what you'll end up realizing is bootstrap itself is essentially just a bunch of very specific class
calls that the documentation tells you what to do, and you can copy this code and put it directly into
your HTML file.
So a lot of this will just be copying from the actual documentation, and then you just have to remember
to link to the CSV file.
In fact, let's do that right now.
You'll notice this is actually a pretty nice form, so let's imagine we wanted to use it.
I can just hit copy here.
It's going to copy it to my clipboard.
I'm going to bring in visual studio code.
And then here inside my HTML file, I'm just going to put this here in the form and the body of the
HTML.
Now, if we actually look at this, it doesn't look that great right now because we haven't actually
connected the CSS and JavaScript files that bootstrap uses.
So we do.
Here is once you actually have your HTML code, if we wanted to make it look nice quickly, I can just
copy and paste those links for the CSS.
And you can actually get those on the home page or you can get them on the getting started page.
So I'm going to copy CSS and also this JavaScript.
So we simply copy this link.
And then we're going to come back here.
And we have our link to our own style sheet at which we can use to overwrite bootstrap if we want to,
but I'm going to paste that in.
Save those changes and just by pasting in the CSIS, we can already see that it looks a lot nicer.
And clearly, you can begin to add things like spacing and padding.
So this would only be in a certain container or portion of your web site, but you get the idea of essentially
all bootstrap is is this idea of these prefabricated, easy to use HTML components that already have
the class connections for you?
And then what you do is then you just link to the bootstrap thesis and before you know it, you have
this really nice looking form that you're going to start seeing across the entire internet as you get
more and more into bootstrap.
But that's the main idea of what we're covering in this section.
It's just the main ideas behind the commonly used components of bootstrap that we're going to be using
and then making sure we connect it to bootstrap.
And once you do that, you're going to see that you can easily build out really nice looking HTML components
and web pages quickly with bootstrap.
OK.
So again, we're going learn about buttons, forms, nafaa and the grid system in the upcoming lectures.
I'll see you there.