Hello, in this bootstrap four video, we're going to show you pagination, which provides pagination links for your website, which has multi page layout. So if I just go onto one, our social network, which is vented Ko, check it out. This allows you to nonnamous li vent. But if we just scroll down, we have our pagination right here. So we got our multi page content. clicked on one of the links, if I click on number 10, which is the last page takes me there, highlighting and as you can see, I can't go any further.

So this is essentially what we're going to be constructing. To do it. First of all, we need to start off with a nav. So put a nav right here. Somebody else elements are so many components within bootstrap that use a noun, verb, you So, take a class, we're going to pull up unordered list inside. And the unordered list takes a class of pagination.

And inside here, it contains a list items. Each. Each one of these are list items. So the first one is going to be the back arrow, this back button to do that input list item is not an image or anything like that. It's all handled using code. So if I put inside here, h ref equals true.

I'm gonna make do hash. I'm not gonna make any of the button, go anywhere, cuz that's gonna be specific to your website, because you might have some jQuery, some Ajax or some PHP, you're just going to another page. That's going to be dependent on what you're doing. I'm going to put area dash label Equals previous. Inside here, we're gonna have two spans. The first one is gonna have area dash hidden equals true.

And inside here we're gonna have ampersand and a qu o semi colon. Don't worry, you won't print any of their ID or print out the arrows that we saw before. It's gonna copy and paste that actually didn't read need to compensate for that and delete pretty much everything. This is gonna have class equals s r dash only. So this is just for screen recorders. Inside here, we're gonna put pre vs. We're going to copy and paste this and this is now going to be the Next Page button.

So we're going to change this to next. gonna change this to also this left and right. And for screen readers we're going to put next. And in between here we put the list items, which are our numbers that have to be numbers that mean letters. They can even be words if you want. Generally speaking, if you're gonna have a few pagination items, if you start putting words in there, it doesn't look very good, but you can, it's totally up to you for a list item, and inside, keep it all on one line because there is nowhere near as much code as the this one in a breath, hey tref again, not gonna make it go anywhere because that's specific to your website.

Gonna make it just stay on this page inside him. Put the number one copy, paste this a few times to do 345678 910 now if we save that, go to our website refresh, there you go. We have our pagination. Like I said, they don't go anywhere at the moment and we're not going to make them go anywhere because that's specific to your website. But what I want to show you is disabled and active, these disabled active states are used, like so this is disabled now, I can't select it and it shows this little red button. And that's because I'm on the last page and this one is now active because I'm on that page.

And to do this really simple, what we're going to do is make the previous button disabled cuz we're going to make it so we're on the first page class. They bought, you can actually pre class for disabled on one deed if you really want it if your website dictates our needs. And what we're going to do pre class of active, no, just refresh, and there we go, we have our stop sign. And this is now active. The next thing we're going to show you, is sois. In.

So, you know, I'll copy and paste this so you can see the difference in sizing. So we'll keep the normal one, and we're going to create two more. The first size we're going to show you is large to do that way where you've got the pagination class, add another class of pagination dash Lj, and I think you guessed it for the small size. Let's do the same before pagination, that FM save, refresh and as you can see, we have a larger pagination system and they say mauler pagination system. So that's it really for the basics of pagination. There is something called pages as well, but we'll cover that in a separate video.

So check that out. You'll be in this series. If you have any questions, feel free to post them on sonar learning Dakota, UK for slash question dot php. There'll be a link in the description to that. Please rate, comment and subscribe as it really does help us understand what you really want from our videos. And as usual, thank you for watching and I hope you have a great day.