Welcome back.
Now what we need to do is that we need to work on the main content of the website, which is the year
between the header and the Twitter.
And what I'm going to do is I'm going to be explaining cards or containers where each where each single,
where each single container will display something.
So let me hear what I'm going to do is that I'm going to use Bootstrap.
I'm going to first create a dev.
And here in that, I'm going to first give it a class called container going teen or LG.
And I'm going to also give it a glass gold.
Made.
And between inside that, I'm going to first this play to hear.
And it say that what I'm going to do is that I'm going to display a error that they have and that there
will have a class, a bootstrap class called rock.
So what is this rock glass?
This rock glass is going to divide the beach into rows and columns, so so that for each single roar,
we can display columns, we can display cards or objects.
So the first row can contain three cards.
The second draw can contain also three.
Four.
All the way through 12 cards.
So I'm going to use this raw glass, and I'm going to also use the M D for glass, which is the margin
top glass.
And inside it, we need to display columns.
So I'm going to start by creating only one column and then we can repeat that later.
So I'm going to say you there and I'm going to give this there.
A class gold glass called column large.
Three.
And you need to know that bootstrap divides the page into 12 columns.
And if you say here three, if you say three, it means that for each single column, for each single
row there will be there will be four cards.
Because if if each single card takes three out of 12, it means that we need four.
We need four cards to fill the complete row.
So if you say here three, it's going to take, it's going to each single card is going to take three
columns out of 12.
And this LG is four large screens, so this is going to be applicable only to a large screens.
If you want this to be applicable to other screens, such as the small screen, you can see column ask
for small screens and for example, for small screens.
You might want to display only one single column or card there, meaning that for each single draw,
you will display only one single card because the screen is small.
And it's better to display only one single element for small screens, because otherwise it's it's just
not going to look amazing.
And for medium screens, you can also see a column empty or medium screens and specify the number of
columns you want for each single card.
I'm going to say also 12.
And I'm going to also use the text Senator Class, which is going to center this this text center is
going to center the text.
Finally, I'm going to use maybe three, which is a margin bottom and inside each single column, inside
each single column or card.
This is going to go and see that this is going to.
You can think of this as card because it's actually a card and you will see that later for each single
column.
I'm going to see there and I'm going to give this a class gold card.
This is going to make it look like a card.
Card.
And I'm going to give it a another glass, but this class is my class that I'm going to eat later.
So I'm going to give it a glass cold beer.
Let's say.
A single card, single.
Car.
And I'm going to hear inside that car, I'm going to display an image, I'm going to say, I imagine.
And this I you should have a source, and for now, it's going to be empty.
And also, I'm going to give it a a glass.
I'm going to say glass is equal to cards single card.
I am below the image.
I'm going to display the body.
So for the body, I'm going to say there.
Class.
Guard body.
And this is a bootstrap lesson that's going to display the content of the card.
So for the content of the card, we need to display every title and text, so I'm going to see them
and then class.
Card title.
This is going to be just the dial here, you can display the title, and the title obviously is bigger
than the text.
So for the text, I'm going to say there glass.
Guard text.
This is for the next.
And we are good to go.
And you can add comments if you want to, but I think this is great.
So this be careful.
You need to be very careful with the closing tax base, closing targets for the Iraq, and this closing
tag is for the for the container.
Let me now click on file and then say, and then let me let me first make sure that the server is up
and running.
As you can see, the server is up and running.
If it's not, you need to open up a new terminal and then you need to type B minus capital s and then
local post.
And then the port eight thousand preferably eight thousand, have been hit.
Enter and in the browser if I refresh now, as you can see, I have this card.
And if I add more cards, they will be displayed next to this so that they will fill out the complete
URL.
And if there is no more space, new cards will be displayed in the second row and then the third, the
fourth, etc..