So in this video we're going to take a look at some of the classes that I've used.
Now you can probably tell that this app immediately looks much better than the previous apps.
So let's jump into the layout.
The main layout, the only one we have in this boilerplate.
So we did all the steps from the bootstrap docs.
I've got this meta element.
I've got a link to the bootstrap CSS file from the CDN, from the content delivery network, and at
the very bottom of the file, I've got the script for all the functionalities that require JavaScript
baths.
Now, after setting up bootstrap, which as you've seen, is super simple, you just can use those bootstrap
classes anywhere.
And as I've said previously, there are different kinds of bootstrap classes.
So there are classes that do something with the layout.
This can for example add a Other container.
A grid.
Then you can have some classes for the forms or classes that have some more complex predefined styles
like components.
But there are also utility classes to work with, flexbox borders to easily be able to change backgrounds,
etc..
So bootstrap was probably the first library that popularized the concept of using those utility classes
to either just change one CSS property, or just create full components that can apply a lot of styles
at once.
Now, since bootstrap came to be, and that was a long time ago, there are more popular libraries like
tailwind CSS.
Now tailwind is great and I'm using it daily.
The problem with tailwind is that you actually need to design everything yourself so you don't get ready
made components like those buttons or search boxes.
It's just possible to make those.
But you still have to design everything yourself.
And I just thought that for a course like this where we focus on PHP and making websites, I don't really
want to teach you another skill along the way, which might just confuse us.
That's why I think it's just easier to use bootstrap, which is still popular, still fine, and I think
it is still used a lot and is still a very good library.
Now let's just go back to how I have used bootstrap so far, because you can probably tell that some
bootstrap was already applied because the app looks different than what we have in the project number
two.
So I think that the best way would be to open the DevTools and just go step by step by analyzing what
classes do we use and what do they do.
So let me select something.
Maybe the main element Or maybe let's start with the body so we can see that a lot of those classes,
they just change one specific CSS property.
For example.
This one is making sure we've got the view height that takes the whole available space of the browser.
Deflects is making the element a flex container, which makes it much easier to align justify elements
inside such a flex container.
Then inside header we've got a nav element with some classes navbar, navbar, expand, large navbar
light, etc. this is actually a component, so that's one of the kind of classes that bootstrap offers.
That's a ready made component that offers you some set of classes where you can easily add dropdowns,
links, search boxes, buttons, etc. it also comes ready with.
this burger button that lets you expand and see all the menu options, which is super useful because
it's not so easy to do such thing yourself.
So those classes like Flex or Flex column are about the layout.
So is container.
So let me jump to container because this one is useful.
And it's called the same way in every single framework.
So we need to jump to the layout utilities.
There it is container.
So essentially the container class will add the maximum width property at every specific breakpoint.
Breakpoints are essentially the screen size.
So if the screen will get the specific size.
Here are the predefined breakpoints.
The maximum width will be set more or less the same as the breakpoint value, which means the maximum
width of the page, which will always be a little bit smaller than the actual browser size.
You can see that right here, that there is some gap on the right and on the left.
And as I resize this, you can see that the size of all the elements is different, and it is adapting
to the size of the browser, which makes our project responsive.
By default, it should look and work great both on mobile and tablets and computers.
So other than the layout classes like container, we've got small utility classes like mp4, which means
margin at the y axis.
So at the top and at the bottom size for this one here empty five is add a margin at the top size five.
When I hover this element you should see that the margin is orange.
Then the paddings should be green and the actual size of the element is in blue.
So you can see those colors here, but only when I hover over the element.
Next up, the element inside it has the row class.
So you can check what specific properties does it modify on the right.
So row is making it a flex container.
Now I'm not going to explain what a flex container is.
As I've said it's a more complex topic.
You can read that inside the bootstrap docs, but it helps you align items.
Adding this justify content center is centering the elements inside this div class with the row class
well at the center.
So as you see, that's an easy way to center a div inside another one.
Next up we've got this div element which has this mysterious class called Md6.
Well let me try and explain that.
So this is relying on the bootstrap grid system.
That's not CSS grid, it is bootstrap own grid system.
That's flexbox based.
And I would invite you to just go ahead and read about grids in bootstrap in this page and also read
about flexbox.
But to cover it quickly you've got some predefined columns.
Specifically, it's assumed that there will be 12 columns, but you can span multiple of those columns
to achieve effects like this.
To have three equal columns, you can also use the natural width of the column based on the content
inside.
You can make columns wider, smaller.
You can span multiple of those virtual 12 columns.
And also then you've got breakpoints.
So you can define that scenes a specific screen size, which is for MD, for example, at least 768
pixels.
The column should have specific size or should span a specific number of columns.
As you see, I've said that there are 12 columns by default, so if we now go back and try to understand
what is this actually doing?
So row makes this div element a flex container.
And inside this is actually spanning six columns out of 12, but only after the specific minimum width
of the page which is 768.
Because this is a medium breakpoint essentially in plain language, six columns out of 12 makes this
column width 50%.
But if the screen size is smaller than this minimum width, this class is not applied, which basically
would make this element with the form.
Take the full available width, because that's the default behavior when you have an element inside
a flexbox.
So I'm telling you all those things, but obviously it might be hard to remember it all or to understand
it all, especially if you have a little or even zero knowledge about CSS and especially CSS frameworks.
Well, I think that there is really no way around that.
If you have zero CSS knowledge, you just need to bear with me and see me use those classes, which
I will try to explain, because obviously we're gonna be using the bootstrap classes.
I'm going to add new elements to this app, and then I'm gonna explain everything as we go.
But I would invite you to read more from the docs about all those grids and flex boxes.
Otherwise, you might really have trouble understanding this, but I'd like you to keep in mind that
while it's nice to have a good UI, it's not an essential part of this course.
So you are not expected to learn bootstrap or to learn CSS.
We are learning PHP and making backend applications with it.
Websites.
We are not really learning CSS in this course, so if you want to skip it completely and ignore styling
or use whatever you prefer, you are free to do so.
And going back to our app.
If I now look inside this element, we see another div element with the class card.
So this is what gives this rounded border.
Then we've got card body.
That's another set of classes from a component that's called card.
Then we've got a card title.
And inside we've got some classes for the forms.
Also this button is actually a component that's called button.
So I'm not going to go into every single class, as I've said, just to give you an overview of how
it all works, that there are container or layout classes, that there are also another category of
utility classes to control margins, paddings, text, colors, backgrounds.
And then the third biggest category.
That was the most important reason I've decided to pick bootstrap was components like the navbar, the
cart, the buttons, pagination, etc. so I think we're going to create a good looking app.
I think that's enough introductions to bootstrap.
I think it is understandable why we are using it and that it is still a good choice.
And next up we will begin actually working on our app, using our boilerplate framework that we've built
so far.
And bootstrap.