This video we're going to continue styling the camp.
We're going to add a nav bar to every single page and that nav bar will be pretty empty for now.
But eventually it will have buttons like log in and sign out register all of that functionality.
But until then we'll just put some placeholder text in there and then we're also going to style the
new campground form because right now it's in pretty rough shape.
So let's start the server up and just take a look at what we have.
So here's our landing page.
Here's our view all camp change the campgrounds list.
It's looking pretty okay.
We want a nav bar up here.
Same thing on add new campground.
We're going to center the form and we're going to stack these two inputs on top of one another rather
than having them be side by side.
But we're going to start with the nav bar and let's just work it on the campground template.
So we'll go back here and open the campgrounds template to get started.
I'm going to open up the bootstrapped box and I'm going to go over to components and then nav bar and
I find myself on this section all the time because even though bootstrap makes it really easy to add
nav bar you can still see it's quite a bit of markup and ours won't be this long definitely at least
not to start when we don't have all the buttons in the drop downs.
We're going to start nice and simple but even then it's still a lot of classes that we need to remember
.
So there's definitely no shame in pulling up the bootstrap Darcs just like anything else in this class
you shouldn't feel ashamed about looking things up.
But in particular bootstrap it sometimes can just be a mess of these classes and elements and there's
no way to do it without looking at the docs.
OK so we'll go back and I'll make some room at the top of my campgrounds template and we're going to
start by defining a Nav. which again just like the header.
We could just do a div but a Nav. is a little bit more meaningful.
It's more semantic.
So I'm going to do a nav with the class nav bar and then nav bar dash default.
There are different types and different colors or we can have an inverted nav bar but we're just going
to go with the default one.
And then inside are going to add a div with class equal to container fluid and that will just make us
nice padding and some space in there and then we're going to add in another div with class
equal to nav bar header and then inside of the class equal that our header we're going to add an anchor
tag with class equal to nav bar dash for an end like that.
And then we can set the link to just be slash and then we'll close that and add in yelper camp just
like that.
And let's see what we get with this simple markup.
So we have our NAV with a container inside with nav bar header and the nav bar header only has one item
which is the neph bar brand.
Let's refresh.
OK so we have the nav bar and then we have our brand over here and this is a link that when we click
it will take us back to the hideous landing page.
OK so let's add in a few placeholders over here for log in and sign up.
They won't work or they won't do anything but at we look good so let's do that now go over to our camp
.
E.J. as template then inside the nav bar and the container but not inside the N.F. bar Hetter.
We're going to add in another div and this div will have a class of collapse which will see what that
does.
And just a moment and then Neph bar Dasch collapse just like that.
And then inside we're going to add a UL and this UL will have a class of nav bar dash nav and then also
nav bar dash right which will move it over to the right hand side and then inside of that we're going
to have three links for now and each one will be an ally.
And then inside that Ally will have an anchor tag and will give the first one log in.
And for now the H ref will just be set to our route path because we don't have any log in yet and we'll
do the same thing for register.
Let's do Sign-Up and then also log out just like that.
OK.
So let's see what this looks like.
Before we talk about what the collapse does if we refresh and it does not look good we missed one minor
class back here on the UL.
Looks like we didn't add in now so we just added nav bar.
Now I've never got it right but we didn't add in nav itself so we'll save now will refresh and we end
up with all three links on the right side of the NAV and also when I change the size here.
Notice that right here right there it collapsed.
And eventually what we'll have is a little hamburger icon.
It looks just like that where you click and it's menu.
For now we just hide them when we get to that size.
OK.
So that's all we need to do for the nav bar except for the fact that it's only on this one page.
So let's now add it to all of the pages.
So let's copy it out or cut it out and we're going to move it to the header.
So move to the head or partial.
I'll just open that.
Using the command line C9 views slash Parshall's slash header Ijaw Yes.
And then just at the very top of the body we'll add that in.
Let's indent this properly.
OK there we go.
And we have our nav bar on the header so that any file that we include the header partial in will now
have the nav bar but start the server again.
So it's still here if we add a new campground we also get that bar.
And if we go to the home page we also have the enough bar.
Great.
So now let's move on to making this form look a little bit better.
So as I mentioned earlier there are two big things I want to do to this form.
The first one is to center it in the middle of the page and the second one is to stack the form vertically
rather than having the three inputs or the two inputs and the button aligned horizontally across the
screen.
You want to take them and stacked them one on top of another.
Let's begin by opening up the correct file which is the new dot.
Yes.
So we'll do C9 views slash knew that Ejay us and then here's our form that we have so far.
Let's start easy and add in some of the bootstrap classes to the forms or to the inputs and that's form
dash control.
And we want that on both inputs and on the button.
Let's add in Bootstrap class PTEN ETN large just like that.
And we also do between the fault and let's see what that looks like.
So node after J.
Yes refresh.
OK so we're getting the bootstrap controls here and the bootstrap button although it's definitely huge
and we don't want that.
So to fix this there's a few things we can do.
The first is that we'll put everything inside of a container.
So we went in div class equals container
and I'll just move this to the bottom.
There we go and let's indent this properly.
Save very minor change.
We get some spacing now but that's still a massive form.
So the next thing that I'll do is use the grid system.
So we'll add in another div and this one will have class equal to row just like that.
Let's take this and copy it into the row.
So the entire form goes into a row now.
And that's also done this.
OK save refresh not a big difference yet.
And what we're going to do is use CSSA and actually write our own styles on top of bootstrap to center
this by giving it margin.
Auto all of this right here on the left and right side.
And we only wanted to take up about 30 percent of this container that it's in.
So we've done that before we'll go back and I'm going to break one of the rules so they told you early
on said Do not do inline styles.
And that's definitely a good idea to not do that.
But for now until we get to a new version where we create our own style sheets I am going to do it in
line.
So I'm going to make a new div that we put the form inside of.
Just like that.
And then I'm going to give that div style and I'm going to start by saying with is 30 percent.
And just leave it at that and no see we get a smaller form.
Now we want to center that.
So we go back here.
Say margin zero on the top and bottom and Otto on the left and right.
Now we have the form centered.
The next thing we'll do is make the button take up the entire width which is still pretty long.
But what we'll do is give it DTN block which is a built in Bootstrap way of making it a block element
.
And it now takes up the entire line.
Next let's give some spacing between all of these elements to do that.
We'll use bootstraps built in form group class.
So we need a div class ECOs form dash group and we're going to need that for each input.
So every input goes inside one of those just like that and then I'll just duplicate this and we'll have
another one right here and this will go inside of that.
And then we have one more for the button.
So we have classical form group three times and we also need the closing div tags.
There we go oh there's one and we need the other closing div tag here.
OK.
So that form group just grps things together.
But it also gives us a little bit of space.
Now we have this button here.
The next thing that we could focus on is centering the text and to do that although we have to do is
give it text align center.
And again I am going to do that in line.
Not a good idea in the long term at least but this is a great use for it just to do something quickly
.
So style and we'll do text align center.
Save now that centered in the middle.
The next thing we should do is change the color of this button.
The White is not looking very good.
Let's make it primary button primary which will make it blue save refresh.
Yes that looks a lot better.
Let's also move this link the go back link over to the middle as well.
So we'll just copy this and all we need to do is put it inside of this margin.
Auto div so that this div here after the form just like that and save.
There we go.
We have our go back and the last thing that we should really do is add a little bit of padding or margin
so that it's not right up against this H-1 to do that.
We'll just go back and we already have this div that we've selected.
So rather than margined zero we can just give it a margin of 20 pixels to start.
Let's see how that looks.
Ok that looks a little better.
Let's do something more like 50.
And that might be a little bit too much.
Definitely your own preference.
Let's go back and do 25.
All right.
That's good enough for now.
Play with this as much as you'd like and you can make this form the inputs wider if you like them or
narrower but you can see that it is responsive it's going to stay in the middle and shrink down a little
bit.
Last thing let's get rid of this trademark.
You definitely don't need that anymore.
In the bottom of our footer so we'll go to the footer file and I'll cheat.
Just do this for now and we'll just get rid of that save.
Now we have our form doesn't look too bad can go back we get a list of campsites we have enough bar
we can add one.
We can also go back and view the landing page which is not done yet.
That one has probably the most work and it's going to be pretty different than the other pages it will
look a lot nicer and have a lot more custom styles.
So that's why I'm saving it until later.
And then we also have our number here with our dummy buttons that don't do anything.
All right