main_leaderboard, all: [728,90][970,90][320,50][468,60]

Bootstrap Pagination

Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

A basic pagination in Bootstrap looks like this:

• 1


• 2


• 3


• 4


• 5

To create a basic pagination, add the .pagination class to an <ul> element:

Active State

The active state shows what is the current page:

• 1


• 2


• 3


• 4


• 5

Add class .active to let the user know which page he/she is on:

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

Disabled State

A disabled link cannot be clicked:

• 1


• 2


• 3


• 4


• 5

Add class .disabled if a link for some reason is disabled:

Pagination Sizing

Pagination blocks can also be sized to a larger size or a smaller size:

• 1


• 2


• 3


• 4


• 5

• 1


• 2


• 3


• 4


• 5

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

Breadcrumbs

Another form for pagination, is breadcrumbs:

1. Home


2. Private


3. Pictures


4. Vacation

The .breadcrumb class indicates the current page's location within a
navigational hierarchy:

Test Yourself with Exercises!

Exercise 1 » 
Exercise 2 » 
Exercise 3 » 
Exercise 4 » 
Exercise 5 »

Complete Bootstrap Navigation Reference

For a complete reference of all navigation classes, go to our complete
Bootstrap Navigation Reference.