Hello, in this video, I am going to show you the text utility so you can access all of the different
information available regarding the text utility class or text utility classes, I should say, via
the bootstrap website.
I will provide a link to the bootstrap, you know, website in the description so you can access this
page and a lot of stuff.
We will be covering most of it and the rest of it will be all pretty straightforward.
One thing I will say is some of the classes in here aren't supported on older version of Bootstrap five.
So you want to make sure you have whatever the latest version is.
I know that some of them aren't supported unless you have alpha free or newer.
Currently Alpha free.
The latest.
It may be also the case.
If you look at that page, I say when Alpha falls out or when beat out or maybe even when the releases
out, some of the features may not work.
If you're using an older version of Bouchra five for this, bear that in mind.
So just make sure you grab that and make sure you grab just basically this, this, this and this one
here, because they've combined the bootstrap and the popinjay s into one.
You can have them separate if you really want to, or you can just do it like that, which is what I.
OK, so make sure you grab it from there and don't just update this from two to three, for example,
because it will have a different integrity, which will basically mean he won't work for it.
It's mentioned that that might trip some people up for the first thing that we're going to do is just
show you how to orient text in left, center, right.
Pretty simple stuff.
They find create a few P tags on the map or any classes here you can connect to.
This text will be oriented on the left.
Then we are going to say
send a text right text.
And currently they're all going to be left oriented until we apply some classes.
So if we want to explicitly state something should be on the left, you put a class equal text that's
left.
This won't change anything in this case.
But in another scenario, maybe you have a parent, you know, class that a or a parent element that
has stalled, applied to it that make the right oriented.
And this particular one you want left oriented.
That's one use case.
The class equals text center plus equals text for this.
I'm not going to put text right on the text dash, then a breakpoint.
So XXL, it could be accessed for the small stuff for small and medium, algy for large, excel for
extra large or XXL for extra extra large then dash then left, center or right to what these to do is
apply the text orientation on all screen sizes.
What this one does, it only applies this text orientation on the extra extra large screen size, anything
below that.
It will not apply if they perceive that and bear in mind trickles up as well.
So if you apply it to this more, that would automatically apply to medium, large, extra large and
extra extra large.
So if I reload, we get left, center, right.
But what would happen if I resize the a bit so it's no longer extra extra large.
These two are fine because they are applied to every breakpoint, whereas this is only apply to the
extra extra large breakpoint on above.
And as XXL is the largest, it's only that one particular size.
OK, so is what you can do.
And more information regarding this is applied right here.
As you can see, only a little bit information is right there.
And now let's talk about wrapping text around stuff.
So if I put a div and I put a class badge, so this is just some styling on for a background of danger.
Again, just dailan and before put the text Ruppe class style on to put a width six RBM.
And in here I'm literally just going to put the text this text.
Right,
reload it doesn't up.
So it's basically being off, you know, overhanging.
If we want it to wrap we put text.
That's right.
Like so there we are in there wraps around and the actual parent containers.
So adjust accordingly.
Also you can make it overflow from the parent as well.
So feel free to check that out.
The next thing I'm going to show you a weird break is pretty simple.
Just allow you to, you know, prevents long string the text from breaking the law.
So feel free to check that.
But what I want to show you next is lowercase, uppercase, that sort of stuff and capitalization.
So I'm about to write a paragraph.
I'm writing all uppercase.
So I'm going to say I wrote this in all.
Upper case.
But will it, yeah, in her case, questionmark.
So if I reload, yes, he appears in all uppercase, if I wanted to display some text, regardless of
how he was originally written in or lower class.
Let me turn off a class E cause text that lowercase.
And if I reload that, we get it all lowercase.
And as you can imagine, we have one for uppercase, which is text dash uppercase.
We have one just to capitalize any words in there, which is text that come to light.
This just capitalizes the start in.
Letter of each word as this was already cut to death to the change, but this one does, Papa bear in
mind it doesn't actually affect any capitalization throughout the world.
It's only at the start of the word itself.
The next thing that I'm gonna show you is text font size.
I know AP tag, and I'm going to parade one per class here on, say, font size one or reload.
It's just normal font because we haven't applied any style in classes per class equals FS dash one Solis's
font size one.
This is the largest one applicable within this font size and it ranges from one to six.
Just put forth dash one, two, three, four, five or six depending on what side you are looking for.
Next thing I'm going to show you is the light text or lighter, should say lighter text.
And this is basically the weight of the text like it's fake or not fake with italic or not italic,
that sort of stuff for a class of F.W. de Lyter reload.
As you can see, there is a lot harder to see relative to the text that look pretty darn cool, almost
like print.
And if we scroll down, we get all of the different font, weight and italics are available.
So we got both text, we got both the text.
So this just makes it bolder relative to its parent element.
So its parent element looked like this.
It would be even more bold and you can do the same with light and loiters.
So this just relative to the the parent one, the light is that that much of a difference.
That's the reason I demonstrated this.
That's normal.
Again, feel free to apply that normal class if you want to.
Especially combinat in combine.
Yeah, sorry about that.
In combination with something like JavaScript because your parent class might have bold applied to it
and then you might want something in particular.
Maybe a certain action has code for it to be normal.
And then you can do this.
And what I want you to do at the next task is experiment with the line.
Pretty simple.
If you have low in height, then there's literally no gap between the lines, but you can make it.
So there's a huge gap between the lines as well.
So this might be good.
If you want to spread content out, make you a bit more readable, I'll find us a bit hard to read.
I find something like one of these two is probably a nice middle ground.
And obviously you can check out mono spaced text as well.
You can reset the color as well and feel free to check out the text decoration.
That's the wrong way to do that.
The next attack task.
Check these out and also check out all of the other different text classes I like.
We cover the lowercase one, but, you know, try the uppercase, pretty simple Bahouth I go.
So that's it for the text.
Utility class.
Simple stuff, but really useful.
If you have any questions, feel free to prompt me a message.
And as usual, I look forward to seeing you in the next video.