1
00:00:00,390 --> 00:00:06,210
Welcome back in this unit I'm going to show you a few other components including jumbotron and bootstrap

2
00:00:06,210 --> 00:00:07,420
forms and inputs.

3
00:00:07,530 --> 00:00:12,120
But before I do that I want to take a moment to address something that's really really important when

4
00:00:12,120 --> 00:00:14,520
we're learning new tools like this like bootstrap.

5
00:00:14,760 --> 00:00:19,620
And in my experience of teaching people to become web developers I've noticed a bootstrap is one of

6
00:00:19,620 --> 00:00:25,230
the first places where some of the students start to feel uneasy uncomfortable and they feel like they

7
00:00:25,230 --> 00:00:29,820
don't know if they're doing and then because we're suddenly including a bunch of code someone else wrote

8
00:00:29,820 --> 00:00:31,200
into our application.

9
00:00:31,200 --> 00:00:36,810
But if you take a look at the docs here they're really long they're comprehensive which is great but

10
00:00:36,810 --> 00:00:42,810
there's a lot here and I want you to frame this not as a manual that you have to read in order to understand

11
00:00:42,810 --> 00:00:43,550
everything.

12
00:00:43,560 --> 00:00:47,980
This is not like a how to guide that you have to finish before we use bootstrap.

13
00:00:48,300 --> 00:00:53,790
It's a reference where if you decide you need a form you look at the form section if you need a table

14
00:00:53,790 --> 00:00:53,820
.

15
00:00:53,850 --> 00:00:56,780
You'll hit the table section if you need a nav bar.

16
00:00:56,850 --> 00:01:01,920
You look at the NFR section but it's important that you treat the docs like that you will be using them

17
00:01:02,100 --> 00:01:08,310
non-stop coming back to here referencing individual bits of code copying their code segments checking

18
00:01:08,310 --> 00:01:12,810
out some demonstrations reading examples I've been using bootstrapped for years at this point.

19
00:01:12,930 --> 00:01:14,630
And I feel pretty good about most of it.

20
00:01:14,760 --> 00:01:18,220
But I leave the docs open when I'm working on anything with bootstrap.

21
00:01:18,330 --> 00:01:24,450
I'm constantly referencing the examples in one of the really early videos in this course I talked about

22
00:01:24,450 --> 00:01:26,900
how to become a web developer.

23
00:01:27,060 --> 00:01:32,490
You're not becoming an expert in memorization and in knowing every bit of information.

24
00:01:32,730 --> 00:01:33,960
Yes you need to know things.

25
00:01:33,960 --> 00:01:38,700
Yes you have to understand and memorize some things but you're not becoming an expert or memorization

26
00:01:38,700 --> 00:01:39,210
.

27
00:01:39,210 --> 00:01:41,990
You're becoming an expert in accessing information.

28
00:01:42,120 --> 00:01:48,180
And some of that information you'll have memorized and a lot of it is going to be online in documentation

29
00:01:48,450 --> 00:01:52,410
or examples videos books all sorts of resources.

30
00:01:52,410 --> 00:01:54,350
All right so to sum up the entire pep talk.

31
00:01:54,450 --> 00:01:58,890
Basically I just want you to keep in mind that yes there's a lot to bootstrap and you're going to see

32
00:01:58,920 --> 00:02:01,430
20 30 percent of it and there's a lot more out there.

33
00:02:01,440 --> 00:02:03,210
But don't be intimidated by that.

34
00:02:03,240 --> 00:02:07,110
You should feel comfortable accessing the docs if you need to do something that I don't show you how

35
00:02:07,110 --> 00:02:07,800
to do.

36
00:02:07,860 --> 00:02:09,480
Open up the docs and look for it.

37
00:02:09,600 --> 00:02:13,760
And there's always great examples and explanations on get bootstrapped dotcom.

38
00:02:14,120 --> 00:02:19,130
OK so without further ado let's move on to talking about some of these important components and I'm

39
00:02:19,140 --> 00:02:22,110
going to start by showing you Jumbotron.

40
00:02:22,500 --> 00:02:28,170
So a Jumbotron according to the official docs is a lightweight flexible component that can optionally

41
00:02:28,170 --> 00:02:31,680
extend the entire viewport to showcase key content on your site.

42
00:02:31,680 --> 00:02:37,670
You can see an example of one right here and if we want to use a Jumbotron it's really really easy.

43
00:02:37,680 --> 00:02:43,680
All we need to do is write div class jumbotron and then whatever we put inside of that will be part

44
00:02:43,680 --> 00:02:44,750
of the Jumbotron.

45
00:02:44,970 --> 00:02:46,680
So let's try that.

46
00:02:47,190 --> 00:02:58,940
Just do it below are buttons will have a div with class Jumbotron jumbo tron and then inside if there

47
00:02:59,370 --> 00:03:09,630
let's do an H1 or H-1 will say this is a jumbotron and then add a button in there just like they have

48
00:03:09,630 --> 00:03:17,300
here and we'll add a paragraph as well in our paragraph will just be jibberish.

49
00:03:17,790 --> 00:03:19,420
Good enough for now.

50
00:03:20,310 --> 00:03:21,060
And a button

51
00:03:24,330 --> 00:03:28,460
and our button will just say hi there.

52
00:03:28,800 --> 00:03:29,250
OK.

53
00:03:29,250 --> 00:03:31,830
And then a button we have a few choices.

54
00:03:31,980 --> 00:03:39,680
We'll do a button success and I'll make it large and save.

55
00:03:39,940 --> 00:03:41,620
Let's take a look at what we get.

56
00:03:41,790 --> 00:03:47,400
And there's a Jumbotron you can see that it takes up the entire width of our browser window and that's

57
00:03:47,400 --> 00:03:48,740
not usually what we want.

58
00:03:49,050 --> 00:03:54,840
And what's happening is that the JumboTron is set up to take up 100 percent of whatever container it's

59
00:03:54,840 --> 00:03:55,510
inside of.

60
00:03:55,640 --> 00:03:57,740
In this case it's not outside of anything.

61
00:03:57,900 --> 00:04:02,550
But shortly I'll be showing you the grid system and bootstrap where we can control exactly how much

62
00:04:02,550 --> 00:04:07,620
you want this to take up of the screen if you want it to be centered and take up a third of the screen

63
00:04:07,620 --> 00:04:07,640
.

64
00:04:07,650 --> 00:04:12,180
Two thirds of the screen a quarter of the screen we have all these different choices we can make by

65
00:04:12,180 --> 00:04:14,150
using bootstraps grid system.

66
00:04:14,310 --> 00:04:21,480
For now I'm going to show you another element we cannot in which is a div with class equal to container

67
00:04:23,600 --> 00:04:25,140
and what container will do.

68
00:04:25,140 --> 00:04:31,800
If we just put stuff inside of div class container it gives it some spacing some padding around it and

69
00:04:31,800 --> 00:04:32,950
it centers things.

70
00:04:33,360 --> 00:04:35,130
So the container find inspect it

71
00:04:38,550 --> 00:04:46,750
takes up all this space here you can see but it has quite a bit of margin on it.

72
00:04:46,750 --> 00:04:50,860
So if we just want a quick improvement without having to use the grid system which we haven't talked

73
00:04:50,860 --> 00:04:55,990
about we can add div class container and now we get this nice looking Jumbotron.

74
00:04:55,990 --> 00:05:01,720
And if we move this code that we already have down into the containers well but we won't put it inside

75
00:05:01,720 --> 00:05:03,230
the Jumbotron.

76
00:05:03,310 --> 00:05:07,890
You'll see that it still is affected by that container.

77
00:05:08,020 --> 00:05:15,640
So outside the Jumbotron but inside the container save and refresh you can see it's also inside that

78
00:05:15,640 --> 00:05:18,120
container and it reflects that visually.

79
00:05:18,400 --> 00:05:22,320
OK let's head back to components and the next thing that I'll show you.

80
00:05:22,330 --> 00:05:23,950
We go to the top.

81
00:05:24,280 --> 00:05:28,760
We have to go over to see assess and I'll show you the forms and how those work.

82
00:05:28,990 --> 00:05:33,030
So click on forms and there's quite a few different types and different examples.

83
00:05:33,070 --> 00:05:35,710
And I'll just scroll through them first before we type anything.

84
00:05:35,980 --> 00:05:39,910
So here's a basic example of a bootstrap form.

85
00:05:39,910 --> 00:05:42,540
You can see the market that creates it.

86
00:05:42,760 --> 00:05:49,930
Then we have what's known as an inline form and we have another type of inline form and yet another

87
00:05:49,930 --> 00:05:55,320
one with different types of inputs and another type of form.

88
00:05:55,480 --> 00:05:59,140
And now this talks about all the different type of form controls the different types of inputs that

89
00:05:59,140 --> 00:06:00,420
are supported.

90
00:06:00,430 --> 00:06:03,280
So all of these color you are.

91
00:06:03,310 --> 00:06:13,450
Email number week time and so on text areas different checkboxes disabled checkboxes disabled radio

92
00:06:13,450 --> 00:06:24,940
buttons inline checkboxes inline radio buttons dropdown menus selects keep going down.

93
00:06:24,970 --> 00:06:26,780
We have other forum States.

94
00:06:26,780 --> 00:06:28,370
We have a focus state.

95
00:06:28,470 --> 00:06:30,910
You can see this highlighting around that blue.

96
00:06:31,060 --> 00:06:34,420
That's the default bootstrap focus styling.

97
00:06:34,420 --> 00:06:43,750
We can also disable inputs by adding in disabled and we've also got a few other things we can do but

98
00:06:43,780 --> 00:06:49,780
I'm going to go back up and really focus on the basic exampled start and I'll start by just copying

99
00:06:50,200 --> 00:06:54,610
this entire form over and then we'll dissect it bit by bit.

100
00:06:54,610 --> 00:06:59,200
So let's go back here and we'll just add this form after everything else.

101
00:06:59,200 --> 00:07:01,420
But I will do it inside the container.

102
00:07:01,420 --> 00:07:03,290
Let me make this full screen for a moment.

103
00:07:03,340 --> 00:07:08,580
We have our form and inside that form we've got quite a bit of content.

104
00:07:08,590 --> 00:07:11,900
Let's go back to the browser and take a look at what it looks like.

105
00:07:12,460 --> 00:07:17,170
And the first thing you'll probably notice is that our form goes all the way across this container.

106
00:07:17,230 --> 00:07:21,060
It takes up 100 percent of that with and that's something we'll be able to control.

107
00:07:21,100 --> 00:07:27,360
Once we talk about the bootstrap grid system and will easily be able to say this should go 50 percent

108
00:07:27,380 --> 00:07:28,470
the way across.

109
00:07:28,480 --> 00:07:32,920
So that's something we'll be able to easily change once we talk about the bootstrap grid system or we're

110
00:07:32,920 --> 00:07:34,090
not there just yet.

111
00:07:34,120 --> 00:07:35,510
So we're just going to go with it.

112
00:07:35,530 --> 00:07:37,080
It takes up 100 percent for now.

113
00:07:37,120 --> 00:07:39,670
It's a gigantic weird looking forum but that's fine.

114
00:07:39,820 --> 00:07:41,320
We love it how it is.

115
00:07:41,470 --> 00:07:45,290
So we'll go back to sublime and let's dissect this one piece at a time.

116
00:07:45,550 --> 00:07:48,730
So we have a forum tag inside of that forum tag.

117
00:07:48,910 --> 00:07:54,880
There is a div class form group and if you want to know more about what that does if you go back to

118
00:07:54,880 --> 00:08:01,840
the bootstrap docs and do a search for form group and you can see the rap labels and controls in form

119
00:08:01,840 --> 00:08:04,010
group for optimum spacing.

120
00:08:04,300 --> 00:08:11,140
So if we get rid of that form group class around this first one and we'll do it around the first and

121
00:08:11,140 --> 00:08:13,800
second one you'll see what we end up with.

122
00:08:13,870 --> 00:08:21,520
I'll save and refresh you see how the spacing changes here between those inputs.

123
00:08:22,150 --> 00:08:27,040
So we can go back and add that form group and this is really how you use it where you have an input

124
00:08:27,250 --> 00:08:30,640
and the label and you want them to be grouped together is formed.

125
00:08:30,940 --> 00:08:35,320
So pay attention right here just a little bit of space is added right there.

126
00:08:35,320 --> 00:08:40,330
It just adds a little bit of space right here which effectively groups these two together visually and

127
00:08:40,330 --> 00:08:43,660
then Grip's these together visually as well as these down here.

128
00:08:43,660 --> 00:08:45,390
So that's form group.

129
00:08:46,000 --> 00:08:47,860
And then the labels are just normal.

130
00:08:47,860 --> 00:08:54,610
We don't have to add anything fancy to label no Boucek class but the input there is a class form control

131
00:08:54,630 --> 00:08:54,960
.

132
00:08:55,300 --> 00:08:57,470
So let's see what happens when I get rid of it.

133
00:08:57,700 --> 00:09:03,670
So I'll just do it on the first and put the email input and go back and refresh.

134
00:09:03,670 --> 00:09:08,590
Notice that this completely changes back to a normal default browser input.

135
00:09:08,590 --> 00:09:10,050
So you don't get the rounded corners.

136
00:09:10,060 --> 00:09:12,800
We don't get the same padding and spacing of things.

137
00:09:13,000 --> 00:09:18,010
And we also don't get the same focus effect when I click we do get a blue outline but it's different

138
00:09:18,010 --> 00:09:19,010
than this one.

139
00:09:19,180 --> 00:09:23,860
The bootstrap outline is a little more subtle and those are just the immediately obvious visual changes

140
00:09:23,860 --> 00:09:28,750
between the two but there's actually some more important differences that you'll see once we get working

141
00:09:28,750 --> 00:09:33,430
with the grid system and the way that they behave and interact with other elements.

142
00:09:33,620 --> 00:09:36,170
Will go back and add form control again.

143
00:09:36,400 --> 00:09:45,880
So really if we wanted to distill this everything here boils down to form group and form control.

144
00:09:46,150 --> 00:09:49,840
Those two classes are really responsible for making things look good.

145
00:09:49,840 --> 00:09:55,680
Now there is this paragraph class help block and we can take a look at what we get from that.

146
00:09:55,690 --> 00:10:01,910
It's this text down here which just gives a little hint a pointer about part of your form and that stuff

147
00:10:01,910 --> 00:10:07,680
with the class help block and then we have our button down here which is just a regular Pucelle button

148
00:10:08,120 --> 00:10:13,570
or we have between a and b tend to fall and we could make it larger or smaller extra small change the

149
00:10:13,570 --> 00:10:16,080
color just like any other button.

150
00:10:16,090 --> 00:10:21,910
So already you can see how this is a little bit like Legos where we have a button Lego that we can add

151
00:10:21,910 --> 00:10:23,270
into a jumbotron.

152
00:10:23,320 --> 00:10:27,360
We can also just added on its own or we can add it instead of a form.

153
00:10:27,430 --> 00:10:31,840
It's just a little plug and play component that we can add in to different parts of our application

154
00:10:31,840 --> 00:10:32,470
.

155
00:10:32,500 --> 00:10:36,990
So let's go back and take a look at one other type of form which is the inline form.

156
00:10:37,450 --> 00:10:39,120
So this looks slightly different.

157
00:10:39,340 --> 00:10:44,800
If we just copy this code over and we take a look with the differences so I'll leave that first form

158
00:10:46,020 --> 00:10:53,860
and let's add a comment down here in line form and let's indent things properly.

159
00:10:54,880 --> 00:10:56,200
Looks good.

160
00:10:56,200 --> 00:10:58,360
Notice that everything is identical.

161
00:10:58,360 --> 00:11:04,290
We still have a form control on the inputs we have form group but there's one big difference.

162
00:11:04,360 --> 00:11:09,070
Everything is inside of a form with class form in line so that one line.

163
00:11:09,490 --> 00:11:11,550
Let's just show you what it looks like to start.

164
00:11:11,640 --> 00:11:15,450
I go back gives us this nice in line form here.

165
00:11:15,850 --> 00:11:24,870
And as soon as I get rid of that and save it now goes back to a regular form like we have here.

166
00:11:25,210 --> 00:11:29,330
So just one class contains all the styles that will control that.

167
00:11:29,470 --> 00:11:31,340
So we'll keep it as Form in line.

168
00:11:31,540 --> 00:11:34,270
And again the spacing is not ideal right now.

169
00:11:34,270 --> 00:11:37,130
That will be fixed when we talk about the grid system.

170
00:11:37,150 --> 00:11:40,090
There's plenty more we could talk about around bootstrap forms.

171
00:11:40,090 --> 00:11:46,060
We could probably do 30 45 minute lecture on just building complex forms bootstrap learning the ins

172
00:11:46,060 --> 00:11:51,640
and outs of all of these different pieces and different things that we can do validations custom sizing

173
00:11:51,970 --> 00:11:53,750
all sorts of different styles we can work with.

174
00:11:53,830 --> 00:11:55,120
But I'm not going to do that.

175
00:11:55,210 --> 00:11:56,880
We've covered the important basics.

176
00:11:56,940 --> 00:12:01,540
There's two types of forms are kind of the bread and butter of Boucek forms where we have the basic

177
00:12:01,600 --> 00:12:07,150
regular form and then an inline form and there will be a few other features in different aspects of

178
00:12:07,150 --> 00:12:09,730
bootstrap that we do use around the forms.

179
00:12:09,910 --> 00:12:14,680
But rather than spend time right now and bog you down on all the ins and outs and the small details

180
00:12:14,680 --> 00:12:19,540
of PRICHEP forms I'll just throw in those little pieces when we need them when we're actually using

181
00:12:19,540 --> 00:12:20,310
bootstrap.

182
00:12:20,530 --> 00:12:27,280
So the two takeaways here about forms would be two classes that are really important form control and

183
00:12:27,280 --> 00:12:33,480
form group form control makes the inputs bootstrap refined form group just add some nice spacing.

184
00:12:33,550 --> 00:12:40,660
So whatever you put in said a form group gets some nice spacing and then single class form dash in line

185
00:12:40,660 --> 00:12:40,910
.

186
00:12:40,960 --> 00:12:44,160
If you wrap a form in that the entire form goes in line.

187
00:12:44,520 --> 00:12:46,570
And then we also talked about Jumbotron.

188
00:12:46,900 --> 00:12:50,020
Very simple class equals Jumbotron.

189
00:12:50,110 --> 00:12:51,650
So you can see a peer.

190
00:12:51,970 --> 00:12:54,230
And then we put everything inside of a container.

191
00:12:54,460 --> 00:12:59,140
And if we get rid of that container to show you what happens.

192
00:12:59,880 --> 00:13:04,950
Refresh all that spacing that nice margin goes away.

193
00:13:05,200 --> 00:13:11,500
So containers nice way just to get a quick bit of spacing on your app make things look relatively nice

194
00:13:11,520 --> 00:13:11,820
.

195
00:13:12,140 --> 00:13:17,620
OK so before I end this video I'll spend 10 seconds showing you a site that we're going to build an

196
00:13:17,620 --> 00:13:23,680
application that has a full back end database connected using node and express and Mongo and mongoose

197
00:13:23,680 --> 00:13:28,780
and a bunch of technologies and we use bootstrap to prototype the interface to make it look relatively

198
00:13:28,780 --> 00:13:33,160
good pretty quickly and you can see we have a Jumbotron right here.

199
00:13:33,160 --> 00:13:37,820
We're using some of the buttons we're using the grid system that I'll explain later.

200
00:13:37,960 --> 00:13:40,950
And then if I go to log in can see we have a form.

201
00:13:41,260 --> 00:13:46,360
So these are form controls that I've styled using the grid system so that it doesn't take up the entire

202
00:13:46,360 --> 00:13:47,610
width of the screen.

203
00:13:47,680 --> 00:13:50,070
Rather it only takes up this little middle section.

204
00:13:50,170 --> 00:13:52,700
So we'll see that once we talk about the grid system.

205
00:13:52,950 --> 00:13:57,490
But I just want to show you that this is a real application and it's something we'll use bootstrap on

206
00:13:57,610 --> 00:14:00,460
to help us prototype and get things looking decent pretty quickly