1
00:00:01,140 --> 00:00:09,360
Hello, in this video, I am going to cover the color system in Bootstrap five, so depending on what

2
00:00:09,360 --> 00:00:16,650
you do with borders or with text or buttons or whatever, they have a certain color system, a color

3
00:00:16,650 --> 00:00:19,560
palette that you can use built in to bootstrap.

4
00:00:19,560 --> 00:00:22,110
And they have these names.

5
00:00:22,320 --> 00:00:28,800
If you watched any of my other videos or followed any other tutorials you will have, I'm sure you will

6
00:00:28,800 --> 00:00:34,410
have come across dates of primary secondary success, danger, warning info, warning.

7
00:00:34,920 --> 00:00:39,120
Wouldn't look like that with the black duster because they put a dark background on them.

8
00:00:39,150 --> 00:00:41,120
That's part of the coloring system as well.

9
00:00:41,400 --> 00:00:48,330
So info light, obviously white would not look good on a white background because you would see it on

10
00:00:48,330 --> 00:00:49,930
a light background was hard to see.

11
00:00:50,160 --> 00:00:54,430
So you're putting on a dark background and then the background color as well.

12
00:00:54,690 --> 00:01:04,500
So if I want to apply one of these to my div right here, I'll put text dash the actual palette name

13
00:01:04,500 --> 00:01:05,400
that we want to use.

14
00:01:05,580 --> 00:01:06,270
There we go.

15
00:01:06,900 --> 00:01:07,470
That's it.

16
00:01:07,680 --> 00:01:12,270
And if I wanted this on a dark background, Papaji Dash Dark.

17
00:01:17,910 --> 00:01:18,690
There we go.

18
00:01:18,840 --> 00:01:23,640
You can do BGI dash loiters well, because you've already got a white background for the rest of the

19
00:01:23,640 --> 00:01:25,190
website, you won't get sick.

20
00:01:25,470 --> 00:01:31,290
But if you do have a white background and maybe the rest of the website was a darker color, black or

21
00:01:31,290 --> 00:01:35,250
dark grey, then that's what you would do, something a big dash light.

22
00:01:35,580 --> 00:01:39,450
And again, you can see all the different background stuff enough to just do dark and light.

23
00:01:39,630 --> 00:01:43,530
You have the corresponding colors as well, so far as I did.

24
00:01:43,800 --> 00:01:45,270
Text it.

25
00:01:46,800 --> 00:01:47,750
See what that looks like.

26
00:01:47,760 --> 00:01:49,440
Now we've got a white text.

27
00:01:49,710 --> 00:01:54,450
Now let's put it on the success background.

28
00:01:54,450 --> 00:01:57,210
So BGI says

29
00:02:00,390 --> 00:02:01,380
Page are reloaded.

30
00:02:01,410 --> 00:02:02,280
There we go, though.

31
00:02:02,300 --> 00:02:08,820
That's all colors is depending on what thing specifically you're looking at, what component, what

32
00:02:08,820 --> 00:02:10,290
sort of how class.

33
00:02:10,290 --> 00:02:12,110
What what what what are you looking at in Bootstrap?

34
00:02:12,510 --> 00:02:18,060
They'll probably have its own respective, you know, way of implementing some sort of color.

35
00:02:18,210 --> 00:02:22,620
But again, it is still using these, you know, color system.

36
00:02:22,620 --> 00:02:24,270
So get used to these.

37
00:02:24,480 --> 00:02:27,270
These are great thing that you can use to get going.

38
00:02:27,360 --> 00:02:30,270
If we're going to are we're going to badge.

39
00:02:30,750 --> 00:02:35,160
We have badges and they're just using the background color.

40
00:02:35,400 --> 00:02:40,920
They're using different, you know, textiles to go into the buttons.

41
00:02:41,220 --> 00:02:41,820
Same thing.

42
00:02:42,030 --> 00:02:44,790
They're using that using a button color now.

43
00:02:44,790 --> 00:02:48,450
But again, it is still the same color name.

44
00:02:48,450 --> 00:02:49,980
So, again, get used to these.

45
00:02:49,980 --> 00:02:52,770
And these are very consistent throughout.

46
00:02:53,050 --> 00:02:53,910
So that's it.

47
00:02:53,910 --> 00:02:58,650
If you have any questions, feel free to send me a message or code will be in the ghetto blinkx, which

48
00:02:58,650 --> 00:03:06,750
will be in the description along with the button, not the buttons, the the colors API page.

49
00:03:06,960 --> 00:03:10,020
And yeah, I look forward to seeing you in the next video.