Hello, in this bootstrap four video we're going to cover pages pages allow you to implement a simple pagination with just back and forward buttons. To do this, it's really simple, you just need to do a nap now has no class at all. in sight, you need to do an on ordered list. This has a class of pager. Inside this we need to list items. One list item for the previous bottom which will be on the left and the other list item is for the forward button which will be on the right so close this off.

The list item doesn't require any classes either. Let's do a h ref for this on going to do a hash so it doesn't go anywhere. And inside here you put the text that you want to display in your return song back. Luckily, I'm gonna put previous now we can simply copy and paste this. Changes to next, save that, go to a web browser refresh. There we go, we have some nice page buttons.

It's very common to use these instead of a more complex pagination system, which has the individual page numbers. This is very simple for blogs, magazines, that sort of stuff. You can also align these at the moment, they're just in the center, but you can make them float to little air floats, right. And to do this really simple, you need to add a class to the list item. Actually, you know what? I'm going to duplicate this so you can see the difference.

That's the best way to learn. So, for a class here, change this to pay jet dash prief prior to stuff a previous for another class here, class equals pager dash next, save that refresh. And there we go, these are now aligned to the left and the right of its parent container. So when we restart the browser, they'll come in as we the assuming your addition. So if you're increasing the size of the browser, then they'll go out. Optionally, you can also add a disabled state.

So this is copy and paste this Molly thinking, why would you won't want to disable it. For example, if you're on the first page, you don't want the user to be able to go back a page you want it disabled. And to do that, what we're going to do is simply add a class of disabled. And likewise, if you're on the last page, you don't want the user to be able to go any further because they can't. So you want it disabled. So it just helps with user experience and the flow of the web.

Site refresh. There we go. This is now grayed out where as this one is clickable. So that's it for pages. If you have any questions, feel free to post them on our education platform. So not learning Dakota, UK, forward slash question dot php.

There'll be a link in the description to that. There'll be another link in the description to the source code from this video. Please rate, comment and subscribe as it really does help us get our content out there. Plus he also helps us learn what you like about the video and what you don't like about the video. And as usual, thanks for watching, and I hope you have a great day.