1
00:00:01,200 --> 00:00:08,990
Oh, in this video, I am going to show you how to use the position utility in Bootstrap Version five,

2
00:00:09,030 --> 00:00:15,150
so I will provide a link to the official API page where you can see all the different classes.

3
00:00:15,150 --> 00:00:18,060
I will cover most of the foundational stuff.

4
00:00:18,070 --> 00:00:20,520
So you will be all good to go over to.

5
00:00:20,520 --> 00:00:27,750
Bear in mind, if you were watching this earlier in the series and I used Alpha1 Alpha, one doesn't

6
00:00:27,750 --> 00:00:30,180
have the features in there.

7
00:00:30,190 --> 00:00:31,350
Not to this extent.

8
00:00:31,620 --> 00:00:37,050
And you'll need to upgrade to Alpha, to Alpha to great assuming Alva to the latest one at this point.

9
00:00:37,050 --> 00:00:39,900
If not, just get a newer version it to the beta.

10
00:00:39,900 --> 00:00:40,320
Great.

11
00:00:40,320 --> 00:00:42,290
Or to finally, that's even better.

12
00:00:42,660 --> 00:00:49,380
You want to go to just getting started in introduction and just get the latest from there and get the

13
00:00:49,380 --> 00:00:57,120
latest set of JavaScript file there and just put the thesis up here and put the JavaScript update,

14
00:00:57,540 --> 00:01:05,250
the Alpha one to Alpha two here, because it has an integrity check as well and the integrity check

15
00:01:05,250 --> 00:01:06,960
will be different so it won't work.

16
00:01:06,960 --> 00:01:12,210
So you'll need to get the latest links to I just mentioned that in case you come across any problems.

17
00:01:12,450 --> 00:01:18,990
So using the position utility, we can position items very easily in a parent container.

18
00:01:18,990 --> 00:01:26,160
So to do that, first of all, let's modify this so it has some style to it.

19
00:01:26,160 --> 00:01:36,370
So I do some in line store obviously recommended for proper website to do this using classes and IDs,

20
00:01:36,780 --> 00:01:37,860
the background color.

21
00:01:37,880 --> 00:01:44,970
I'm going to put a grey just so you can see the boundaries of this parent element for a height of the

22
00:01:44,970 --> 00:01:50,060
pixels the whitford's set by the fact they should call twelve.

23
00:01:50,360 --> 00:01:51,090
That's fine.

24
00:01:51,120 --> 00:01:51,990
So there we go.

25
00:01:52,410 --> 00:02:01,140
To actually use this as a position utility, we need to put position that relative to our other position,

26
00:02:01,590 --> 00:02:07,650
parent classes as well, like absolute and static carfare default we provided and you can see all the

27
00:02:07,650 --> 00:02:08,460
different ones.

28
00:02:08,700 --> 00:02:10,920
Relative is the one I like.

29
00:02:10,920 --> 00:02:14,430
And if we are obviously depending on what you want, feel free to experiment.

30
00:02:14,760 --> 00:02:20,670
If we want to put a say, an object is going to draw a square in the top.

31
00:02:20,670 --> 00:02:21,120
Right.

32
00:02:21,600 --> 00:02:28,230
We just put whatever we were doing and did, for example, for a class of.

33
00:02:29,990 --> 00:02:38,780
Let me do it without this, let me just put the style and the style is going to have a width of 40 pixels

34
00:02:42,350 --> 00:02:45,260
out of 40 pixels,

35
00:02:48,640 --> 00:02:54,700
a background color of red, the four reloads.

36
00:02:54,740 --> 00:02:58,340
If this is what we get, you want a position in the top, right?

37
00:02:58,670 --> 00:03:07,880
We put a cloth and we need to put position that absolutely clear, position it directly on top does

38
00:03:07,990 --> 00:03:08,660
zero.

39
00:03:08,840 --> 00:03:15,820
That means at the top like that, the damage is going to be all the way to the right and we see the

40
00:03:15,830 --> 00:03:17,130
bottom there on left.

41
00:03:17,540 --> 00:03:25,270
I think this is all the way anchored to there is always going to be there and we can do something similar.

42
00:03:26,190 --> 00:03:33,130
And let's see if we have one for the center or center will just put bottom dash 50.

43
00:03:33,140 --> 00:03:36,820
So it's going to be 50 percent up from the bottom, right.

44
00:03:36,830 --> 00:03:37,650
That's 50.

45
00:03:37,670 --> 00:03:42,150
So from the right, 50 percent, they go always in the center.

46
00:03:43,190 --> 00:03:48,980
And if for the final one, want on the bottom left, we just bottom does zero.

47
00:03:51,440 --> 00:03:54,510
We put left to zero.

48
00:03:55,430 --> 00:03:56,090
There you go.

49
00:03:56,120 --> 00:03:59,100
It's in the bottom left and is always going to be there.

50
00:03:59,390 --> 00:04:05,120
The Lock said there are more classes for position as you can see and feel free to experiment.

51
00:04:05,120 --> 00:04:07,020
And you know.

52
00:04:07,990 --> 00:04:13,660
You use a different number, as you can see, more than the number that I've shown you and you can send

53
00:04:13,660 --> 00:04:17,590
to elements as whites that are just using them like this.

54
00:04:17,620 --> 00:04:19,090
So feel free to check that out.

55
00:04:19,270 --> 00:04:21,190
Here are some real world example.

56
00:04:21,190 --> 00:04:26,680
If you want to have some of notification thing over a button, you I say use case where you might actually

57
00:04:26,680 --> 00:04:27,580
be in position.

58
00:04:27,700 --> 00:04:30,130
And here they never want some sort of progress.

59
00:04:30,140 --> 00:04:35,950
But this is centered vertically and also into the left and right as well.

60
00:04:36,310 --> 00:04:37,170
So that's it.

61
00:04:37,170 --> 00:04:39,750
If you have any questions, feel free to pump me a message.

62
00:04:39,760 --> 00:04:43,330
And as usual, I look forward to seeing you in the next video.