Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
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 <nav> because 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 <nav> and we add here a class of pagination, that would be a great way to start by making 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 <li here a class of disabled, in other words, gray this out, because there is nothing that comes before the Search Results, and here for the number 1, if I add a class of active, in another words, this is the current page of results, there will be an indication that I am on page 1, and there's nothing before this. So once again, if I Save this and I Refresh this in Firefox, you'll see that it looks like my double caret here is grayed out, and when I run my mouse over it, looks like it's no longer clickable, likewise here for the number 1.
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.