Now what I'm going to do is that I'm going to war.
I'm going to be working on the section that's going to come after this, which is going to be which
is going to be a bar here that's going to display brands, different brands from the brands that we
have in our website.
So here's what I'm going to do in the email.
First, I'm going to add a comment and then I'm going to add the brand.
I'm going to say brand because this is going to display the brands that we have.
So for this section, I'm going to create a section and I'm going to give this section ID and the ID
is going to be just brand and I'm going to give it also a class.
The class is also going to be the container class.
And inside that section.
I want to display our all.
I want you to say that.
And then I'm going to give it a classical URL.
So what Israel does is that it divides the page into rows and columns, and you can divide the page
into columns, up to 12 columns, because bootstrap divides the page into 12 columns, and you can display
something on on on each one of these columns, or you can let an item pick a specific number of columns.
For example, you can divide the page into three columns where each column is going to, where each
item is going to take four columns, a maximum of 12.
And this is going to be clear.
Once I finish here, I'm going to add images.
So the first image I'm going to say here, image, and then I'm going to give this image a class first
class called image fluid, which is going to make the image responsive.
This is a bootstrap class.
Next, I'm going to say column large.
Three.
So this is going to take to let the image take three columns out of 12, which means that for each single
row, there will be four columns.
There will be four calls because each one will take three, four medium screens.
I'm going to say column.
Medium for medium screens.
I'm going to let each column take six.
I'm going to let each image take six columns, which means that two images will be displayed third column
or better, all four for small screens.
I'm going to say 12, which means that only one image will be displayed in case the in case the screen
is small, only one image will be displayed there and the source is going to be equal to assets four
slash images and therefore slash the name of the image.
So I'm going to say here I'm going to say here brand one the g big.
And I'm going to copy this.
And then we got a piece four times one, two, three, and we have four.
So again, here, column large three means that each image will have three icons.
Each image will take three columns, and since each image will take three columns and we can only have
three, or we can only have 12 columns.
There will be four images.
There are if the screen is large, if the screen is medium six columns for each item, which means that
two images will be displayed there.
If the screen is small.
Only one image will be displayed.
Let me now save.
And show you how it's going to look like.
So here, as you can see, it's the bottom.
But the problem is that they aren't being displayed here because I didn't I didn't add the images.
Get me out of the images.
So I'm going to open up the images folder.
And when I have these images, I'm going to drag these images and drop them onto the images folder.
So we have this and this.
And this.
And.
This.
One, two, three, four.
So we have this.
So we have four images we have for the loggers.
These are the four loggers that I'm going to be displaying now.
Now the names are brand one, brand two, brand three, brand four GAAP.
So here you need to make sure that the names are brand one and then brand two and then brand three and
then brand four.
Done, JP.
And now if I refresh.
The images will be displayed like this.
It looks amazing.
As you can see, we have these brands and each brand will be displayed on I will take three columns.
So this is three, three, three, three, which means 12.
In case the screen is small, only one image will be displayed.
In case the screen is medium, two images will be displayed.
So this is the power of using bootstrap.
It makes it gives you a control over what you want to display per raw and third column.