1
00:00:01,330 --> 00:00:04,900
So now what I'm going to do is that I'm going to add pagination to this page.

2
00:00:04,900 --> 00:00:15,190
So here I'm going to hit by nation where the there will be a here a a bar that displays the number of

3
00:00:15,190 --> 00:00:23,230
pages, pages we have where each each page will contain a few products will contain like 16 or more

4
00:00:23,230 --> 00:00:23,710
products.

5
00:00:24,310 --> 00:00:26,080
So let me show you how you can do that.

6
00:00:26,080 --> 00:00:35,290
First of all, in the shop that each email at the bottom at the end above above the dev, above this

7
00:00:35,290 --> 00:00:44,260
level and below the last belongs the last product, which is this product, the last product below their

8
00:00:44,260 --> 00:00:46,390
last brought below their last product.

9
00:00:46,390 --> 00:00:49,780
Here I'm going to use both bootstrap to create that pagination.

10
00:00:50,680 --> 00:00:58,930
So I'm going to say here now and then I'm going to give this now first area label.

11
00:00:58,930 --> 00:01:07,000
I'm going to say area and label a label page.

12
00:01:09,360 --> 00:01:10,260
Navigation.

13
00:01:14,270 --> 00:01:15,140
Example.

14
00:01:17,360 --> 00:01:24,980
And then inside that nav bar, I'd say that nav, we want to use you on our unordered list and convert

15
00:01:24,980 --> 00:01:28,010
this unordered list into a pagination bar.

16
00:01:28,520 --> 00:01:32,420
So in order to do that, we need to use a bootstrap class called pagination.

17
00:01:32,540 --> 00:01:33,590
I'm going to say less.

18
00:01:33,590 --> 00:01:35,540
And then badging.

19
00:01:36,530 --> 00:01:37,100
Mission.

20
00:01:39,560 --> 00:01:47,210
And then I'm going to give this pagination margin top five and inside it I'm going to explain the number

21
00:01:47,210 --> 00:01:48,950
of links that we want.

22
00:01:48,950 --> 00:01:54,920
So I'm going to say Ally and for the first day I am going to give it a class, I'm going to a class

23
00:01:55,790 --> 00:01:58,790
and that class is going to be page item.

24
00:02:00,970 --> 00:02:02,810
And in saying this, we want links.

25
00:02:02,860 --> 00:02:04,210
So I'm going to here a link.

26
00:02:05,260 --> 00:02:08,400
And for this link we want to give it again a C+.

27
00:02:08,440 --> 00:02:09,370
I'm going to say class.

28
00:02:10,690 --> 00:02:13,600
And that class would be age link.

29
00:02:14,780 --> 00:02:15,760
Age link.

30
00:02:19,530 --> 00:02:21,470
And then I'm going to say here, if.

31
00:02:28,290 --> 00:02:33,780
And for the first link, I'm going to say previous or the first link here, I'm going to say previous

32
00:02:33,780 --> 00:02:40,680
here, previous, and then I'm going to copy this link up, pasted five times.

33
00:02:41,580 --> 00:02:48,960
I'm going to be here and here and here and here.

34
00:02:49,710 --> 00:02:51,570
And then the second one is going to be one.

35
00:02:52,590 --> 00:02:54,030
The second one is going to be here.

36
00:02:55,870 --> 00:02:56,260
One.

37
00:02:56,800 --> 00:02:59,950
And then the third one is going to be two and then three.

38
00:03:00,760 --> 00:03:03,290
And the last one is going to say mixed.

39
00:03:04,660 --> 00:03:08,910
Next, let me now save and let's head it over to the browser to test.

40
00:03:09,490 --> 00:03:15,190
So if the browser if I refresh, as you can see, we will have this pagination

41
00:03:18,130 --> 00:03:23,470
bar that's being displayed here at the bottom of the page, which looks amazing.

42
00:03:24,130 --> 00:03:33,820
And notice that it's, it's important to add it above the section and above the tab inside the just

43
00:03:33,820 --> 00:03:35,710
below for the last product.