1
00:00:01,250 --> 00:00:09,200
Hello, in this video, I am going to show you the text utility so you can access all of the different

2
00:00:09,200 --> 00:00:16,130
information available regarding the text utility class or text utility classes, I should say, via

3
00:00:16,130 --> 00:00:18,100
the bootstrap website.

4
00:00:18,140 --> 00:00:23,720
I will provide a link to the bootstrap, you know, website in the description so you can access this

5
00:00:23,720 --> 00:00:25,700
page and a lot of stuff.

6
00:00:25,710 --> 00:00:30,030
We will be covering most of it and the rest of it will be all pretty straightforward.

7
00:00:30,050 --> 00:00:37,760
One thing I will say is some of the classes in here aren't supported on older version of Bootstrap five.

8
00:00:37,970 --> 00:00:41,580
So you want to make sure you have whatever the latest version is.

9
00:00:41,780 --> 00:00:45,710
I know that some of them aren't supported unless you have alpha free or newer.

10
00:00:45,710 --> 00:00:46,660
Currently Alpha free.

11
00:00:46,670 --> 00:00:47,250
The latest.

12
00:00:47,480 --> 00:00:49,550
It may be also the case.

13
00:00:49,550 --> 00:00:56,750
If you look at that page, I say when Alpha falls out or when beat out or maybe even when the releases

14
00:00:56,750 --> 00:00:58,670
out, some of the features may not work.

15
00:00:58,670 --> 00:01:02,890
If you're using an older version of Bouchra five for this, bear that in mind.

16
00:01:02,900 --> 00:01:11,060
So just make sure you grab that and make sure you grab just basically this, this, this and this one

17
00:01:11,060 --> 00:01:16,730
here, because they've combined the bootstrap and the popinjay s into one.

18
00:01:16,760 --> 00:01:22,530
You can have them separate if you really want to, or you can just do it like that, which is what I.

19
00:01:24,590 --> 00:01:28,850
OK, so make sure you grab it from there and don't just update this from two to three, for example,

20
00:01:29,090 --> 00:01:36,540
because it will have a different integrity, which will basically mean he won't work for it.

21
00:01:36,540 --> 00:01:42,260
It's mentioned that that might trip some people up for the first thing that we're going to do is just

22
00:01:42,260 --> 00:01:45,720
show you how to orient text in left, center, right.

23
00:01:45,740 --> 00:01:46,670
Pretty simple stuff.

24
00:01:46,970 --> 00:01:54,340
They find create a few P tags on the map or any classes here you can connect to.

25
00:01:54,350 --> 00:01:56,720
This text will be oriented on the left.

26
00:01:57,170 --> 00:01:59,360
Then we are going to say

27
00:02:04,520 --> 00:02:08,210
send a text right text.

28
00:02:08,900 --> 00:02:14,300
And currently they're all going to be left oriented until we apply some classes.

29
00:02:14,510 --> 00:02:23,090
So if we want to explicitly state something should be on the left, you put a class equal text that's

30
00:02:23,090 --> 00:02:23,620
left.

31
00:02:24,170 --> 00:02:25,910
This won't change anything in this case.

32
00:02:25,910 --> 00:02:33,710
But in another scenario, maybe you have a parent, you know, class that a or a parent element that

33
00:02:33,710 --> 00:02:36,830
has stalled, applied to it that make the right oriented.

34
00:02:36,830 --> 00:02:38,960
And this particular one you want left oriented.

35
00:02:38,970 --> 00:02:40,220
That's one use case.

36
00:02:40,550 --> 00:02:51,110
The class equals text center plus equals text for this.

37
00:02:51,110 --> 00:02:55,520
I'm not going to put text right on the text dash, then a breakpoint.

38
00:02:55,520 --> 00:03:03,770
So XXL, it could be accessed for the small stuff for small and medium, algy for large, excel for

39
00:03:03,770 --> 00:03:11,600
extra large or XXL for extra extra large then dash then left, center or right to what these to do is

40
00:03:11,600 --> 00:03:15,310
apply the text orientation on all screen sizes.

41
00:03:15,530 --> 00:03:21,920
What this one does, it only applies this text orientation on the extra extra large screen size, anything

42
00:03:21,920 --> 00:03:22,790
below that.

43
00:03:22,790 --> 00:03:27,960
It will not apply if they perceive that and bear in mind trickles up as well.

44
00:03:27,980 --> 00:03:34,220
So if you apply it to this more, that would automatically apply to medium, large, extra large and

45
00:03:34,220 --> 00:03:35,720
extra extra large.

46
00:03:35,960 --> 00:03:39,410
So if I reload, we get left, center, right.

47
00:03:39,410 --> 00:03:43,400
But what would happen if I resize the a bit so it's no longer extra extra large.

48
00:03:43,640 --> 00:03:48,890
These two are fine because they are applied to every breakpoint, whereas this is only apply to the

49
00:03:48,890 --> 00:03:51,260
extra extra large breakpoint on above.

50
00:03:51,440 --> 00:03:56,900
And as XXL is the largest, it's only that one particular size.

51
00:03:57,690 --> 00:04:00,350
OK, so is what you can do.

52
00:04:00,560 --> 00:04:04,220
And more information regarding this is applied right here.

53
00:04:04,220 --> 00:04:09,050
As you can see, only a little bit information is right there.

54
00:04:09,320 --> 00:04:14,540
And now let's talk about wrapping text around stuff.

55
00:04:14,870 --> 00:04:25,700
So if I put a div and I put a class badge, so this is just some styling on for a background of danger.

56
00:04:25,700 --> 00:04:38,600
Again, just dailan and before put the text Ruppe class style on to put a width six RBM.

57
00:04:39,140 --> 00:04:45,100
And in here I'm literally just going to put the text this text.

58
00:04:46,220 --> 00:04:46,780
Right,

59
00:04:51,110 --> 00:04:52,780
reload it doesn't up.

60
00:04:52,910 --> 00:04:56,870
So it's basically being off, you know, overhanging.

61
00:04:57,080 --> 00:05:00,560
If we want it to wrap we put text.

62
00:05:01,010 --> 00:05:01,880
That's right.

63
00:05:02,090 --> 00:05:07,730
Like so there we are in there wraps around and the actual parent containers.

64
00:05:07,730 --> 00:05:09,530
So adjust accordingly.

65
00:05:10,010 --> 00:05:14,810
Also you can make it overflow from the parent as well.

66
00:05:15,360 --> 00:05:17,870
So feel free to check that out.

67
00:05:17,990 --> 00:05:21,260
The next thing I'm going to show you a weird break is pretty simple.

68
00:05:21,260 --> 00:05:25,940
Just allow you to, you know, prevents long string the text from breaking the law.

69
00:05:26,150 --> 00:05:27,510
So feel free to check that.

70
00:05:27,890 --> 00:05:34,400
But what I want to show you next is lowercase, uppercase, that sort of stuff and capitalization.

71
00:05:35,150 --> 00:05:38,210
So I'm about to write a paragraph.

72
00:05:38,420 --> 00:05:40,280
I'm writing all uppercase.

73
00:05:40,280 --> 00:05:44,240
So I'm going to say I wrote this in all.

74
00:05:46,690 --> 00:05:48,550
Upper case.

75
00:05:50,190 --> 00:05:57,660
But will it, yeah, in her case, questionmark.

76
00:05:58,470 --> 00:06:05,790
So if I reload, yes, he appears in all uppercase, if I wanted to display some text, regardless of

77
00:06:05,790 --> 00:06:10,530
how he was originally written in or lower class.

78
00:06:11,790 --> 00:06:17,580
Let me turn off a class E cause text that lowercase.

79
00:06:19,410 --> 00:06:22,170
And if I reload that, we get it all lowercase.

80
00:06:22,170 --> 00:06:27,470
And as you can imagine, we have one for uppercase, which is text dash uppercase.

81
00:06:27,720 --> 00:06:33,670
We have one just to capitalize any words in there, which is text that come to light.

82
00:06:33,840 --> 00:06:37,140
This just capitalizes the start in.

83
00:06:38,230 --> 00:06:44,200
Letter of each word as this was already cut to death to the change, but this one does, Papa bear in

84
00:06:44,200 --> 00:06:48,840
mind it doesn't actually affect any capitalization throughout the world.

85
00:06:48,850 --> 00:06:53,170
It's only at the start of the word itself.

86
00:06:53,350 --> 00:06:56,920
The next thing that I'm gonna show you is text font size.

87
00:06:58,030 --> 00:07:06,460
I know AP tag, and I'm going to parade one per class here on, say, font size one or reload.

88
00:07:06,790 --> 00:07:14,530
It's just normal font because we haven't applied any style in classes per class equals FS dash one Solis's

89
00:07:14,530 --> 00:07:15,540
font size one.

90
00:07:15,610 --> 00:07:21,610
This is the largest one applicable within this font size and it ranges from one to six.

91
00:07:21,820 --> 00:07:29,290
Just put forth dash one, two, three, four, five or six depending on what side you are looking for.

92
00:07:29,590 --> 00:07:40,360
Next thing I'm going to show you is the light text or lighter, should say lighter text.

93
00:07:41,590 --> 00:07:47,800
And this is basically the weight of the text like it's fake or not fake with italic or not italic,

94
00:07:47,800 --> 00:07:56,260
that sort of stuff for a class of F.W. de Lyter reload.

95
00:07:56,530 --> 00:08:02,260
As you can see, there is a lot harder to see relative to the text that look pretty darn cool, almost

96
00:08:02,260 --> 00:08:03,040
like print.

97
00:08:03,610 --> 00:08:09,220
And if we scroll down, we get all of the different font, weight and italics are available.

98
00:08:09,220 --> 00:08:11,830
So we got both text, we got both the text.

99
00:08:11,980 --> 00:08:16,090
So this just makes it bolder relative to its parent element.

100
00:08:16,090 --> 00:08:17,860
So its parent element looked like this.

101
00:08:18,040 --> 00:08:23,230
It would be even more bold and you can do the same with light and loiters.

102
00:08:23,240 --> 00:08:29,020
So this just relative to the the parent one, the light is that that much of a difference.

103
00:08:29,020 --> 00:08:30,940
That's the reason I demonstrated this.

104
00:08:31,210 --> 00:08:32,260
That's normal.

105
00:08:32,290 --> 00:08:35,830
Again, feel free to apply that normal class if you want to.

106
00:08:35,830 --> 00:08:37,860
Especially combinat in combine.

107
00:08:37,890 --> 00:08:39,190
Yeah, sorry about that.

108
00:08:39,340 --> 00:08:46,570
In combination with something like JavaScript because your parent class might have bold applied to it

109
00:08:46,840 --> 00:08:48,850
and then you might want something in particular.

110
00:08:48,850 --> 00:08:51,730
Maybe a certain action has code for it to be normal.

111
00:08:51,730 --> 00:08:53,020
And then you can do this.

112
00:08:53,530 --> 00:08:56,930
And what I want you to do at the next task is experiment with the line.

113
00:08:57,200 --> 00:08:58,030
Pretty simple.

114
00:08:58,210 --> 00:09:04,150
If you have low in height, then there's literally no gap between the lines, but you can make it.

115
00:09:04,150 --> 00:09:06,790
So there's a huge gap between the lines as well.

116
00:09:06,790 --> 00:09:09,070
So this might be good.

117
00:09:09,070 --> 00:09:13,750
If you want to spread content out, make you a bit more readable, I'll find us a bit hard to read.

118
00:09:13,930 --> 00:09:18,430
I find something like one of these two is probably a nice middle ground.

119
00:09:18,550 --> 00:09:22,690
And obviously you can check out mono spaced text as well.

120
00:09:22,930 --> 00:09:27,790
You can reset the color as well and feel free to check out the text decoration.

121
00:09:27,790 --> 00:09:28,600
That's the wrong way to do that.

122
00:09:28,600 --> 00:09:29,710
The next attack task.

123
00:09:29,890 --> 00:09:35,100
Check these out and also check out all of the other different text classes I like.

124
00:09:35,110 --> 00:09:40,180
We cover the lowercase one, but, you know, try the uppercase, pretty simple Bahouth I go.

125
00:09:40,360 --> 00:09:41,650
So that's it for the text.

126
00:09:41,650 --> 00:09:42,880
Utility class.

127
00:09:43,090 --> 00:09:45,130
Simple stuff, but really useful.

128
00:09:45,310 --> 00:09:48,010
If you have any questions, feel free to prompt me a message.

129
00:09:48,010 --> 00:09:51,940
And as usual, I look forward to seeing you in the next video.