1
00:00:00,250 --> 00:00:03,150
This video we're going to continue styling the camp.

2
00:00:03,360 --> 00:00:08,590
We're going to add a nav bar to every single page and that nav bar will be pretty empty for now.

3
00:00:08,700 --> 00:00:14,780
But eventually it will have buttons like log in and sign out register all of that functionality.

4
00:00:15,030 --> 00:00:19,710
But until then we'll just put some placeholder text in there and then we're also going to style the

5
00:00:19,710 --> 00:00:23,510
new campground form because right now it's in pretty rough shape.

6
00:00:23,580 --> 00:00:28,860
So let's start the server up and just take a look at what we have.

7
00:00:28,890 --> 00:00:31,150
So here's our landing page.

8
00:00:31,680 --> 00:00:36,250
Here's our view all camp change the campgrounds list.

9
00:00:36,290 --> 00:00:38,180
It's looking pretty okay.

10
00:00:38,430 --> 00:00:40,490
We want a nav bar up here.

11
00:00:40,890 --> 00:00:43,370
Same thing on add new campground.

12
00:00:43,740 --> 00:00:49,290
We're going to center the form and we're going to stack these two inputs on top of one another rather

13
00:00:49,290 --> 00:00:51,050
than having them be side by side.

14
00:00:51,360 --> 00:00:56,400
But we're going to start with the nav bar and let's just work it on the campground template.

15
00:00:56,610 --> 00:01:00,990
So we'll go back here and open the campgrounds template to get started.

16
00:01:00,990 --> 00:01:08,220
I'm going to open up the bootstrapped box and I'm going to go over to components and then nav bar and

17
00:01:08,220 --> 00:01:13,440
I find myself on this section all the time because even though bootstrap makes it really easy to add

18
00:01:13,440 --> 00:01:19,890
nav bar you can still see it's quite a bit of markup and ours won't be this long definitely at least

19
00:01:19,890 --> 00:01:22,910
not to start when we don't have all the buttons in the drop downs.

20
00:01:22,950 --> 00:01:27,690
We're going to start nice and simple but even then it's still a lot of classes that we need to remember

21
00:01:27,690 --> 00:01:28,130
.

22
00:01:28,140 --> 00:01:32,700
So there's definitely no shame in pulling up the bootstrap Darcs just like anything else in this class

23
00:01:32,710 --> 00:01:35,040
you shouldn't feel ashamed about looking things up.

24
00:01:35,100 --> 00:01:40,320
But in particular bootstrap it sometimes can just be a mess of these classes and elements and there's

25
00:01:40,320 --> 00:01:42,860
no way to do it without looking at the docs.

26
00:01:42,870 --> 00:01:48,870
OK so we'll go back and I'll make some room at the top of my campgrounds template and we're going to

27
00:01:48,870 --> 00:01:55,180
start by defining a Nav. which again just like the header.

28
00:01:55,320 --> 00:01:59,450
We could just do a div but a Nav. is a little bit more meaningful.

29
00:01:59,460 --> 00:02:00,870
It's more semantic.

30
00:02:01,050 --> 00:02:09,580
So I'm going to do a nav with the class nav bar and then nav bar dash default.

31
00:02:09,600 --> 00:02:14,640
There are different types and different colors or we can have an inverted nav bar but we're just going

32
00:02:14,640 --> 00:02:16,240
to go with the default one.

33
00:02:16,410 --> 00:02:25,500
And then inside are going to add a div with class equal to container fluid and that will just make us

34
00:02:25,590 --> 00:02:33,570
nice padding and some space in there and then we're going to add in another div with class

35
00:02:36,480 --> 00:02:45,570
equal to nav bar header and then inside of the class equal that our header we're going to add an anchor

36
00:02:45,570 --> 00:02:54,090
tag with class equal to nav bar dash for an end like that.

37
00:02:54,330 --> 00:03:03,870
And then we can set the link to just be slash and then we'll close that and add in yelper camp just

38
00:03:03,870 --> 00:03:04,850
like that.

39
00:03:04,980 --> 00:03:07,750
And let's see what we get with this simple markup.

40
00:03:07,920 --> 00:03:14,430
So we have our NAV with a container inside with nav bar header and the nav bar header only has one item

41
00:03:14,820 --> 00:03:16,730
which is the neph bar brand.

42
00:03:17,010 --> 00:03:18,290
Let's refresh.

43
00:03:18,780 --> 00:03:24,060
OK so we have the nav bar and then we have our brand over here and this is a link that when we click

44
00:03:24,060 --> 00:03:27,710
it will take us back to the hideous landing page.

45
00:03:28,200 --> 00:03:34,320
OK so let's add in a few placeholders over here for log in and sign up.

46
00:03:34,320 --> 00:03:40,500
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

47
00:03:40,740 --> 00:03:40,870
.

48
00:03:40,890 --> 00:03:47,710
E.J. as template then inside the nav bar and the container but not inside the N.F. bar Hetter.

49
00:03:47,970 --> 00:03:55,950
We're going to add in another div and this div will have a class of collapse which will see what that

50
00:03:55,950 --> 00:03:56,220
does.

51
00:03:56,220 --> 00:04:01,810
And just a moment and then Neph bar Dasch collapse just like that.

52
00:04:01,890 --> 00:04:13,710
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

53
00:04:13,770 --> 00:04:20,430
nav bar dash right which will move it over to the right hand side and then inside of that we're going

54
00:04:20,430 --> 00:04:24,520
to have three links for now and each one will be an ally.

55
00:04:25,170 --> 00:04:32,820
And then inside that Ally will have an anchor tag and will give the first one log in.

56
00:04:32,850 --> 00:04:40,830
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

57
00:04:40,830 --> 00:04:42,940
do the same thing for register.

58
00:04:42,980 --> 00:04:49,540
Let's do Sign-Up and then also log out just like that.

59
00:04:49,910 --> 00:04:50,680
OK.

60
00:04:51,210 --> 00:04:52,580
So let's see what this looks like.

61
00:04:52,590 --> 00:04:59,550
Before we talk about what the collapse does if we refresh and it does not look good we missed one minor

62
00:04:59,550 --> 00:05:02,090
class back here on the UL.

63
00:05:02,290 --> 00:05:06,470
Looks like we didn't add in now so we just added nav bar.

64
00:05:06,470 --> 00:05:13,680
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

65
00:05:13,680 --> 00:05:20,430
up with all three links on the right side of the NAV and also when I change the size here.

66
00:05:20,430 --> 00:05:25,130
Notice that right here right there it collapsed.

67
00:05:25,680 --> 00:05:29,300
And eventually what we'll have is a little hamburger icon.

68
00:05:29,340 --> 00:05:32,610
It looks just like that where you click and it's menu.

69
00:05:33,050 --> 00:05:36,180
For now we just hide them when we get to that size.

70
00:05:36,450 --> 00:05:36,690
OK.

71
00:05:36,690 --> 00:05:42,240
So that's all we need to do for the nav bar except for the fact that it's only on this one page.

72
00:05:42,240 --> 00:05:45,390
So let's now add it to all of the pages.

73
00:05:45,390 --> 00:05:50,030
So let's copy it out or cut it out and we're going to move it to the header.

74
00:05:50,460 --> 00:05:52,400
So move to the head or partial.

75
00:05:52,680 --> 00:05:53,790
I'll just open that.

76
00:05:53,790 --> 00:06:00,130
Using the command line C9 views slash Parshall's slash header Ijaw Yes.

77
00:06:00,570 --> 00:06:03,840
And then just at the very top of the body we'll add that in.

78
00:06:04,320 --> 00:06:06,080
Let's indent this properly.

79
00:06:06,570 --> 00:06:09,230
OK there we go.

80
00:06:09,900 --> 00:06:15,840
And we have our nav bar on the header so that any file that we include the header partial in will now

81
00:06:15,840 --> 00:06:20,550
have the nav bar but start the server again.

82
00:06:20,850 --> 00:06:25,790
So it's still here if we add a new campground we also get that bar.

83
00:06:26,160 --> 00:06:31,270
And if we go to the home page we also have the enough bar.

84
00:06:31,530 --> 00:06:32,110
Great.

85
00:06:32,130 --> 00:06:36,950
So now let's move on to making this form look a little bit better.

86
00:06:36,990 --> 00:06:40,840
So as I mentioned earlier there are two big things I want to do to this form.

87
00:06:40,860 --> 00:06:46,470
The first one is to center it in the middle of the page and the second one is to stack the form vertically

88
00:06:46,950 --> 00:06:52,320
rather than having the three inputs or the two inputs and the button aligned horizontally across the

89
00:06:52,320 --> 00:06:53,270
screen.

90
00:06:53,370 --> 00:06:56,120
You want to take them and stacked them one on top of another.

91
00:06:56,370 --> 00:07:00,820
Let's begin by opening up the correct file which is the new dot.

92
00:07:00,960 --> 00:07:01,510
Yes.

93
00:07:01,650 --> 00:07:11,470
So we'll do C9 views slash knew that Ejay us and then here's our form that we have so far.

94
00:07:11,970 --> 00:07:18,750
Let's start easy and add in some of the bootstrap classes to the forms or to the inputs and that's form

95
00:07:19,020 --> 00:07:20,810
dash control.

96
00:07:21,150 --> 00:07:25,390
And we want that on both inputs and on the button.

97
00:07:25,500 --> 00:07:33,290
Let's add in Bootstrap class PTEN ETN large just like that.

98
00:07:33,570 --> 00:07:39,090
And we also do between the fault and let's see what that looks like.

99
00:07:39,090 --> 00:07:40,920
So node after J.

100
00:07:41,030 --> 00:07:42,830
Yes refresh.

101
00:07:43,300 --> 00:07:49,770
OK so we're getting the bootstrap controls here and the bootstrap button although it's definitely huge

102
00:07:50,100 --> 00:07:51,060
and we don't want that.

103
00:07:51,210 --> 00:07:54,840
So to fix this there's a few things we can do.

104
00:07:54,840 --> 00:07:57,900
The first is that we'll put everything inside of a container.

105
00:07:58,110 --> 00:08:01,520
So we went in div class equals container

106
00:08:04,680 --> 00:08:09,960
and I'll just move this to the bottom.

107
00:08:10,930 --> 00:08:13,690
There we go and let's indent this properly.

108
00:08:13,950 --> 00:08:16,450
Save very minor change.

109
00:08:16,530 --> 00:08:19,850
We get some spacing now but that's still a massive form.

110
00:08:20,220 --> 00:08:23,280
So the next thing that I'll do is use the grid system.

111
00:08:23,520 --> 00:08:30,710
So we'll add in another div and this one will have class equal to row just like that.

112
00:08:30,720 --> 00:08:33,750
Let's take this and copy it into the row.

113
00:08:33,780 --> 00:08:36,630
So the entire form goes into a row now.

114
00:08:36,810 --> 00:08:39,220
And that's also done this.

115
00:08:39,610 --> 00:08:44,930
OK save refresh not a big difference yet.

116
00:08:44,970 --> 00:08:51,150
And what we're going to do is use CSSA and actually write our own styles on top of bootstrap to center

117
00:08:51,150 --> 00:08:52,880
this by giving it margin.

118
00:08:52,880 --> 00:08:56,580
Auto all of this right here on the left and right side.

119
00:08:56,700 --> 00:09:01,110
And we only wanted to take up about 30 percent of this container that it's in.

120
00:09:01,110 --> 00:09:06,960
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

121
00:09:06,960 --> 00:09:10,120
on said Do not do inline styles.

122
00:09:10,230 --> 00:09:13,930
And that's definitely a good idea to not do that.

123
00:09:14,010 --> 00:09:20,010
But for now until we get to a new version where we create our own style sheets I am going to do it in

124
00:09:20,010 --> 00:09:20,500
line.

125
00:09:20,580 --> 00:09:24,130
So I'm going to make a new div that we put the form inside of.

126
00:09:24,270 --> 00:09:26,130
Just like that.

127
00:09:26,760 --> 00:09:34,760
And then I'm going to give that div style and I'm going to start by saying with is 30 percent.

128
00:09:34,980 --> 00:09:39,650
And just leave it at that and no see we get a smaller form.

129
00:09:39,660 --> 00:09:41,820
Now we want to center that.

130
00:09:41,820 --> 00:09:43,080
So we go back here.

131
00:09:43,110 --> 00:09:49,730
Say margin zero on the top and bottom and Otto on the left and right.

132
00:09:50,430 --> 00:09:52,790
Now we have the form centered.

133
00:09:52,800 --> 00:09:58,750
The next thing we'll do is make the button take up the entire width which is still pretty long.

134
00:09:58,790 --> 00:10:05,760
But what we'll do is give it DTN block which is a built in Bootstrap way of making it a block element

135
00:10:05,760 --> 00:10:05,780
.

136
00:10:05,790 --> 00:10:08,370
And it now takes up the entire line.

137
00:10:08,400 --> 00:10:13,530
Next let's give some spacing between all of these elements to do that.

138
00:10:13,710 --> 00:10:17,300
We'll use bootstraps built in form group class.

139
00:10:17,370 --> 00:10:25,250
So we need a div class ECOs form dash group and we're going to need that for each input.

140
00:10:25,470 --> 00:10:34,440
So every input goes inside one of those just like that and then I'll just duplicate this and we'll have

141
00:10:34,560 --> 00:10:41,240
another one right here and this will go inside of that.

142
00:10:41,850 --> 00:10:44,080
And then we have one more for the button.

143
00:10:44,610 --> 00:10:50,860
So we have classical form group three times and we also need the closing div tags.

144
00:10:50,850 --> 00:10:54,810
There we go oh there's one and we need the other closing div tag here.

145
00:10:55,190 --> 00:10:56,060
OK.

146
00:10:56,220 --> 00:10:59,140
So that form group just grps things together.

147
00:10:59,160 --> 00:11:01,530
But it also gives us a little bit of space.

148
00:11:01,530 --> 00:11:03,300
Now we have this button here.

149
00:11:03,390 --> 00:11:08,730
The next thing that we could focus on is centering the text and to do that although we have to do is

150
00:11:08,730 --> 00:11:11,010
give it text align center.

151
00:11:11,490 --> 00:11:13,680
And again I am going to do that in line.

152
00:11:13,680 --> 00:11:19,710
Not a good idea in the long term at least but this is a great use for it just to do something quickly

153
00:11:19,710 --> 00:11:20,020
.

154
00:11:20,160 --> 00:11:24,290
So style and we'll do text align center.

155
00:11:25,650 --> 00:11:31,470
Save now that centered in the middle.

156
00:11:31,980 --> 00:11:35,030
The next thing we should do is change the color of this button.

157
00:11:35,070 --> 00:11:37,000
The White is not looking very good.

158
00:11:37,230 --> 00:11:44,730
Let's make it primary button primary which will make it blue save refresh.

159
00:11:44,760 --> 00:11:46,430
Yes that looks a lot better.

160
00:11:46,800 --> 00:11:51,700
Let's also move this link the go back link over to the middle as well.

161
00:11:51,900 --> 00:11:56,850
So we'll just copy this and all we need to do is put it inside of this margin.

162
00:11:56,880 --> 00:12:07,200
Auto div so that this div here after the form just like that and save.

163
00:12:07,200 --> 00:12:07,810
There we go.

164
00:12:07,860 --> 00:12:14,310
We have our go back and the last thing that we should really do is add a little bit of padding or margin

165
00:12:14,970 --> 00:12:18,750
so that it's not right up against this H-1 to do that.

166
00:12:19,080 --> 00:12:22,460
We'll just go back and we already have this div that we've selected.

167
00:12:22,530 --> 00:12:28,050
So rather than margined zero we can just give it a margin of 20 pixels to start.

168
00:12:28,050 --> 00:12:29,750
Let's see how that looks.

169
00:12:30,580 --> 00:12:32,140
Ok that looks a little better.

170
00:12:32,340 --> 00:12:36,070
Let's do something more like 50.

171
00:12:36,600 --> 00:12:38,280
And that might be a little bit too much.

172
00:12:38,280 --> 00:12:40,230
Definitely your own preference.

173
00:12:40,350 --> 00:12:43,570
Let's go back and do 25.

174
00:12:44,700 --> 00:12:44,940
All right.

175
00:12:44,940 --> 00:12:46,420
That's good enough for now.

176
00:12:46,440 --> 00:12:51,990
Play with this as much as you'd like and you can make this form the inputs wider if you like them or

177
00:12:51,990 --> 00:12:57,060
narrower but you can see that it is responsive it's going to stay in the middle and shrink down a little

178
00:12:57,060 --> 00:12:58,160
bit.

179
00:12:58,170 --> 00:13:00,420
Last thing let's get rid of this trademark.

180
00:13:00,420 --> 00:13:01,920
You definitely don't need that anymore.

181
00:13:02,070 --> 00:13:06,570
In the bottom of our footer so we'll go to the footer file and I'll cheat.

182
00:13:06,620 --> 00:13:11,530
Just do this for now and we'll just get rid of that save.

183
00:13:11,700 --> 00:13:17,670
Now we have our form doesn't look too bad can go back we get a list of campsites we have enough bar

184
00:13:18,180 --> 00:13:19,800
we can add one.

185
00:13:19,920 --> 00:13:24,000
We can also go back and view the landing page which is not done yet.

186
00:13:24,210 --> 00:13:28,740
That one has probably the most work and it's going to be pretty different than the other pages it will

187
00:13:28,740 --> 00:13:31,360
look a lot nicer and have a lot more custom styles.

188
00:13:31,380 --> 00:13:33,280
So that's why I'm saving it until later.

189
00:13:33,570 --> 00:13:38,550
And then we also have our number here with our dummy buttons that don't do anything.

190
00:13:38,550 --> 00:13:38,890
All right