All right, it's time to talk about layout now, we already learned how layout works and bootstrap,
and we talked about why Bootstrap became so popular.
Now, don't worry, later on in the course, I'm going to introduce you to topics like in sixth grade
and actually talk about really easy ways to do layout on a page.
But for now, we want us to use bootstrap because that's what we learned.
And I'm warning you, this is going to seem very overwhelming.
I want to show you how Bootstrap does layout, because down the road, when I introduce you to things
like CSFs Grid, you're going to see how much easier we have it now than we had maybe a few years ago.
But I still want you to learn how layout is done and bootstrap because you will encounter it throughout
your career.
Now, if you go to the layout section on the bootstrap documentation, you see over here that it has
some pretty good information.
We can look at the grids and we've already talked about how Grid works with bootstrap.
Now, the first thing we want to do is to have a container and then maybe some rows that we can use
columns on.
So if we go back to our page and we open up the index file, the first thing I want to do around the
body and one thing I'll do with my sublime text here is actually minimize the attack here just so we
can see a little bit.
So I'm going to just click on this and look at that.
It's minimized so I can just focus on the body.
The first thing I want to do is say that I want to create a debate with a class of container.
Just like that, and then we'll close this.
Right over here, so let's indent that properly, let's save and refresh.
All right, we have everything in a container next is that we want to ideally all of these things to
be in a row.
So we want the wand, the H.R. and the bun to just be a row one row that we have that is in the center
of the page.
So I'm just going to wrap this in a div and give it a class of row.
So once again, let's close the deve.
And intend this again, if I refresh.
Not much has changed.
We may have lost the hour, we'll get back to that in a second, but we have a row now so that if I
inspect, let's say, view.
Developer tools.
And I click on this inspect, I see well, these elements, if I go over here and let's open this up,
make this a little bit smaller, we see that we have the body, we have the div, which is the container,
and then we have the row right here.
All right, let me close this.
Let's divide up these items into different sections.
We have the header element that we can use and this header element will contain the H1 over here.
So we have the header.
And one thing that we can use with bootstrap is a class called.
Text center and text center, as you might guess, if I refresh centers, the text, so that's great,
that's our header element.
And we also want to create another section here.
Let's call it section.
So this is a section element and this section element.
We'll also have the class.
Text center.
So if I refresh.
There you go.
We got our horizontal line back and hmmm, why isn't this centered?
Let's inspect this and find out.
So I can open developer tools by pressing command option I or control option I, if you're on a windows.
And let's look at the elements, we have the container.
We have the RO.
We have the header and then we have the section, hmm?
Now we see over here that these swans aren't taking up the full width, as we would want of the container.
And we've seen this before with bootstrap.
Right.
We have to use this column's to tell it, hey, we want to contain or expand along the call.
And because Bootstrap uses a 12 grid system, we can just say in here in the header, we want the column
12 grid and then for the section we want the column 12.
Great.
So if I refresh.
There you go, look at that, if I go over here, I see that we have the row, we have the header and
then we have the text, which, as you can see, contains.
The full amount of the container in the blue.
That's looking a lot better.
That's great.
Now, if I close this home, are taxed and button, it's still at the top, ideally it's in the middle
of the image, how can we fix this?
Now, this part is really, really tricky if I actually search vertical alignment here.
You'll see that Bouchareb has some vertical alignment options, but these ones are using inline light
block in line table, which is actually not the recommended way.
Now, the way we're going to do this is we're going to use Fleck's and this is a new feature with Bouchra
because they're using the flex box utilities that we've learned about.
Right.
So if I go over here, you can see that I can activate the flex box system by using the D flex class.
So if I copy this and go to the container and say deflects if I refresh.
All right, nothing happened because we've just enabled box.
But now we want to make sure that we can place things vertically in the center.
And this, if we scroll down, is what we want right here, a line items, if we look over here, it's
a line items center.
So if I copy this, which is this one over here, and we add a line items center, if I refresh.
Hmmm, this isn't working and this is a little tricky and I'm showing you this just to understand how
to debug things.
So let's say you just did this and for some reason.
Hmm, you don't understand why this isn't working on the documentation page.
Clearly, it shows us that this should be working.
Well, we can inspect, so let's right click inspect.
And have a look at our e-mail page.
We have the container and then the body, now you see here how everything is in the container.
And as a matter of fact, if we look at the container, we're actually aligning items in the center
because the container is actually not the full page.
It's only the top part.
Right.
It's just this port.
So here the container is not fully.
Covering the page.
So what we need to do, just like we have in body, if we look at style here.
You see how we have a height of 100 percent.
All we need to do is tell the container that, hey, I want to disband the entire height of the page
and in Bootstrap we can do that by saying height 100 instead of adding the next stop.
If I save this and refresh.
Look at that fly, hover, you'll see that my container is now the full length of the page and our writing
is right in the middle, if I scroll up or down, look at that.
It's adjusting properly.
Everything is centered.
Now, don't worry, if this takes you a long time to figure out, sometimes it involves Googling around,
figure things out like it said later on in the layout section of the course, I'll actually show you
how to make this so much simpler.
Now, the last thing I want to do is, well, right here.
I want to have a bit of space between the writing and the button.
So what can we do here?
I want another section in between these two to hopefully buffer them away from each other so we can
create that fairly easily, we can just add a new div and we'll give it a class year of buffer that
we'll have to write ourselves in.
This buffer class will be in between the header and then the horizontal line and the bottom.
So let's also give this a column of 12, because we want to make sure that it covers the entire area.
But right now, there's nothing if I.
Right.
Click here and inspect.
You'll see here that I have the buffer, but the buffer doesn't have anything, it's completely empty
because, well, there's nothing inside here.
But we can add a style, let's say that buffer in this buffer will have a height of what shall we say?
Well, if I do, let's say 50 pixels and I refresh.
Look at that, I get a nice little buffer, so now if I scroll over to Buffer, you see that I have
a 50 pixel height buffer, but I always like using RTM instead of pixels.
So let's do RTM.
Let's see what five RTM means.
All right.
That's good.
Maybe.
A little bit more, let's do 10 RTM.
Let's save and refresh.
All right, that looks actually quite nice if I close this tab.
Open it up, yeah, look at that now, looks really, really nice, and there we go, we have our startup
landing page right here.
Everything looks pretty nice, right?
And the way we've organized things seems pretty clean.
Our bun is well when we hover.
Available, but whenever I click on this button, nothing's happening, ideally, we have a new page
that opens up so that we can enter or our customers can enter their e-mails.
And this is the exciting part that we're going to get to in the next video.
I'll see that one by.