Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Occasionally at the bottom of the page, there are many blogposts. A page with Search Results or a page of many products, you'll see a list of additional pages listed at the bottom. Think about the bottom of the Google Search Results page. Here I am on Google, if I do a Search for lynda.com, you'll see that I get a list of all kinds of stuff here that pertains to lynda.com, and then down here at the bottom, I have this long Goooooogle at the bottom which has a series of numbers plus the Next button.
If I go to the Next page of results and I scroll down to the bottom, again, I have a Previous and Next button down here, as well as the numbers. This is Pagination, specifically the numbers that are there in the middle as far as Bootstrap is concerned. The Next and Previous buttons are treated slightly differently, they're called Pager, and I am going to cover those in the next video. So let's take a look at how we might style something like those numbers down at the bottom of the screen in our Google Search Results. So here inside of Dreamweaver, I have a bulleted list, it's wrapped inside a of course, this is navigation that's there on the web page.
And if we just take a look at this right now inside of Firefox, you would not see a whole lot that was terribly interesting. It's a bulleted list with some numbers and some characters that point you in either direction. So how we can make this look a little bit more interesting? Well, of course, Bootstrap has some styles for dealing with something like this. So if we go to our numbers go horizontally on the page.
I'll just go ahead and Save that and preview that inside of Firefox. You'll see that I have a series of numbers that are now in boxes stretched out here on the page. Now if you noticed on the Google Results Page, we landed on one of the pages, and there was an indication of which page we are on. If we were on Page 1, for example, there would be nothing before that, so the number 1 might be grayed out and so might the double caret on the left side of this Pagination, and Bootstrap has a way of doing that as well.
So in Dreamweaver, if I add to this first
So be careful about that. Just because you use class of disabled doesn't necessarily mean that there's no link that exists on a item anymore, because if you take a look at the HTML, there is most certainly a link that appears there, and it is still clickable, even though it doesn't look like it. So one final thing I want to show you. You designers are probably wondering how you can make your pagination centered on the page. You are probably thinking about doing that with a custom style. There's no need to do that. Bootstrap does ship with the ability to center the pagination on the page.
What you need to do here is inside of the nav class of pagination, add the class of pagination-centered, and if you Save that and Refresh that inside of Firefox, you'll see that now your pagination centered on the page. The option also exists for right-aligned pagination. If you change this to pagination-right, you can make right-aligned pagination as well. So that's the story behind pagination and treatments for it. Remember, pagination usually comes out of a content management system or some kind of database-driven application at the bottom of a web page for tapping through things.
I am showing you examples here inside of Dreamweaver, so if you were to use this kind of pagination in your websites, you would of course need to hand code all of these links to separate HTML documents. It takes a lot of time. Pagination is really a widget that's best linked to something that has a database behind it where the pagination is generated out of the database. So it's not likely it's something that you would use on just a static HTML website. You're most likely going to see it used more often in something with the database behind it, like a content management system.
Get unlimited access to all courses for just $25/month.Become a member