So in the previous video, I have mentioned that we're going to be using bootstrap.
I think it's a good time that I explain why I've decided that's a good idea.
Then what bootstrap is, and then we're gonna go through the classes that I have already applied to
some of the views of our starter boilerplate.
So what is bootstrap?
Well, you can call it a CSS framework or CSS library, or alternatively, just what they say, which
is the feature packed frontend toolkit.
So in our project, bootstrap was already set up by me.
It's quite easy to do.
So let me quickly explain how you can do it yourself.
So the best way is to jump to this introduction section on the Bootstrap Docs page and just follow the
steps.
So you just need to add a meta tag.
And then you just need to link to bootstrap CSS and JavaScript.
You need to place this specific link element inside the head section, and at the end of the body section
this specific script tag, you can just copy them right from this page.
So bootstrap comes with some CSS, but also with some JavaScript.
And this points to a server that is called CDN.
That's a content delivery network.
Essentially that's a special kind of server for quick delivery of assets like CSS or scripts that will
make those assets super quickly available to all the visitors of your page baths.
Now, I wanted you to know that a bootstrap has every single framework is a complicated project.
There might be a lot of things that you would have to learn yourself if you'd like to use it, or you'd
like to use it to its full extent.
And just a disclaimer that I will not cover bootstrap in depth in this course.
So we are using it because it's super easy to get started and it's super easy to use some of the interesting
features, but the course itself is about PHP, so I'm not gonna go deeply into.
Bootstrap.
You can just jump and read this docs for any specific use cases that you might have.
Anyway, you should know that bootstrap is configurable.
It comes with some predefined classes that you can call utility classes, for example to work with grids
to create containers.
So for responsive design.
And the most important thing that it comes with is basically the components.
So this is for example full forms.
You can have some pre styled form elements.
And this would be important for us.
That's something that looks much better than all the default browser styles.
Now if we take a look at this example, you can see how easy it is to achieve a pretty good looking
style of your form elements by just applying a single class.
So you just need to use those specific class names which you can figure out by looking at the docs.
For example, you need to wrap a specific checkbox with this form check class inside a div element.
Then you place an input and label.
They also need to receive some specific classes on them.
And voila!
You've got a style.
So this is how you can style the form elements.
But maybe what's even more important to us are those components.
So there are some pre-built user interface elements like this card in here.
It might look a little bit like this, but you can customize it.
And there are different elements that you can use.
So you typically just wrap the div element with a card class.
And then you use inside some of the additional classes like card body or card title or card text to
achieve different styles.
Same goes with buttons.
You can just add this btn class and then additionally style it with the specific styles of the button
like the primary button, the secondary button, so on and so on.
All of those classes can be found inside the docs.
You can see all the possible styles.
So as you can see, this gives us quite a lot of to work with.
And essentially almost all the user interface requirements can be covered by just using bootstrap.
And what's most important in building projects quickly is you basically have good looks out of the box.
So essentially, I think that we actually have covered a lot of bootstrapping this video, because you
just need to set it up by adding the pointer to the CSS file to JavaScript file.
And then you start using classes and you end up with something that looks like this.
Now let's jump to our project.
So I'm quickly gonna go through the components or classes that I have used behind the scenes to build
something that looks like this.