Welcome back in this lesson we're going to continue working on your camp.
We've already done the initial set up.
We've done some basic lay out added the header and footer Parshall's we added bootstrap and we added
the functionality of creating new campgrounds.
Now we're going to go in-style the campgrounds page using bootstrap.
So let's get started.
The very first thing I'll do is make sure my servers are running.
And just take a look at what we have now.
Definitely a little underwhelming.
So I have two main goals.
The first one is that we want a better header in title up here so this should look nicer.
We're going to use what's called a jumbotron in Bootstrap and then also the campgrounds the list of
campgrounds shouldn't just display vertically like this.
Instead we want a grid of smaller images going across and that grid should be responsive.
Let's start with the first one which is getting this title text to look a little bit nicer.
So I'm going to open up campgrounds that yes I'm just going to work in here.
So I'm going to resize this a little bit because we're going to be writing quite a bit of HD mail and
we're not going to do anything with a terminal at all.
So to work on the header we're going to use a header tag which we haven't seen before.
Functionally it works the exact same way as something like a div.
The only difference is that this has a little bit of semantic meaning to it.
Using header rather than just a arbitrary div but it doesn't really matter it's just a container.
And we're going to give it a class of jumbotron and then inside of it we're going to add in well just
copy this H-1 actually and we'll just leave it at that and save Frigo and refresh our page.
We now have what's called the Jumbotron.
It's still not great.
The next thing we should do is make everything inside of a bootstrap container.
So everything that we see here all of this I'm going to indent and I'm going to add a div with class
equals container just like that.
And then we'll stick everything inside of that and this will add some speccing for us on the sides.
Refresh.
You can see we no longer have things right up against the left side here.
We have some space and our JumboTron is looking a little bit closer and eventually will have a naff
bar appear.
So this will look a little bit nicer as well.
For now we just have the Jumbotron.
Now let's change the text itself.
So rather than this is the campgrounds page let's put a welcome message Welcome to the camp.
Feel free to put whatever content you want and I'll also add in a paragraph in the paragraph I'll add
just a little kind of tagline and I'll just say view our hand and pick campgrounds from all over the
world.
Something like that doesn't really matter.
We'll save refresh.
OK so now we have a little tag line and the last thing we want to do is take care of this link.
The add new campground link.
So I'm going to copy that and also put it inside the Jumbotron.
However I'm going to make it into a button.
One of the bootstrap buttons so to do that or to add a paragraph first and then put the anchor tag inside
of that.
And I'm doing that just for spacing.
You want this to be on it's own line and then I'm going to give the button class multiple classes of
PTEN ETN primary for the color and between dash large like that and will save.
Now we have had a new campground button.
We click on it and it takes us to the form that's completely styled.
One minor thing is that if I resize this window here.
Notice how our text goes right up against the edge of the Jumbotron which isn't great.
We have some spacing here and they want to keep that spacing what we'll need to do is just add another
container inside the Jumbotron so div class equals container and then down here inside the Jumbotron
before the end at the closing div and then just indent everything.
And now if we refresh.
She looked the same but when we shrink it down we now have some space there.
OK so that's the header part.
Now we want to work on that grid of images and I'll be up front with you.
It's definitely a little bit more work.
OK let's get started on that grid and we're going to start by creating a row so div class equals row
just like that and I'm going to start with just a little message here.
So we're going to add a div class equals and I'm going to make this just take up the entire width and
we're just going to have a message here and H-3 that says our most popular sites are campgrounds
you know won't look like much.
For now let's head back over and let's start by adding in div class row which we need everything in
our grade school in a row.
It's a div class equals row just like that.
And now we have to talk about this for each loop because what we actually want to do is instead of our
grid inside the row for each campground we want to make a div that has a column class and a column with
using the bootstrap grid.
So I'm going to do that now where I'm going to put all of this code for each loop going to indented
just like that.
And then we need our closing div tag here.
So this is for the classical row and this is for the container.
OK.
So ative class row and rather than just leaving this content as it div and here with an H for an image
we will still have an image but we're going to change this div so that it has a class of column medium
three in column small 6 and that's just to make it responsive so that we get some bigger images when
the screen size is larger.
And then when we shrink it down it will go down to just two images per row and then it will shrink even
further down to just one image per row.
So inside of that we're actually going to add in another div and this div is going to have class of
thumbnail which is a bootstrap class which will help us make a little card it will make a little grid
item inside that thumbnail will add the image to start just like that.
We have image services equal to the campground you RL And we'll just leave it at that.
And we're going to get rid of this for now and just save and let's see what we get if we are fresh.
All right.
So we have a grid of images now.
There's only three but we're getting this grid.
And I'll show you what I meant by making it responsive.
So as a shrink these Notice how it changes to two squares or two items across the screen.
Remember that there's 12 units.
So what we had first we are dividing it into four chunks where they each took out three units and then
when the grid gets smaller right here they each take up six units and even smaller it automatically
goes to one.
And we didn't have to write that because the extra small default is to use 12 units.
So we didn't have to specify that.
Now let's get the title back in this campground name and rather than just an age for one to do a nother
bootstrap class A div class equals caption just like that.
And then inside there will put an H for the campground name.
OK let's save let's see what it looks like.
There we go.
We get these nice little cards.
This is the thumbnail class making that for us.
We have our images.
And let's just see what it looks like if we have a bunch of images going in a bunch of items.
So you don't have to do this but I'm going to paste this in here.
Just give us some more data.
It will be duplicate data but that's fine.
And then we need to make sure we add the correct commas and so comma there and to come there.
Now if we refresh Oh we need to restart the server.
And each time we mess with the app.
Yes.
And now if we refresh he'll see we have a small problem.
Our grid is a little bit messed up.
And what's happening is that we have images that are of different heights.
So this Salmon Creek one is different than these.
Even though the width are the same in this case.
And that's throwing off the grid and there's an easy way to fix it although it's a little bit wonky
.
And I'll show you how we do that instead of our campground.
Yes.
On the day of class row I'm going to add in a style attribute and I'm just going to do this temporarily
.
We'll be moving this to an external stylesheet but I'm going to just do it in line to make it easier
for you to see.
So we set style to be display flex and flex wrap to be wrap.
And those are two properties that are going to help our grid out.
So if I were fresh Now we end up with the grid where it's more flexible.
It doesn't matter that we have some different heights because now the grid adapts So there's more space
between these two and there it's here.
Basically it figures out the minimum amount of space needed where we can have everything be on its own
line together where we can have everything be aligned perfectly.
And there's one other change we can make which is to go back and add in text Center which is a bootstrap
for us which will make our text centered right there.
And I think that looks a little bit better.
Also a matter of personal preference and now we're done with campground page for the time being.
Hopefully that shows you how bootstrap can really help us out can make things pretty easy especially
compared to doing this from scratch.
And let me just show you our nice responsive grid that we have.
So this is on mobile.
We get this nice layout all the way up to four images going across.
OK so I'm pretty happy with how this looks.
I'll see you in the next video