1
00:00:05,230 --> 00:00:07,870
Welcome back, everyone, to this lecture on buttons.

2
00:00:08,960 --> 00:00:14,090
Now we're actually exploring quite a few topics in this lecture, not just specifically HTML buttons

3
00:00:14,090 --> 00:00:14,960
and bootstrap.

4
00:00:15,350 --> 00:00:20,900
In fact, we're going to start off by understanding how best to use the bootstrap documentation for

5
00:00:20,900 --> 00:00:25,280
examples and actually using that code in your own web pages.

6
00:00:25,490 --> 00:00:30,470
And most importantly, being comfortable with not 100 percent understanding every single class call

7
00:00:30,470 --> 00:00:31,550
in the documentation.

8
00:00:31,790 --> 00:00:32,930
That's really a big part of it.

9
00:00:32,930 --> 00:00:38,870
Is feeling OK by just copy and pasting what's in the documentation and then having to figure it out

10
00:00:38,870 --> 00:00:40,280
bit by bit on your own.

11
00:00:40,850 --> 00:00:43,100
Then we'll talk about the button elements in bootstrap.

12
00:00:43,340 --> 00:00:44,090
It's pretty simple.

13
00:00:44,090 --> 00:00:49,460
It's a lot like an input submit button, except they can actually do other things rather than just submit

14
00:00:49,460 --> 00:00:50,000
forms.

15
00:00:50,360 --> 00:00:55,580
Then we'll talk about stacked classes, and then we'll also show you how to override the default bootstrap

16
00:00:55,580 --> 00:00:56,150
styling.

17
00:00:56,390 --> 00:01:01,100
For example, if you want to change the color of the text in a button beyond what bootstrap provides

18
00:01:01,100 --> 00:01:07,400
for you, let's get started by heading over to Visual Studio Code Editor and also having access to the

19
00:01:07,400 --> 00:01:09,200
bootstrap documentation in our browser.

20
00:01:09,230 --> 00:01:10,880
We'll be going back and forth between the two.

21
00:01:11,600 --> 00:01:11,880
All right.

22
00:01:11,900 --> 00:01:14,210
Here I am back inside Visual Studio code.

23
00:01:14,510 --> 00:01:19,550
I want to point out that right now, inside my folder called Django Lectures, I have an example the

24
00:01:19,820 --> 00:01:23,420
HTML file, as well as my own master that csv file.

25
00:01:23,870 --> 00:01:26,390
I'm going to begin by leaving Master.

26
00:01:26,390 --> 00:01:28,370
Let's see SS as an empty file.

27
00:01:29,330 --> 00:01:35,360
Then I will call Doc here, which will automatically set up what I need for the.

28
00:01:36,020 --> 00:01:41,000
So notice it sets up the head and then the body, and as we already know, bodies where our elements

29
00:01:41,000 --> 00:01:41,300
go.

30
00:01:41,540 --> 00:01:44,240
And then the head holds things like links and information.

31
00:01:44,750 --> 00:01:51,170
And so the first thing going to do is make sure that I successfully link this HTML to the actual bootstrap

32
00:01:51,170 --> 00:01:55,250
CSS, as well as my own success, even though technically I don't have anything there yet.

33
00:01:55,820 --> 00:01:57,560
So how do we do this as a review?

34
00:01:57,830 --> 00:02:03,860
You start typing out Link, click this and then we have the relationship, which is going to be a style

35
00:02:03,860 --> 00:02:04,230
sheet.

36
00:02:04,250 --> 00:02:07,640
And then you're going to say your own master, that CSS.

37
00:02:07,910 --> 00:02:10,070
So that's for our own success.

38
00:02:10,550 --> 00:02:16,910
Before I load my master's thesis, if I want my master's thesis to overwrite what comes before it,

39
00:02:16,940 --> 00:02:21,560
like the bootstrap CSS, then I should load right before the link to the bootstrap CIUSSS.

40
00:02:21,770 --> 00:02:22,790
So how do we do that?

41
00:02:23,090 --> 00:02:25,310
Well, you just go to get bootstrap dot com.

42
00:02:25,670 --> 00:02:30,650
Remember we show this in the previous lecture, then you're going to scroll down here and you're going

43
00:02:30,650 --> 00:02:36,950
to go and copy this link right here, which is again, just showing you the relationship for their online

44
00:02:36,950 --> 00:02:39,230
hosted CSS so we can go ahead and copy that.

45
00:02:39,890 --> 00:02:40,940
Copy that to Clipboard.

46
00:02:41,540 --> 00:02:46,130
Come back here, and then I'm going to load this in and you should load it before your own master that

47
00:02:46,130 --> 00:02:46,760
CSS.

48
00:02:47,830 --> 00:02:51,820
OK, so just go ahead and copy, that's going to be kind of long, but you get the idea, it's just

49
00:02:51,820 --> 00:02:53,170
hosting it at some web site.

50
00:02:53,560 --> 00:02:56,440
So there's our link for the CSIS only.

51
00:02:56,920 --> 00:03:02,140
You should keep in mind certain bootstrap components that have interactivity or some sort of interaction

52
00:03:02,140 --> 00:03:04,210
with the user also need JavaScript.

53
00:03:04,480 --> 00:03:07,990
So but you could also do is just come over here and just in case you're going to be using one of those

54
00:03:07,990 --> 00:03:08,500
components.

55
00:03:08,770 --> 00:03:10,580
Also copy this notice.

56
00:03:10,600 --> 00:03:15,010
It's actually not a link tag element, but it's a script tech element, which is the way you can connect

57
00:03:15,010 --> 00:03:16,510
JavaScript to your HTML.

58
00:03:16,900 --> 00:03:19,240
Just going to copy that, and we can also place that.

59
00:03:21,030 --> 00:03:21,750
Right below.

60
00:03:22,800 --> 00:03:25,740
The CSE's for Bootstrap.

61
00:03:26,250 --> 00:03:32,550
So what I've done here is I've linked the CSC for Bootstrap and the JavaScript for bootstrap.

62
00:03:32,820 --> 00:03:36,190
JavaScript is not 100 percent necessary for bootstrap components.

63
00:03:36,210 --> 00:03:40,020
There's just some that have some interaction or interconnectivity that you'll need to actually load

64
00:03:40,020 --> 00:03:41,280
the JavaScript model as well.

65
00:03:41,670 --> 00:03:44,370
So it's a safe practice to go ahead and link both of them up.

66
00:03:44,610 --> 00:03:46,560
And then we've linked our own stylesheet.

67
00:03:46,770 --> 00:03:49,170
So that's step one, just linking everything together.

68
00:03:49,410 --> 00:03:51,900
No, again, right now, our master's thesis doesn't have anything.

69
00:03:52,410 --> 00:03:54,100
So we understand that.

70
00:03:54,120 --> 00:03:57,960
Now I want you to get comfortable using the actual bootstrap documentation.

71
00:03:58,260 --> 00:04:01,920
And more importantly, just being comfortable with the fact that, you know, always going to know on

72
00:04:01,920 --> 00:04:06,390
how to percent what every single class call is doing, which is why you have to explore documentation.

73
00:04:06,780 --> 00:04:09,570
The best way to use the bootstrap documentation is just to have fun with it.

74
00:04:09,750 --> 00:04:14,660
Explore, maybe copy and paste examples without fully understanding what's actually happening here,

75
00:04:14,670 --> 00:04:16,290
because remember, that's really what Bootstrap is for.

76
00:04:16,320 --> 00:04:22,300
Just quickly copy and paste components that you later start to tweak or edit to your own net needs so

77
00:04:22,300 --> 00:04:25,080
you can come here two examples you can.

78
00:04:25,080 --> 00:04:28,380
You can actually download all the examples and download the source code as well.

79
00:04:28,380 --> 00:04:29,820
They'll download it as a zip file.

80
00:04:30,120 --> 00:04:33,840
But one of the ways I like to use this this is just begin exploring what you need.

81
00:04:33,840 --> 00:04:38,910
So maybe you do decide that you're going to have a pricing page or maybe a product page or something

82
00:04:38,910 --> 00:04:41,550
like that, so you can just click here to pricing.

83
00:04:43,090 --> 00:04:47,560
And again, if you're interested in something that looks like this, you would view the page source,

84
00:04:47,560 --> 00:04:48,790
So what's right?

85
00:04:48,790 --> 00:04:50,440
Click without highlighting anything.

86
00:04:50,860 --> 00:04:51,920
Click View Page Source.

87
00:04:51,920 --> 00:04:52,720
That's control you.

88
00:04:53,530 --> 00:04:54,610
And then you can see here.

89
00:04:54,820 --> 00:04:58,810
You don't actually need to load up what's in the head because you'll notice they're actually loading

90
00:04:58,810 --> 00:05:00,220
up their access.

91
00:05:00,460 --> 00:05:03,940
And you also notice that they're loading up if I zoom in here.

92
00:05:05,280 --> 00:05:09,510
Some assets, so they're actually loading up some assets that are available in the docks.

93
00:05:09,960 --> 00:05:12,030
And you'll notice they're also setting up some styles.

94
00:05:12,180 --> 00:05:14,220
So let's just practice right now.

95
00:05:14,760 --> 00:05:20,700
You'll notice there's also a case for custom styles and we're going to do just practice loading up only

96
00:05:20,700 --> 00:05:23,190
what's in the body and just see what happens when you do that.

97
00:05:23,190 --> 00:05:25,780
So we're going to scroll down here and just copy notes.

98
00:05:25,800 --> 00:05:28,320
There's already a table, so some elements we're kind of already familiar with.

99
00:05:28,560 --> 00:05:30,870
You can see it live, so I'm to copy this.

100
00:05:30,900 --> 00:05:32,190
Notice I didn't copy everything.

101
00:05:32,520 --> 00:05:34,530
I didn't copy what was actually in the head.

102
00:05:34,830 --> 00:05:37,500
So we'll see what happens if I don't end up copying all this.

103
00:05:38,400 --> 00:05:40,470
You should probably expect there to be some missing elements.

104
00:05:41,400 --> 00:05:43,110
So inside the body, I'm just going to paste that in.

105
00:05:44,380 --> 00:05:47,020
Save those changes now we see here.

106
00:05:47,320 --> 00:05:48,670
I can see the an example.

107
00:05:49,330 --> 00:05:51,040
And for the most part, it actually looks pretty good.

108
00:05:51,790 --> 00:05:55,090
I'm going to zoom out so you can see, but it kind of looks like normally.

109
00:05:56,470 --> 00:06:01,690
So you can already see I have a pretty good pricing page, just from what I copied and pasted or even

110
00:06:01,690 --> 00:06:02,800
copy anything from the head.

111
00:06:03,160 --> 00:06:08,740
You'll notice that some icons are missing because I specifically didn't actually link those in the top

112
00:06:08,740 --> 00:06:09,190
of the head.

113
00:06:09,370 --> 00:06:11,980
So I mentioned that some of these will actually be loading up.

114
00:06:12,250 --> 00:06:14,890
But for the most part, just off of that, it's already kind of working.

115
00:06:15,370 --> 00:06:16,660
So what's actually going on here?

116
00:06:16,750 --> 00:06:18,580
How would I then do the next steps?

117
00:06:19,030 --> 00:06:24,240
I'd come back here and then start exploring the elements that interests me.

118
00:06:24,250 --> 00:06:25,090
I can see here.

119
00:06:25,300 --> 00:06:32,110
It looks like there's an unordered list and about so I can see heading about unordered list its class

120
00:06:32,110 --> 00:06:33,250
and then I see list items.

121
00:06:33,580 --> 00:06:34,690
So what's actually happening here?

122
00:06:34,720 --> 00:06:36,040
Well, I would just come back to the page.

123
00:06:37,030 --> 00:06:40,600
Start looking was the about and I see about that.

124
00:06:40,600 --> 00:06:43,210
I see teams, location, privacy and terms.

125
00:06:43,900 --> 00:06:49,030
So hopefully you can start to connect the dots, teams, locations, privacy in terms and you realize,

126
00:06:49,030 --> 00:06:54,490
OK, the way bootstrap works here for this particular class list unstyled text small.

127
00:06:54,760 --> 00:06:57,070
And then there's again, a bunch of class calls here.

128
00:06:57,550 --> 00:07:02,380
These are the ways that you can put in links at the bottom of your page that you've seen at other websites.

129
00:07:02,800 --> 00:07:07,630
So now you can start to construct essentially a skeleton of a piece of code, and eventually you'll

130
00:07:07,630 --> 00:07:11,500
probably want to make these links to other places on your website.

131
00:07:11,770 --> 00:07:17,560
So note here there's an h ref, which means I could actually link this to some other part of my web

132
00:07:17,560 --> 00:07:17,850
page.

133
00:07:17,860 --> 00:07:22,530
And later on, we actually start creating websites of Django and actually creating multiple web pages.

134
00:07:22,540 --> 00:07:27,490
I would just pass in some other URL link here, and if so, notice again.

135
00:07:27,760 --> 00:07:30,790
It's actually then an anchor tag within a list item.

136
00:07:31,210 --> 00:07:32,300
And then you start looking here.

137
00:07:32,330 --> 00:07:37,570
You realize, OK, resources, the same thing and unordered list with list of anchor tags and same with

138
00:07:37,570 --> 00:07:39,970
features, and this was all within a class.

139
00:07:40,000 --> 00:07:45,030
And what's nice about bootstrap is it really uses this div class call to organize things.

140
00:07:45,040 --> 00:07:48,820
So you see a div here with these columns, and we're actually going to learn about this later on.

141
00:07:48,830 --> 00:07:53,920
We talk about the grid system of Column six, column medium, what this actually means, but I just

142
00:07:53,920 --> 00:07:59,290
want you to feel comfortable, not 100 percent knowing what the actual classes do, but being able to

143
00:07:59,290 --> 00:08:03,340
break down and understand for yourself just by kind of guessing and checking.

144
00:08:03,610 --> 00:08:06,550
So I see these pieces of text and I'm interested in that.

145
00:08:06,550 --> 00:08:12,310
I come here searching for those texts, so we kind of already understand that here there's features,

146
00:08:12,310 --> 00:08:16,330
resources in about and each of these is just an unordered list of anchor text.

147
00:08:16,750 --> 00:08:21,010
So if I wanted to remove those, I can actually just then come here and remove these three things.

148
00:08:23,510 --> 00:08:26,870
And notice now, if I come back to my website, I won't see that bottom anymore.

149
00:08:27,020 --> 00:08:31,220
And really, this might be one of the easiest ways to begin to understand bootstrap is to look at the

150
00:08:31,220 --> 00:08:33,260
examples and then see how do they work.

151
00:08:33,470 --> 00:08:37,429
And if I start editing or removing things, then what actually changes?

152
00:08:37,460 --> 00:08:42,470
So, for example, if we're interested in what does this compare plans structure, how does this actually

153
00:08:42,470 --> 00:08:43,850
work inside the HTML?

154
00:08:44,179 --> 00:08:49,280
Well, you just come back to the HTML and you'll end up realizing, Oh, this is actually just a table.

155
00:08:49,310 --> 00:08:53,060
I can see there's a table head with free pro and enterprise.

156
00:08:53,330 --> 00:08:55,610
And they were kind of smart and they left one of them blank.

157
00:08:56,000 --> 00:08:59,390
And then they're assigning width to them to make the blank one a little wider.

158
00:08:59,420 --> 00:09:05,360
So I come back here and I realize, OK, there's technically a blank column here that's a little wider

159
00:09:05,720 --> 00:09:08,360
and really, it's just the header that's blank that way.

160
00:09:08,360 --> 00:09:09,770
Public private permissions.

161
00:09:09,980 --> 00:09:13,020
Those categories can't create this kind of like index feature.

162
00:09:13,550 --> 00:09:16,910
So I have three column heads that are name free enterprise.

163
00:09:17,210 --> 00:09:21,950
And then this blank one here and then there's a little check marks, etc. So you can see here I have

164
00:09:21,950 --> 00:09:24,110
private and then more table rows.

165
00:09:24,470 --> 00:09:29,300
So if I wanted to get rid of that table, I could just come back here and delete this entire div.

166
00:09:30,940 --> 00:09:35,710
And then if I open this up, I should see just compare plans and I was able to remove that table.

167
00:09:35,950 --> 00:09:38,650
And if I want to add it back in, I could begin to customize my own table.

168
00:09:38,980 --> 00:09:44,050
Then if interested in how this works, free pro and enterprise, you just start exploring that as well.

169
00:09:44,060 --> 00:09:48,470
So you'd come back up here and say, OK, well, what kind of objects are these?

170
00:09:48,490 --> 00:09:50,860
I see 30 users, 50 gigabytes of storage.

171
00:09:51,280 --> 00:09:56,230
You realize this is within a class called column, and these are actually then known as cards within

172
00:09:56,230 --> 00:09:56,710
bootstrap.

173
00:09:56,950 --> 00:09:58,810
So you start figuring out, well, what are these cards?

174
00:09:58,810 --> 00:10:00,220
How do they work, cetera?

175
00:10:00,490 --> 00:10:01,590
What can I edit here?

176
00:10:01,600 --> 00:10:06,490
And then if you were really confused because maybe this is a little something more unique towards the

177
00:10:06,490 --> 00:10:09,820
bootstrap, the idea of cards, you would come to the documentation.

178
00:10:10,720 --> 00:10:14,980
Check out box and then you can search the box for carts.

179
00:10:16,030 --> 00:10:20,170
Since you kind of know already, OK, well, that had something to do with cards, and you'll realize

180
00:10:20,200 --> 00:10:24,850
it's just this flexible container, and it includes options for headers and footers and then content.

181
00:10:25,120 --> 00:10:27,220
And so you have this little really basic card title.

182
00:10:27,550 --> 00:10:31,090
And it'll start telling you how it works, that it's a class card.

183
00:10:31,360 --> 00:10:36,100
There's a card body as a division here and then card title card text.

184
00:10:36,280 --> 00:10:42,340
There's buttons, content types and it'll just show you more and more examples until you feel comfortable

185
00:10:42,580 --> 00:10:45,280
with what's actually going on inside these cards.

186
00:10:45,760 --> 00:10:50,710
And typically, they're examples of a lot of things towards the end that you can then start removing.

187
00:10:50,710 --> 00:10:55,260
So often it's easier to get the most complex example and just remove the stuff you don't need.

188
00:10:55,330 --> 00:10:58,270
They try to build up to the stuff that you do need, but you can see here.

189
00:10:58,390 --> 00:11:05,170
Cards are this really awesome part of bootstrap that you can see across websites being used all the

190
00:11:05,170 --> 00:11:05,500
time?

191
00:11:06,070 --> 00:11:06,400
All right.

192
00:11:06,760 --> 00:11:09,980
So that's just the kind of the basics of how to use Bootstrap, in my opinion.

193
00:11:10,000 --> 00:11:13,870
Again, there's no right or wrong way to do this, but I just want you to get comfortable with being

194
00:11:13,870 --> 00:11:19,090
able to copy things from the documentation or examples without 100 percent knowing what every single

195
00:11:19,090 --> 00:11:20,020
class call is doing.

196
00:11:20,320 --> 00:11:24,460
Again, we're not really focused too much on the front end for this entire course, but we do want you

197
00:11:24,460 --> 00:11:29,290
to feel comfortable with being able to explore documentation even if you don't necessarily know every

198
00:11:29,290 --> 00:11:30,100
single class call.

199
00:11:30,640 --> 00:11:33,430
So what I'm going to do now is I'm going to do everything that was in this body.

200
00:11:34,350 --> 00:11:38,550
I just want to focus on that example of the buttons I mentioned earlier.

201
00:11:39,090 --> 00:11:44,310
So let's go ahead and get rid of this other container here and everything that's inside the body.

202
00:11:44,310 --> 00:11:48,840
So you should just have the opening body tag and the closing one, as well as the links to bootstrap.

203
00:11:49,410 --> 00:11:53,100
So we're going to do is talk a little bit about buttons and then also show how to overwrite components.

204
00:11:53,550 --> 00:11:57,680
So you can see here there's a ton of components, there's an accordion component, you can see it's

205
00:11:57,690 --> 00:12:00,180
an accordion because it kind of shrinks and expands.

206
00:12:01,020 --> 00:12:05,970
There's the breadcrumb component, which is the way of like leaving little breadcrumbs to go in other

207
00:12:05,970 --> 00:12:06,900
places on your website.

208
00:12:07,410 --> 00:12:12,450
And we're going to do here is check out buttons and you will notice that there's a bunch of buttons

209
00:12:12,450 --> 00:12:14,250
that are available for you in bootstrap.

210
00:12:14,280 --> 00:12:18,630
And eventually we can do is change these buttons to be things like submit buttons, and you'll notice

211
00:12:18,630 --> 00:12:20,490
that there's actually stacked classes on these.

212
00:12:20,760 --> 00:12:25,200
That's something we have seen before in our case, but I do want you to be aware that you can actually

213
00:12:25,200 --> 00:12:30,930
end up stacking classes on top of each other by simply saying one class call a space and then another

214
00:12:30,930 --> 00:12:31,530
class call.

215
00:12:31,980 --> 00:12:37,260
So if I wanted these buttons here, primary secondary success, et cetera, I am going to go ahead and

216
00:12:37,260 --> 00:12:37,890
copy these.

217
00:12:38,580 --> 00:12:41,280
So I'll copy that to my clipboard and let's just put those in.

218
00:12:42,890 --> 00:12:44,900
OK, so now I see a bunch of buttons here.

219
00:12:46,010 --> 00:12:49,400
Again, I'm going to look a little strange because I don't have any padding or spacing on them, but

220
00:12:49,400 --> 00:12:55,010
I can see a primary secondary success danger warning info like dark and then some sort of link.

221
00:12:55,550 --> 00:13:03,920
Now you'll notice that the all have the same button class as a base class, but then there's an extra

222
00:13:03,920 --> 00:13:05,330
class that the add on to some of these.

223
00:13:05,330 --> 00:13:07,940
This extra class really includes the coloring.

224
00:13:08,090 --> 00:13:12,050
So if I were to delete button primary, you'll notice that suddenly it becomes a white button.

225
00:13:12,500 --> 00:13:19,040
So hopefully this starts teaching you that, OK, this BTN dash and then some other call is really more

226
00:13:19,040 --> 00:13:21,290
linked to the coloring of that button.

227
00:13:21,650 --> 00:13:27,080
And it's also nice because it colors it in a way that's informative to you as far as, like what this

228
00:13:27,080 --> 00:13:28,010
color represents.

229
00:13:28,130 --> 00:13:33,530
So we can think of BTN Danger as saying, Hey, are you sure you want to cancel who's dangerous or some

230
00:13:33,530 --> 00:13:34,220
sort of warning?

231
00:13:34,550 --> 00:13:39,620
And you can see the colors kind of reflect that red and yellow are typically meant to stop or slow down.

232
00:13:40,130 --> 00:13:42,560
And if you want to get rid of those, you can simply say B10 warning.

233
00:13:43,430 --> 00:13:43,980
Delete that.

234
00:13:44,330 --> 00:13:49,490
And you notice suddenly it turns into a white button, and then you can also edit the text to say whatever

235
00:13:49,490 --> 00:13:50,000
you want.

236
00:13:50,450 --> 00:13:53,090
OK, so clearly there's a lot of stuff going on here.

237
00:13:53,390 --> 00:13:57,350
Now you may be wondering, Well, I don't want these exact colors for success.

238
00:13:57,530 --> 00:13:59,840
I understand that I can stack the classes.

239
00:13:59,840 --> 00:14:05,150
There are some base BTN button class, and I also understand that there's then these additional classes

240
00:14:05,450 --> 00:14:07,440
that deem something like success.

241
00:14:07,440 --> 00:14:09,410
The secondary button info light dark.

242
00:14:09,410 --> 00:14:15,170
And eventually, for my particular color scheme and my website, I want to change some of these.

243
00:14:15,200 --> 00:14:20,360
So you should be OK if the BTN as the general button class, but maybe you want to change the actual

244
00:14:20,360 --> 00:14:21,050
color scheme.

245
00:14:21,860 --> 00:14:27,020
There's many different ways of doing this, and one way is to actually use the SAS color themes of bootstrap.

246
00:14:27,230 --> 00:14:31,460
But to keep it simple, we'll just show you how to do this by overwriting a class in CSS.

247
00:14:31,670 --> 00:14:37,850
So what we do is remember, we're loading our master CSS after we load the bootstrap CIUSSS and the

248
00:14:37,850 --> 00:14:38,840
bootstrap JavaScript.

249
00:14:38,840 --> 00:14:44,720
And if you just want to edit these colors with a simple CSS call, what you can do is let's go ahead

250
00:14:44,720 --> 00:14:47,930
and edit the danger button to be a different color.

251
00:14:48,470 --> 00:14:50,600
So I take note of that class.

252
00:14:51,050 --> 00:14:51,650
I'm a copy.

253
00:14:51,650 --> 00:14:54,650
That class comes to my own CSV file.

254
00:14:56,110 --> 00:14:56,590
And then.

255
00:14:57,540 --> 00:14:58,620
But beating danger.

256
00:14:59,720 --> 00:15:00,230
And then.

257
00:15:01,190 --> 00:15:06,230
I can say something like color, actually, in this case, I'll change the background so I can say background

258
00:15:06,230 --> 00:15:10,160
color, and let's make that background color red kind of a bright red.

259
00:15:10,160 --> 00:15:13,340
You can see it changed, but just to make it super clear, I'm going to change.

260
00:15:13,340 --> 00:15:14,360
It's something like purple.

261
00:15:14,570 --> 00:15:18,110
And you can see as I change, this is changing as well.

262
00:15:18,140 --> 00:15:20,390
You can also see there's actually a little border around it.

263
00:15:20,630 --> 00:15:22,340
So you can change that as well the border color.

264
00:15:22,670 --> 00:15:29,630
But this is just to give you an idea of how to overwrite these colors simply with your own CSV calls.

265
00:15:29,900 --> 00:15:34,380
There's technically better ways of doing this by editing an entire color theme, but this probably the

266
00:15:34,380 --> 00:15:38,420
simplest and easiest way to do it, given what we know so far, which is just call that same class.

267
00:15:38,420 --> 00:15:43,130
If in your own system that you load after the bootstrap CIUSSS and just start editing the properties

268
00:15:43,130 --> 00:15:45,410
you want, like background color or even the text color.

269
00:15:45,500 --> 00:15:49,850
If you want to change the text color, you just say color and then maybe call it black.

270
00:15:51,860 --> 00:15:54,950
And you could see here now it's been changed to black.

271
00:15:55,250 --> 00:16:01,970
Now you will notice there are special aspects of these buttons that when you hover over it, it suddenly

272
00:16:01,970 --> 00:16:03,590
changes back to red.

273
00:16:03,920 --> 00:16:09,170
This was not super clear, given that it's actually a very subtle effect within bootstrap.

274
00:16:09,380 --> 00:16:11,930
But there is this idea of changing on hover.

275
00:16:13,420 --> 00:16:18,520
And this is slightly more advanced, CSE's, but the way you do this in general for components, if

276
00:16:18,520 --> 00:16:24,460
you do want them to change aspects on hover, is you call that class like BTN danger.

277
00:16:25,620 --> 00:16:28,140
And then you say, colon hover.

278
00:16:28,950 --> 00:16:33,930
And now you can actually see us attributes that will only take effect when the mouse is hovering over

279
00:16:33,930 --> 00:16:35,530
the element, just to make it clear.

280
00:16:35,550 --> 00:16:36,570
I'll say background color.

281
00:16:36,960 --> 00:16:39,090
And let's make this background color blue.

282
00:16:39,990 --> 00:16:43,950
And let's make the text rental also say color is red.

283
00:16:44,340 --> 00:16:48,930
So now notice I have the default and then the colors when something's hovering over it.

284
00:16:49,230 --> 00:16:52,050
So now you're actually seeing this change to whatever.

285
00:16:52,050 --> 00:16:56,040
I just said, they're background color blue and then red again, slightly more advanced.

286
00:16:56,070 --> 00:17:00,690
This won't really be dealing with this too much, but if you ever kind of curious about this sort of

287
00:17:00,690 --> 00:17:05,790
thing and just do a Google search for how to change the assess properties on hover and you would eventually

288
00:17:05,790 --> 00:17:06,480
figure this out.

289
00:17:06,990 --> 00:17:10,260
OK, so that's really the basics of what I wanted to talk about here.

290
00:17:10,380 --> 00:17:14,819
And again, as a quick review, you just copy and paste the CC in JavaScript here.

291
00:17:15,180 --> 00:17:17,130
Use the documentation to your advantage.

292
00:17:17,410 --> 00:17:19,770
Again, you don't need to understand 100 percent what's going on.

293
00:17:20,040 --> 00:17:24,359
Just feel comfortable with deleting class calls and editing class calls and then looking that up in

294
00:17:24,359 --> 00:17:25,260
the documentation.

295
00:17:25,589 --> 00:17:32,010
And if you ever want to overwrite your own stuff on the CC, these come to your own M.S. Assess and

296
00:17:32,010 --> 00:17:34,530
then call those classes and edit what you want.

297
00:17:34,530 --> 00:17:38,830
And then a lot of bootstrap is pretty sleek, and a lot of things change on hover.

298
00:17:38,850 --> 00:17:42,630
So if you're want to deal all that, you can just call Colin hover on that class.

299
00:17:43,230 --> 00:17:44,550
OK, thanks.

300
00:17:44,550 --> 00:17:45,600
And I'll see at the next lecture.