Oh, in this video, I am going to show you how to use the position utility in Bootstrap Version five,
so I will provide a link to the official API page where you can see all the different classes.
I will cover most of the foundational stuff.
So you will be all good to go over to.
Bear in mind, if you were watching this earlier in the series and I used Alpha1 Alpha, one doesn't
have the features in there.
Not to this extent.
And you'll need to upgrade to Alpha, to Alpha to great assuming Alva to the latest one at this point.
If not, just get a newer version it to the beta.
Great.
Or to finally, that's even better.
You want to go to just getting started in introduction and just get the latest from there and get the
latest set of JavaScript file there and just put the thesis up here and put the JavaScript update,
the Alpha one to Alpha two here, because it has an integrity check as well and the integrity check
will be different so it won't work.
So you'll need to get the latest links to I just mentioned that in case you come across any problems.
So using the position utility, we can position items very easily in a parent container.
So to do that, first of all, let's modify this so it has some style to it.
So I do some in line store obviously recommended for proper website to do this using classes and IDs,
the background color.
I'm going to put a grey just so you can see the boundaries of this parent element for a height of the
pixels the whitford's set by the fact they should call twelve.
That's fine.
So there we go.
To actually use this as a position utility, we need to put position that relative to our other position,
parent classes as well, like absolute and static carfare default we provided and you can see all the
different ones.
Relative is the one I like.
And if we are obviously depending on what you want, feel free to experiment.
If we want to put a say, an object is going to draw a square in the top.
Right.
We just put whatever we were doing and did, for example, for a class of.
Let me do it without this, let me just put the style and the style is going to have a width of 40 pixels
out of 40 pixels,
a background color of red, the four reloads.
If this is what we get, you want a position in the top, right?
We put a cloth and we need to put position that absolutely clear, position it directly on top does
zero.
That means at the top like that, the damage is going to be all the way to the right and we see the
bottom there on left.
I think this is all the way anchored to there is always going to be there and we can do something similar.
And let's see if we have one for the center or center will just put bottom dash 50.
So it's going to be 50 percent up from the bottom, right.
That's 50.
So from the right, 50 percent, they go always in the center.
And if for the final one, want on the bottom left, we just bottom does zero.
We put left to zero.
There you go.
It's in the bottom left and is always going to be there.
The Lock said there are more classes for position as you can see and feel free to experiment.
And you know.
You use a different number, as you can see, more than the number that I've shown you and you can send
to elements as whites that are just using them like this.
So feel free to check that out.
Here are some real world example.
If you want to have some of notification thing over a button, you I say use case where you might actually
be in position.
And here they never want some sort of progress.
But this is centered vertically and also into the left and right as well.
So that's it.
If you have any questions, feel free to pump me a message.
And as usual, I look forward to seeing you in the next video.