1
00:00:04,450 --> 00:00:07,920
Hello everyone and welcome back to our bootstrapped course and this lecture.

2
00:00:07,930 --> 00:00:13,390
We're going to be showing you how to make a grade in bootstrap by making rows and columns so in bootstrap

3
00:00:13,390 --> 00:00:19,720
you can put elements into rows and then put elements inside of each row into columns as well as vice

4
00:00:19,720 --> 00:00:20,110
versa.

5
00:00:20,110 --> 00:00:26,410
So let's go ahead and show how we can make a row with columns and how we can set the width of each column.

6
00:00:26,440 --> 00:00:29,740
So first of all we're going to make a row with equal columns.

7
00:00:29,740 --> 00:00:35,080
So I'm going to open up a div with the keyword div and then I'm going to give it a class.

8
00:00:35,110 --> 00:00:38,410
And we're going to give it the bootstrap class of row.

9
00:00:38,470 --> 00:00:45,460
And that means that anything inside of this div is going to be put into a row and each element will

10
00:00:45,460 --> 00:00:47,930
be treated as a column.

11
00:00:48,040 --> 00:00:53,550
So let's put in three divs in here just like this div slice.

12
00:00:53,760 --> 00:00:56,250
Dave Dave and slash div.

13
00:00:56,410 --> 00:01:01,480
So just like that we have three elements inside of our row and each one is going to be treated like

14
00:01:01,480 --> 00:01:11,920
a column in the row and in order to set the width of each row we can either set it explicitly by setting

15
00:01:11,980 --> 00:01:20,200
the width with a bootstrap class or we can let bootstrap immediately set the with by default.

16
00:01:20,230 --> 00:01:26,260
So the default will be that it will all be spaced out in thirds but we can also set it ourselves.

17
00:01:26,260 --> 00:01:37,090
So how we would set it ourselves is to declare a class and give it the class column M.D. for and this

18
00:01:37,090 --> 00:01:44,860
means that the width of the column is going to be four out of 12 units because each row contains 12

19
00:01:44,920 --> 00:01:50,050
units and depending on the width you give to the columns.

20
00:01:50,170 --> 00:01:52,540
It will be this value divided by twelve.

21
00:01:52,570 --> 00:02:01,910
So if you put four as the column with value then it will take up a third of the row width OK.

22
00:02:01,990 --> 00:02:10,690
Similarly we can do the same for the other divs you can give it the class column M.D. for and this will

23
00:02:10,690 --> 00:02:20,440
ensure that they are all spaced out and given the the same with that is one third of the row width.

24
00:02:20,500 --> 00:02:22,270
Now we actually want to see this in action.

25
00:02:22,290 --> 00:02:28,540
So what we're going to do is apply a colour to each div and by applying a colour to each div as well

26
00:02:28,590 --> 00:02:34,760
a border we build to see each div and how it is given its width.

27
00:02:34,960 --> 00:02:40,480
Because right now this div is empty which means if we tried to see it we would not see anything.

28
00:02:40,480 --> 00:02:47,160
So let's go ahead and give it another class called a block and block class is not a bootstrap class.

29
00:02:47,170 --> 00:02:50,270
This is a class that we are going to have to style ourselves.

30
00:02:50,300 --> 00:02:57,790
You're going to give it a color and a border so we can see with the div looks like we also can put in

31
00:02:57,850 --> 00:03:05,020
some text in here to let us know what the div contains.

32
00:03:05,020 --> 00:03:12,040
So right now we know that it contains this column and before us we can just put that right in there

33
00:03:12,580 --> 00:03:17,310
and this is the text that will show up inside of the div a color will be the background of the day of

34
00:03:17,410 --> 00:03:20,960
the text will be calm empty for inside of the div.

35
00:03:21,250 --> 00:03:27,870
Let's go ahead and add some styling to our column to each of the divs in our columns.

36
00:03:27,890 --> 00:03:32,740
We're gonna go ahead and open up CSX because right now in the output we would just see this text right

37
00:03:32,740 --> 00:03:40,450
here if we ran the code would open up CSX here in Spin and just been allows you to immediately add CFS

38
00:03:40,540 --> 00:03:46,220
into your HMO without having to reference it in your header because it is all part of the same bean.

39
00:03:46,950 --> 00:03:53,490
So I'm going to open up the CFS and the CSF that I need here is going to be on my block.

40
00:03:54,010 --> 00:04:01,360
So I'm going to call Dom block to reference this block class that I created here and with my custom

41
00:04:01,370 --> 00:04:03,640
CFS I can style this that I can see it.

42
00:04:03,640 --> 00:04:10,720
So I'm going to give it a background color of dark orange was going to hide the extra mile for now so

43
00:04:10,720 --> 00:04:12,300
you can see the CFS.

44
00:04:12,760 --> 00:04:18,250
So I'm giving you a background color and I'm also going to give it an outline so outline and border

45
00:04:18,250 --> 00:04:20,180
are somewhat different.

46
00:04:20,590 --> 00:04:24,490
And I'm going to work with an outline for this specific case.

47
00:04:24,490 --> 00:04:26,630
So let's set the outline style.

48
00:04:26,680 --> 00:04:28,500
This is going to be solid.

49
00:04:28,510 --> 00:04:33,510
There are other styles I dashed and transparent et cetera.

50
00:04:33,520 --> 00:04:40,780
We can also set the outline color to explicitly black and we can also set the outline with too thick

51
00:04:40,810 --> 00:04:42,790
so we can see it clearly.

52
00:04:42,790 --> 00:04:48,820
So now we've applied all this styling to our block whereas previously it was transparent.

53
00:04:48,820 --> 00:04:50,240
Let's go ahead and test how this.

54
00:04:50,240 --> 00:04:54,540
Yes s combined with our e-mail looks like in the output.

55
00:04:54,610 --> 00:04:58,430
So I'm going to click on the output and I'm going to hide the EU mounts.

56
00:04:58,440 --> 00:05:03,780
Yes so we can see clearly and as you can see we have here the column Andy for the comedy before and

57
00:05:03,790 --> 00:05:04,710
the column empty for.

58
00:05:04,700 --> 00:05:10,970
These are the three columns that we need and they are evenly spaced because you can see they have a

59
00:05:10,970 --> 00:05:14,070
border and they're evenly spaced on the page.

60
00:05:14,090 --> 00:05:19,970
Thanks to this column before bootstrapped class now as you can see it's automatically created at the

61
00:05:19,970 --> 00:05:23,260
very top and very leftmost corner of the page.

62
00:05:23,420 --> 00:05:25,500
And then it continues to fill the whole screen.

63
00:05:25,520 --> 00:05:29,600
So we can actually adjust this a little bit by adding padding with bootstrap.

64
00:05:29,600 --> 00:05:33,740
So let's go ahead and hide this output for now and open up our ECMO.

65
00:05:33,740 --> 00:05:34,870
And here's our estimate.

66
00:05:34,880 --> 00:05:43,760
We're going to apply padding on the body so we're going to do is add the class key five and this will

67
00:05:43,760 --> 00:05:51,040
apply padding to the top bottom left and right of a value of five.

68
00:05:51,050 --> 00:05:53,420
Now this is five times 80 pixels.

69
00:05:53,450 --> 00:06:01,370
So it is not actually five pixels which is important to remember for padding you can set it to a value

70
00:06:01,760 --> 00:06:10,850
from one to 5 and it will give this padding to all four sides of whatever element that class is applied

71
00:06:10,850 --> 00:06:11,990
to.

72
00:06:11,990 --> 00:06:13,940
OK let's go ahead and test this.

73
00:06:13,970 --> 00:06:19,310
Now that we've added a bit of padding so it should automatically pop up in the output something that

74
00:06:19,310 --> 00:06:20,480
looks like this.

75
00:06:20,480 --> 00:06:24,700
If you ever have trouble testing with your spin just go to File Save snapshot.

76
00:06:24,700 --> 00:06:28,550
You want to save a snapshot of your bean often or you could lose the bin.

77
00:06:28,550 --> 00:06:32,840
You can also download the code to be extra sure and have a backup.

78
00:06:32,840 --> 00:06:39,350
And so once you've hit save snapshot then you can refresh the page and that will immediately show everything

79
00:06:39,710 --> 00:06:43,970
that is in a code translated into an output.

80
00:06:44,150 --> 00:06:52,520
So the compiler of J.S. Ben will take that to my code and read it and output or put out this rendering

81
00:06:52,640 --> 00:06:54,020
of the code.

82
00:06:54,050 --> 00:06:54,320
OK.

83
00:06:54,350 --> 00:06:58,400
So as you can see we have our comms here now with a bit of padding.

84
00:06:58,400 --> 00:07:03,710
So I'm just going to toggle the EU amount closed so we can see this output.

85
00:07:03,710 --> 00:07:05,780
Now these are three columns.

86
00:07:05,780 --> 00:07:12,740
And what they would look like on a large screen if I open up the e-mail tab again then now I'm seeing

87
00:07:12,740 --> 00:07:17,750
this on a bit of a smaller screen and I can toggle this output back and forth.

88
00:07:17,960 --> 00:07:23,270
And this is extremely useful because this would be a laptop screen but this would look like a phone

89
00:07:23,270 --> 00:07:23,920
screen.

90
00:07:24,110 --> 00:07:28,880
So you definitely want to be aware of mobile users and when designing a web site don't just design it

91
00:07:28,880 --> 00:07:35,090
for web users but also design it for mobile users because mobile users make up about 60 percent of the

92
00:07:35,090 --> 00:07:35,440
web.

93
00:07:35,480 --> 00:07:36,840
Yes that's more than half.

94
00:07:36,970 --> 00:07:37,160
OK.

95
00:07:37,160 --> 00:07:45,020
So you'll see that with the bootstrap when the columns in the row are on the large screen they're side

96
00:07:45,020 --> 00:07:46,420
by side on one row.

97
00:07:46,490 --> 00:07:52,340
But when the screen gets bigger after a certain breakpoint which means a certain screen width.

98
00:07:52,790 --> 00:08:01,910
So in this case around 700 pixels or 700 10 or around 800 actually well after a certain breakpoint the

99
00:08:01,910 --> 00:08:05,550
columns toggle themselves one on top the other.

100
00:08:05,570 --> 00:08:13,280
So they stack themselves rather toggling would mean they would hide themselves but stacking is how we

101
00:08:13,280 --> 00:08:14,560
have them now.

102
00:08:14,570 --> 00:08:21,140
So they stack themselves due to responsively which is a feature of bootstrap which automatically takes

103
00:08:21,200 --> 00:08:26,870
these columns for you and stacks them for mobile users which makes it much more easier to navigate the

104
00:08:26,890 --> 00:08:29,300
Web site on a mobile phone.

105
00:08:29,300 --> 00:08:35,360
And as you can imagine this is extremely useful for for developers because bootstrap will automatically

106
00:08:35,360 --> 00:08:41,330
make these columns and more elements responsive for you in many different ways as you'll see in this

107
00:08:41,330 --> 00:08:42,440
course.

108
00:08:42,470 --> 00:08:42,700
OK.

109
00:08:42,710 --> 00:08:44,610
Let's go ahead and hide the output for now.

110
00:08:45,050 --> 00:08:51,800
What we did so far is we made a row with some columns and we explicitly declared the columns to be of

111
00:08:51,860 --> 00:08:53,550
equal width out of twelve.

112
00:08:54,020 --> 00:09:01,280
Well we can also do is change these values and we can see what the columns would look like if we wanted

113
00:09:01,280 --> 00:09:08,870
to change the width value here so we could change this to something like to add this to something like

114
00:09:08,960 --> 00:09:14,960
7 and then this to the value that is 12 minus two minus 7.

115
00:09:14,960 --> 00:09:21,380
So 3 these numbers should add up to 12 for best performance.

116
00:09:21,380 --> 00:09:21,660
OK.

117
00:09:21,710 --> 00:09:22,010
Great.

118
00:09:22,010 --> 00:09:26,270
So I'm going to go ahead and test this again in the output and we're going to see what this looks like

119
00:09:26,570 --> 00:09:30,080
now that we have changed the column widths.

120
00:09:30,170 --> 00:09:34,720
And don't forget to save a snapshot of your bin frequently as you don't want to lose your code here

121
00:09:34,730 --> 00:09:36,220
on Jasmine.

122
00:09:36,260 --> 00:09:44,240
I want to also change these names to 2 7 and 3 This way it will be clear that we have changed the bootstrap

123
00:09:44,240 --> 00:09:45,800
class as well.

124
00:09:45,800 --> 00:09:49,730
So if we test this now in the output we'll see that on a mobile screen.

125
00:09:49,730 --> 00:09:54,300
So on a small screen like a tablet an iPad or mobile.

126
00:09:54,320 --> 00:10:00,400
The columns are stacked but on a large screen you columns now have different widths.

127
00:10:00,560 --> 00:10:02,640
And this is all due to bootstrap styling.

128
00:10:02,650 --> 00:10:10,920
You'll notice we had nothing in the CSF except for the color and the outline classes or features and

129
00:10:11,460 --> 00:10:18,000
that is because bootstrap has its own styling automatically applied to its columns and rows.

130
00:10:18,000 --> 00:10:23,490
OK I'm going to hide the CFS so as you can see this one is a width of two out of twelve one sixth of

131
00:10:23,490 --> 00:10:25,390
the entire width of the row.

132
00:10:25,410 --> 00:10:33,080
This is seven out of 12 just about just over half of the width of the entire row.

133
00:10:33,210 --> 00:10:41,630
And this is three so a quarter width of the entire row and that is all done with these with classes.

134
00:10:41,640 --> 00:10:42,120
Okay great.

135
00:10:42,120 --> 00:10:43,370
Thank you all for watching.

136
00:10:43,380 --> 00:10:48,390
That is everything that they were going to cover for containers or grids and I highly recommend that

137
00:10:48,390 --> 00:10:55,970
you go ahead and try out more of these features because bootstrap has more stylings for rows and columns.

138
00:10:56,040 --> 00:11:03,960
There are more options for how you can make columns and how you can set their responsively as well as

139
00:11:03,960 --> 00:11:09,570
you can make rows inside of columns inside of rows inside of columns etc. You can make nested columns

140
00:11:09,570 --> 00:11:10,830
in rows.

141
00:11:10,890 --> 00:11:12,510
Other than that thank you all for watching.

142
00:11:12,510 --> 00:11:18,090
You can now know how to build your own rows and columns and these are extremely useful because often

143
00:11:18,480 --> 00:11:23,700
your whole website will be set up in rows and columns like you have an image here some text here and

144
00:11:23,700 --> 00:11:29,070
then a sidebar here for example or this would be your navigation.

145
00:11:29,070 --> 00:11:34,480
This would be your main content and this would be your sidebar navigation.

146
00:11:34,710 --> 00:11:39,260
So as you can imagine rows and columns are very useful they're used very commonly.

147
00:11:39,270 --> 00:11:44,000
OK thank you all for watching and we will be continuing with bootstrap in the next lecture.

148
00:11:44,010 --> 00:11:44,640
See you there.