1
00:00:00,240 --> 00:00:04,170
Welcome back in this lesson we're going to continue working on your camp.

2
00:00:04,170 --> 00:00:06,070
We've already done the initial set up.

3
00:00:06,180 --> 00:00:11,430
We've done some basic lay out added the header and footer Parshall's we added bootstrap and we added

4
00:00:11,430 --> 00:00:13,990
the functionality of creating new campgrounds.

5
00:00:14,010 --> 00:00:17,550
Now we're going to go in-style the campgrounds page using bootstrap.

6
00:00:17,550 --> 00:00:18,600
So let's get started.

7
00:00:18,600 --> 00:00:21,230
The very first thing I'll do is make sure my servers are running.

8
00:00:22,000 --> 00:00:25,260
And just take a look at what we have now.

9
00:00:25,350 --> 00:00:26,740
Definitely a little underwhelming.

10
00:00:26,850 --> 00:00:28,110
So I have two main goals.

11
00:00:28,170 --> 00:00:34,150
The first one is that we want a better header in title up here so this should look nicer.

12
00:00:34,170 --> 00:00:40,050
We're going to use what's called a jumbotron in Bootstrap and then also the campgrounds the list of

13
00:00:40,050 --> 00:00:43,000
campgrounds shouldn't just display vertically like this.

14
00:00:43,020 --> 00:00:48,200
Instead we want a grid of smaller images going across and that grid should be responsive.

15
00:00:48,480 --> 00:00:52,850
Let's start with the first one which is getting this title text to look a little bit nicer.

16
00:00:53,100 --> 00:00:58,440
So I'm going to open up campgrounds that yes I'm just going to work in here.

17
00:00:58,590 --> 00:01:04,010
So I'm going to resize this a little bit because we're going to be writing quite a bit of HD mail and

18
00:01:04,020 --> 00:01:06,390
we're not going to do anything with a terminal at all.

19
00:01:06,440 --> 00:01:12,510
So to work on the header we're going to use a header tag which we haven't seen before.

20
00:01:12,510 --> 00:01:15,740
Functionally it works the exact same way as something like a div.

21
00:01:15,780 --> 00:01:20,080
The only difference is that this has a little bit of semantic meaning to it.

22
00:01:20,400 --> 00:01:25,850
Using header rather than just a arbitrary div but it doesn't really matter it's just a container.

23
00:01:26,010 --> 00:01:35,340
And we're going to give it a class of jumbotron and then inside of it we're going to add in well just

24
00:01:35,340 --> 00:01:42,540
copy this H-1 actually and we'll just leave it at that and save Frigo and refresh our page.

25
00:01:42,570 --> 00:01:44,890
We now have what's called the Jumbotron.

26
00:01:45,130 --> 00:01:46,280
It's still not great.

27
00:01:46,290 --> 00:01:50,720
The next thing we should do is make everything inside of a bootstrap container.

28
00:01:51,030 --> 00:01:57,690
So everything that we see here all of this I'm going to indent and I'm going to add a div with class

29
00:01:58,110 --> 00:02:01,260
equals container just like that.

30
00:02:01,460 --> 00:02:07,670
And then we'll stick everything inside of that and this will add some speccing for us on the sides.

31
00:02:07,830 --> 00:02:08,710
Refresh.

32
00:02:08,880 --> 00:02:13,800
You can see we no longer have things right up against the left side here.

33
00:02:13,830 --> 00:02:19,200
We have some space and our JumboTron is looking a little bit closer and eventually will have a naff

34
00:02:19,200 --> 00:02:20,330
bar appear.

35
00:02:20,520 --> 00:02:22,890
So this will look a little bit nicer as well.

36
00:02:22,890 --> 00:02:25,530
For now we just have the Jumbotron.

37
00:02:25,590 --> 00:02:27,570
Now let's change the text itself.

38
00:02:27,600 --> 00:02:34,530
So rather than this is the campgrounds page let's put a welcome message Welcome to the camp.

39
00:02:34,710 --> 00:02:40,140
Feel free to put whatever content you want and I'll also add in a paragraph in the paragraph I'll add

40
00:02:40,140 --> 00:02:55,470
just a little kind of tagline and I'll just say view our hand and pick campgrounds from all over the

41
00:02:55,800 --> 00:02:56,550
world.

42
00:02:56,670 --> 00:02:58,940
Something like that doesn't really matter.

43
00:02:58,950 --> 00:03:00,850
We'll save refresh.

44
00:03:01,170 --> 00:03:06,650
OK so now we have a little tag line and the last thing we want to do is take care of this link.

45
00:03:06,690 --> 00:03:08,280
The add new campground link.

46
00:03:08,580 --> 00:03:12,640
So I'm going to copy that and also put it inside the Jumbotron.

47
00:03:12,650 --> 00:03:15,070
However I'm going to make it into a button.

48
00:03:15,150 --> 00:03:23,190
One of the bootstrap buttons so to do that or to add a paragraph first and then put the anchor tag inside

49
00:03:23,190 --> 00:03:24,780
of that.

50
00:03:24,780 --> 00:03:26,680
And I'm doing that just for spacing.

51
00:03:26,730 --> 00:03:32,820
You want this to be on it's own line and then I'm going to give the button class multiple classes of

52
00:03:32,850 --> 00:03:43,320
PTEN ETN primary for the color and between dash large like that and will save.

53
00:03:43,330 --> 00:03:45,420
Now we have had a new campground button.

54
00:03:45,510 --> 00:03:49,930
We click on it and it takes us to the form that's completely styled.

55
00:03:50,220 --> 00:03:54,050
One minor thing is that if I resize this window here.

56
00:03:55,320 --> 00:04:01,740
Notice how our text goes right up against the edge of the Jumbotron which isn't great.

57
00:04:01,860 --> 00:04:07,380
We have some spacing here and they want to keep that spacing what we'll need to do is just add another

58
00:04:07,380 --> 00:04:19,680
container inside the Jumbotron so div class equals container and then down here inside the Jumbotron

59
00:04:19,680 --> 00:04:24,330
before the end at the closing div and then just indent everything.

60
00:04:24,420 --> 00:04:26,040
And now if we refresh.

61
00:04:26,210 --> 00:04:30,860
She looked the same but when we shrink it down we now have some space there.

62
00:04:31,230 --> 00:04:33,790
OK so that's the header part.

63
00:04:33,840 --> 00:04:37,680
Now we want to work on that grid of images and I'll be up front with you.

64
00:04:37,680 --> 00:04:39,770
It's definitely a little bit more work.

65
00:04:40,020 --> 00:04:49,200
OK let's get started on that grid and we're going to start by creating a row so div class equals row

66
00:04:49,800 --> 00:04:53,520
just like that and I'm going to start with just a little message here.

67
00:04:53,580 --> 00:05:03,210
So we're going to add a div class equals and I'm going to make this just take up the entire width and

68
00:05:03,210 --> 00:05:11,040
we're just going to have a message here and H-3 that says our most popular sites are campgrounds

69
00:05:14,270 --> 00:05:15,790
you know won't look like much.

70
00:05:15,790 --> 00:05:24,160
For now let's head back over and let's start by adding in div class row which we need everything in

71
00:05:24,160 --> 00:05:25,470
our grade school in a row.

72
00:05:25,560 --> 00:05:28,820
It's a div class equals row just like that.

73
00:05:28,970 --> 00:05:34,780
And now we have to talk about this for each loop because what we actually want to do is instead of our

74
00:05:34,780 --> 00:05:41,380
grid inside the row for each campground we want to make a div that has a column class and a column with

75
00:05:41,800 --> 00:05:43,380
using the bootstrap grid.

76
00:05:43,420 --> 00:05:50,110
So I'm going to do that now where I'm going to put all of this code for each loop going to indented

77
00:05:52,390 --> 00:05:53,580
just like that.

78
00:05:53,830 --> 00:05:57,180
And then we need our closing div tag here.

79
00:05:57,490 --> 00:06:01,500
So this is for the classical row and this is for the container.

80
00:06:02,020 --> 00:06:02,470
OK.

81
00:06:02,730 --> 00:06:09,370
So ative class row and rather than just leaving this content as it div and here with an H for an image

82
00:06:09,870 --> 00:06:17,770
we will still have an image but we're going to change this div so that it has a class of column medium

83
00:06:18,310 --> 00:06:26,740
three in column small 6 and that's just to make it responsive so that we get some bigger images when

84
00:06:26,740 --> 00:06:28,270
the screen size is larger.

85
00:06:28,300 --> 00:06:34,090
And then when we shrink it down it will go down to just two images per row and then it will shrink even

86
00:06:34,090 --> 00:06:36,400
further down to just one image per row.

87
00:06:36,610 --> 00:06:44,080
So inside of that we're actually going to add in another div and this div is going to have class of

88
00:06:44,110 --> 00:06:49,270
thumbnail which is a bootstrap class which will help us make a little card it will make a little grid

89
00:06:49,270 --> 00:06:56,560
item inside that thumbnail will add the image to start just like that.

90
00:06:56,680 --> 00:07:02,210
We have image services equal to the campground you RL And we'll just leave it at that.

91
00:07:02,230 --> 00:07:08,580
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.

92
00:07:09,280 --> 00:07:09,820
All right.

93
00:07:09,910 --> 00:07:11,850
So we have a grid of images now.

94
00:07:11,890 --> 00:07:14,860
There's only three but we're getting this grid.

95
00:07:15,220 --> 00:07:18,580
And I'll show you what I meant by making it responsive.

96
00:07:18,580 --> 00:07:25,270
So as a shrink these Notice how it changes to two squares or two items across the screen.

97
00:07:25,280 --> 00:07:26,910
Remember that there's 12 units.

98
00:07:27,040 --> 00:07:35,980
So what we had first we are dividing it into four chunks where they each took out three units and then

99
00:07:35,980 --> 00:07:43,390
when the grid gets smaller right here they each take up six units and even smaller it automatically

100
00:07:43,390 --> 00:07:44,190
goes to one.

101
00:07:44,350 --> 00:07:49,130
And we didn't have to write that because the extra small default is to use 12 units.

102
00:07:49,180 --> 00:07:52,050
So we didn't have to specify that.

103
00:07:52,090 --> 00:07:59,950
Now let's get the title back in this campground name and rather than just an age for one to do a nother

104
00:08:00,460 --> 00:08:07,550
bootstrap class A div class equals caption just like that.

105
00:08:07,780 --> 00:08:13,080
And then inside there will put an H for the campground name.

106
00:08:14,070 --> 00:08:18,670
OK let's save let's see what it looks like.

107
00:08:18,670 --> 00:08:19,270
There we go.

108
00:08:19,300 --> 00:08:21,030
We get these nice little cards.

109
00:08:21,040 --> 00:08:23,700
This is the thumbnail class making that for us.

110
00:08:23,840 --> 00:08:25,030
We have our images.

111
00:08:25,210 --> 00:08:30,480
And let's just see what it looks like if we have a bunch of images going in a bunch of items.

112
00:08:30,760 --> 00:08:34,160
So you don't have to do this but I'm going to paste this in here.

113
00:08:34,600 --> 00:08:36,860
Just give us some more data.

114
00:08:36,880 --> 00:08:38,800
It will be duplicate data but that's fine.

115
00:08:38,940 --> 00:08:46,250
And then we need to make sure we add the correct commas and so comma there and to come there.

116
00:08:46,300 --> 00:08:49,840
Now if we refresh Oh we need to restart the server.

117
00:08:50,170 --> 00:08:52,060
And each time we mess with the app.

118
00:08:52,120 --> 00:08:53,330
Yes.

119
00:08:53,590 --> 00:08:58,070
And now if we refresh he'll see we have a small problem.

120
00:08:58,120 --> 00:09:00,040
Our grid is a little bit messed up.

121
00:09:00,170 --> 00:09:03,810
And what's happening is that we have images that are of different heights.

122
00:09:04,090 --> 00:09:07,940
So this Salmon Creek one is different than these.

123
00:09:08,410 --> 00:09:10,710
Even though the width are the same in this case.

124
00:09:10,930 --> 00:09:16,150
And that's throwing off the grid and there's an easy way to fix it although it's a little bit wonky

125
00:09:16,160 --> 00:09:16,210
.

126
00:09:16,270 --> 00:09:19,130
And I'll show you how we do that instead of our campground.

127
00:09:19,270 --> 00:09:19,960
Yes.

128
00:09:20,320 --> 00:09:26,860
On the day of class row I'm going to add in a style attribute and I'm just going to do this temporarily

129
00:09:26,860 --> 00:09:26,980
.

130
00:09:27,010 --> 00:09:31,600
We'll be moving this to an external stylesheet but I'm going to just do it in line to make it easier

131
00:09:31,600 --> 00:09:32,530
for you to see.

132
00:09:32,530 --> 00:09:37,360
So we set style to be display flex and flex wrap to be wrap.

133
00:09:37,480 --> 00:09:39,900
And those are two properties that are going to help our grid out.

134
00:09:39,910 --> 00:09:44,810
So if I were fresh Now we end up with the grid where it's more flexible.

135
00:09:44,860 --> 00:09:50,980
It doesn't matter that we have some different heights because now the grid adapts So there's more space

136
00:09:50,980 --> 00:09:53,400
between these two and there it's here.

137
00:09:53,470 --> 00:09:59,500
Basically it figures out the minimum amount of space needed where we can have everything be on its own

138
00:09:59,500 --> 00:10:02,750
line together where we can have everything be aligned perfectly.

139
00:10:02,800 --> 00:10:09,460
And there's one other change we can make which is to go back and add in text Center which is a bootstrap

140
00:10:09,460 --> 00:10:13,370
for us which will make our text centered right there.

141
00:10:13,540 --> 00:10:15,410
And I think that looks a little bit better.

142
00:10:15,490 --> 00:10:20,500
Also a matter of personal preference and now we're done with campground page for the time being.

143
00:10:20,620 --> 00:10:25,630
Hopefully that shows you how bootstrap can really help us out can make things pretty easy especially

144
00:10:25,630 --> 00:10:27,550
compared to doing this from scratch.

145
00:10:27,550 --> 00:10:31,900
And let me just show you our nice responsive grid that we have.

146
00:10:31,900 --> 00:10:33,260
So this is on mobile.

147
00:10:33,310 --> 00:10:38,890
We get this nice layout all the way up to four images going across.

148
00:10:39,160 --> 00:10:41,140
OK so I'm pretty happy with how this looks.

149
00:10:41,140 --> 00:10:42,020
I'll see you in the next video