1
00:00:04,010 --> 00:00:06,980
Hello everyone and welcome back to on a bootstrap course.

2
00:00:06,980 --> 00:00:12,270
In this lecture we're going to be learning how to apply different display values to our elements in

3
00:00:12,270 --> 00:00:13,070
the previous lecture.

4
00:00:13,070 --> 00:00:14,610
We learn how to build rows and columns.

5
00:00:14,630 --> 00:00:20,870
But we can go ahead and delete all this code here and just leave our template for our next example here.

6
00:00:20,870 --> 00:00:25,790
So what we're going to be doing is building an element and showing different display properties without

7
00:00:25,790 --> 00:00:26,360
bootstrap.

8
00:00:26,360 --> 00:00:31,520
You can apply display properties via CSA us here.

9
00:00:31,550 --> 00:00:39,650
However for our concerns we don't want to use display properties with CFS because bootstrap allows you

10
00:00:39,650 --> 00:00:41,150
to do it much faster.

11
00:00:41,150 --> 00:00:48,950
So typically you do something like have the class and then you would apply display something like display

12
00:00:48,950 --> 00:00:52,310
none or display block et cetera.

13
00:00:52,310 --> 00:00:57,890
And we're going to looking at all the different variations and this would affect the alignment and positioning

14
00:00:58,010 --> 00:01:03,890
of the elements on the page and how they respond to changes in screen size.

15
00:01:03,890 --> 00:01:07,850
Now we don't want to do it this way because bootstrap provides a shortcut so that you don't have to

16
00:01:07,850 --> 00:01:09,470
use this old style.

17
00:01:09,920 --> 00:01:14,630
Okay let's go ahead and toggle closed the CFS and let's build some elements.

18
00:01:14,660 --> 00:01:19,250
So we're going to first start with a span element span is an empty container.

19
00:01:19,250 --> 00:01:29,370
It is different from div because span is not a div container it is more generic and general.

20
00:01:29,570 --> 00:01:30,110
Okay great.

21
00:01:30,130 --> 00:01:31,790
But you can still apply styling to it.

22
00:01:31,790 --> 00:01:37,820
So we're going to add a class and we're going to begin with D.

23
00:01:38,150 --> 00:01:41,990
Now let's go out and close that span tag off while we're at it.

24
00:01:41,990 --> 00:01:46,130
So right now you've just made an empty object and we've applied this bootstrap class to it which is

25
00:01:46,140 --> 00:01:47,360
indeed none.

26
00:01:47,600 --> 00:01:54,350
Every type of display property that you want to add with bootstrap will be done with the keyword or

27
00:01:54,350 --> 00:02:01,760
the key letter D followed by a hyphen and followed by the key word for the value of the display.

28
00:02:01,760 --> 00:02:08,580
So as mentioned there is display none display block and many more that are going to look at shortly.

29
00:02:08,660 --> 00:02:12,980
So Dean that means that the display has none.

30
00:02:12,980 --> 00:02:16,130
Which means that it won't be shown.

31
00:02:16,130 --> 00:02:22,880
Or rather it will be shown but it will not be aligned either inline which means with other elements

32
00:02:23,540 --> 00:02:29,340
nor aligned as a block which means it is aligned on its own line.

33
00:02:29,510 --> 00:02:32,180
The best way to understand this is to test out how it looks.

34
00:02:32,180 --> 00:02:39,740
So in order to test out how this looks all we want to do is add to this span some color so in order

35
00:02:39,740 --> 00:02:47,060
to do that we can set the background immediately with this bootstrap class known as BMG primary which

36
00:02:47,360 --> 00:02:54,350
stands for background primary and this is an alternative to using the CSF styling as we had here in

37
00:02:54,350 --> 00:02:55,440
our CFS.

38
00:02:55,700 --> 00:03:01,340
We set the background color ourselves as well as the outline where we can actually delete all this because

39
00:03:01,850 --> 00:03:09,320
with bootstrap styling we can just assign the bootstrap class a BJP primary and that will give a blue

40
00:03:09,320 --> 00:03:14,290
color to the background automatically because we're changing the background color.

41
00:03:14,300 --> 00:03:19,820
We also want to set the text color which is going to be text white because the background is going to

42
00:03:19,820 --> 00:03:22,420
be blue so white will be easiest to read.

43
00:03:23,210 --> 00:03:31,670
And then in here we can also put some text D none so that we know how this will appear and what this

44
00:03:31,670 --> 00:03:33,060
element is referring to.

45
00:03:33,230 --> 00:03:36,290
Otherwise it would just be a blue box.

46
00:03:36,290 --> 00:03:43,070
Let's go ahead and make a similar span for a second element.

47
00:03:43,100 --> 00:03:45,870
So we're going to open up a span I'm gonna give it the class D.

48
00:03:46,120 --> 00:03:46,610
None.

49
00:03:46,620 --> 00:03:48,410
And the background.

50
00:03:48,410 --> 00:03:51,230
Dark as well as text white.

51
00:03:51,510 --> 00:03:56,600
And let's go out and close that span and we're making to because if you just made one then you would

52
00:03:56,600 --> 00:04:05,300
not be able to see the alignment differences between D none and other display properties property values.

53
00:04:05,300 --> 00:04:08,000
Display is the property and none is the property value.

54
00:04:08,620 --> 00:04:16,670
And so we have to see to see how this will affect this display none will affect two elements whether

55
00:04:16,670 --> 00:04:20,240
it would put them side by side or on top of each other et cetera.

56
00:04:20,330 --> 00:04:23,540
So let's go ahead and test how this looks in the output.

57
00:04:23,540 --> 00:04:28,760
So if I click on the output you'll notice that nothing will appear in the output because display none

58
00:04:28,790 --> 00:04:31,740
will hide the element here.

59
00:04:31,760 --> 00:04:31,980
Okay.

60
00:04:32,000 --> 00:04:40,730
Let's go ahead and show some more by making more of our span elements here with different display properties.

61
00:04:40,730 --> 00:04:43,330
So we want to copy these two.

62
00:04:43,400 --> 00:04:44,530
I'm going to piece them below.

63
00:04:44,540 --> 00:04:50,120
And the only thing I'm going to change in the two new ones is the text inside of the span as well as

64
00:04:50,120 --> 00:04:51,860
the display of the span.

65
00:04:51,860 --> 00:05:00,500
So I'm going to do block as our next example block will mean that these two will be each on their own

66
00:05:00,530 --> 00:05:00,910
row.

67
00:05:00,980 --> 00:05:04,530
Let's go ahead and see how that look but first I'm going to also change this text here.

68
00:05:04,570 --> 00:05:07,530
That way we know which span is for white.

69
00:05:07,630 --> 00:05:13,810
And as you can see here in the output we now have two boxes that's a D Block and they are stacked on

70
00:05:13,810 --> 00:05:16,390
top of one another no matter the screen size.

71
00:05:16,390 --> 00:05:23,890
And that is because the block property value of display will display the current element on its own

72
00:05:24,010 --> 00:05:26,860
row as if it was its own new paragraph.

73
00:05:27,430 --> 00:05:34,660
OK so you'll notice that the text is a bit close to the edge we can fix that by adding a another class

74
00:05:35,110 --> 00:05:37,650
called P2 which will add padding.

75
00:05:37,780 --> 00:05:44,190
And as you'll notice pattern goes from the border of the element to the inside.

76
00:05:44,290 --> 00:05:49,600
Which means that added padding between the border and all the content inside which in all cases some

77
00:05:49,600 --> 00:05:54,220
text margin would mean the opposite it would be from the border to the outside.

78
00:05:54,730 --> 00:05:58,510
Okay let's go ahead and that for the second block as well.

79
00:05:58,510 --> 00:06:03,160
And here we have an example of what a d block looks like and you'll notice they're automatically colored

80
00:06:03,160 --> 00:06:07,300
with this BD primary and b g dark bootstrap classes.

81
00:06:07,300 --> 00:06:07,520
OK.

82
00:06:07,540 --> 00:06:09,730
Let's go ahead and add some more.

83
00:06:09,800 --> 00:06:16,750
Stan classes and how we're going to do that is going to hide the output and I'm going to copy over these

84
00:06:17,410 --> 00:06:22,480
two spans and paste them again and this time we're going to change the class again so that we can see

85
00:06:22,480 --> 00:06:24,250
different display properties.

86
00:06:24,250 --> 00:06:25,900
Why do you need to know different display properties.

87
00:06:25,900 --> 00:06:31,090
Well because for responsively you need to know how your elements will be aligned.

88
00:06:31,090 --> 00:06:34,870
For example if they're in line that means they'll be side by side.

89
00:06:34,900 --> 00:06:37,300
But if they're blocking means we'll be on top of each other.

90
00:06:37,360 --> 00:06:42,280
And this well you said how your page looks because you can set items to be beside each other on top

91
00:06:42,280 --> 00:06:45,760
of each other in a table et cetera.

92
00:06:45,790 --> 00:06:51,940
So the next one we're going to looking at is commonly use and it's called in line and in line is just

93
00:06:51,940 --> 00:06:59,080
as the name goes it means that the element will be in the same line as its next element is also in line.

94
00:06:59,140 --> 00:07:04,420
If the next moment is a block then the block one would be on its own and you can play around this and

95
00:07:04,420 --> 00:07:06,940
try different combinations for your site.

96
00:07:06,940 --> 00:07:09,140
Let's go ahead and look at how these would look.

97
00:07:09,140 --> 00:07:15,970
Let's also make sure we change a text to D in line just so that we are clear on what has what bootstrap

98
00:07:15,970 --> 00:07:16,920
class.

99
00:07:17,030 --> 00:07:22,630
OK so I'm going to go to the output and as you can see we now have these two new blocks D in line D

100
00:07:22,630 --> 00:07:29,890
in line and they are beside each other whereas the two blocks above them are one on top the other they're

101
00:07:29,890 --> 00:07:31,180
stacked.

102
00:07:31,210 --> 00:07:31,680
OK.

103
00:07:31,690 --> 00:07:36,580
And this would be the typical mobile screen size whereas this would be a laptop and you'll also notice

104
00:07:36,580 --> 00:07:42,480
that the width of blocks is set to 100 percent of it's containing width whereas the width of inline

105
00:07:42,520 --> 00:07:47,010
is set to the default which is just a fraction of the width.

106
00:07:47,230 --> 00:07:52,900
OK excellent so now we have in line and as you can see you need to know both because your elements might

107
00:07:53,140 --> 00:07:56,120
need to be sized differently depending on what the element is.

108
00:07:56,230 --> 00:08:02,170
And you can assign these d in line D block this display property this bootstrap class to any element

109
00:08:02,590 --> 00:08:06,090
it doesn't have to be a span it can be a div and typically it would be on a div.

110
00:08:06,130 --> 00:08:06,700
OK great.

111
00:08:06,700 --> 00:08:09,630
Let's go ahead and look at some more because there are quite a few.

112
00:08:09,730 --> 00:08:23,560
So besides in line you can also have other ones like inline block which will treat it halfway between

113
00:08:23,560 --> 00:08:28,880
an in line and halfway between a block and you will see how that looks when we test it.

114
00:08:28,900 --> 00:08:33,020
Let's go ahead and just add a few more so we can prove them all at once.

115
00:08:33,070 --> 00:08:35,670
So we have inline block the other ones you can use.

116
00:08:35,680 --> 00:08:37,960
I'm going to go over them all quickly.

117
00:08:37,960 --> 00:08:45,010
There is all so flex flex means that it will put the element into a row.

118
00:08:45,010 --> 00:08:56,290
Similarly to making a row flex will put the arms inside in two columns in this row and this is extremely

119
00:08:56,290 --> 00:09:04,120
useful because flex is very responsive and you can do use for justifying and aligning of elements inside

120
00:09:04,400 --> 00:09:07,590
of a flex container and can be showing you how to do that later.

121
00:09:07,600 --> 00:09:12,910
It's very great for positioning and justifying elements and making sure everything is spaced out evenly

122
00:09:12,910 --> 00:09:14,210
et cetera.

123
00:09:14,220 --> 00:09:14,410
OK.

124
00:09:14,440 --> 00:09:23,910
So there is d flex the next one that we're going to preview is going to be inline flex and I'm just

125
00:09:23,910 --> 00:09:29,560
going to put them all in here so that you have a reference and you'll know that all the inline flex

126
00:09:29,950 --> 00:09:37,270
and that way you can come back to this template whenever you need to choose the best display property

127
00:09:37,300 --> 00:09:38,440
for you.

128
00:09:38,440 --> 00:09:40,790
So there is flex in line of flex.

129
00:09:40,870 --> 00:09:52,490
There is also table which will create a table and there is also going to change this table as well and

130
00:09:52,520 --> 00:09:58,120
after table there is also table cell and table row.

131
00:09:58,160 --> 00:10:00,140
So these are typically used with tables.

132
00:10:00,140 --> 00:10:01,300
As you can imagine.

133
00:10:01,360 --> 00:10:08,390
But I'm going to show them for reference on their own table cell tables fell.

134
00:10:08,910 --> 00:10:18,460
And finally there is table row and each of these will be displaying the element that is applied on slightly

135
00:10:18,510 --> 00:10:19,420
differently.

136
00:10:20,410 --> 00:10:25,370
OK the best one you can use depends on what you need.

137
00:10:25,410 --> 00:10:31,560
Your current element to do the most common ones that use our block and flex as well as in line.

138
00:10:31,560 --> 00:10:36,390
Okay let's test how all these look like now that we have display table row display table cell display

139
00:10:36,390 --> 00:10:42,370
table display inline flex display flex display inline block and display in line really.

140
00:10:42,780 --> 00:10:46,300
Okay great failsafe snapshot and justices.

141
00:10:46,950 --> 00:10:52,050
So let's go to the output and as you can see now we have quite a lot more of our elements.

142
00:10:52,060 --> 00:10:54,640
I'm going to toggle easternmost we can see all this.

143
00:10:54,660 --> 00:11:01,770
These two are display in line and these two are display inline block as you notice they're slightly

144
00:11:01,770 --> 00:11:08,040
bigger and they take up before a height of their containing element whereas display in line had a slight

145
00:11:08,370 --> 00:11:16,590
margin at the top and bottom whereas display in land block they are the 100 percent height we have deflects

146
00:11:16,590 --> 00:11:27,330
which is treated as its own row here and you can put columns or elements into display flex divs and

147
00:11:27,330 --> 00:11:32,550
they will be treated as a rule which mean that they will stack very nicely and you can also justify

148
00:11:32,550 --> 00:11:34,100
and align them.

149
00:11:34,380 --> 00:11:37,720
Here we had display flex wrestling again.

150
00:11:37,740 --> 00:11:38,580
Let's check what that was.

151
00:11:38,580 --> 00:11:44,280
We forgot to change its text I guess display inline flex of course.

152
00:11:44,340 --> 00:11:49,050
OK display in line flex is another option that you can use.

153
00:11:49,050 --> 00:11:50,130
OK now we're seeing this.

154
00:11:50,160 --> 00:11:54,160
So it is slightly smaller in with the display flex.

155
00:11:54,270 --> 00:12:00,810
This is a great reference to have because as you can see there is a difference but because it's still

156
00:12:00,870 --> 00:12:07,080
flex even though it's in line it's flex which means that you can apply flex properties onto it.

157
00:12:07,080 --> 00:12:14,590
Flex has its own properties for justifying and aligning that the regular inline does not have.

158
00:12:14,730 --> 00:12:19,110
And we're gonna be looking at those in our Flex box lecture.

159
00:12:19,680 --> 00:12:20,410
Okay.

160
00:12:20,550 --> 00:12:23,120
Then we have table and table silent table row.

161
00:12:23,190 --> 00:12:30,830
These are typically used together tables used to be used to outline a website and to make the grid of

162
00:12:30,840 --> 00:12:31,950
a website.

163
00:12:31,980 --> 00:12:33,780
How ever you don't want to do that anymore.

164
00:12:33,780 --> 00:12:39,390
That was before things like CSX and flex box and grid came into effect.

165
00:12:39,420 --> 00:12:45,280
So now for two sites you can still definitely use tables for data if the data is in a table format.

166
00:12:46,170 --> 00:12:47,040
Okay great.

167
00:12:47,040 --> 00:12:51,410
Well these are all of these display properties you can use.

168
00:12:51,630 --> 00:12:58,200
And typically before bootstrap you would use CSX to apply all of these properties and as you can see

169
00:12:58,290 --> 00:13:05,910
the h the CML and adding the bootstrap directly into the EMR like this it is much more efficient for

170
00:13:05,910 --> 00:13:11,560
you as a developer because you don't have to apply CSX you can do it with bootstraps.

171
00:13:11,570 --> 00:13:12,500
Yes yes.

172
00:13:12,820 --> 00:13:17,160
OK well that is everything that we're going to be covering in this lecture I had encouraged you to test

173
00:13:17,190 --> 00:13:24,810
different designs around putting rows into tables putting elements into flex elements.

174
00:13:25,050 --> 00:13:31,380
I challenge you to see how they would all look like because you will be using multiple ones on your

175
00:13:31,380 --> 00:13:35,970
Web sites because sometimes you may need an element to be in line sometimes you might need an element

176
00:13:36,000 --> 00:13:39,040
to be on its own line et cetera.

177
00:13:39,080 --> 00:13:44,350
So these are important to know as you need them because you have to choose between them.

178
00:13:44,390 --> 00:13:44,660
Okay.

179
00:13:44,690 --> 00:13:45,460
Great.

180
00:13:45,480 --> 00:13:49,410
Thank you all for watching and we'll see you in the next lecture where we're going to be continuing

181
00:13:49,800 --> 00:13:54,480
learning bootstrap core fundamentals to get you up and running with projects see you there.