How to use Bootstrap pagination

Overview

Do you enjoy seeing the pagination on some websites? In this shot, we'll learn to style our pagination links using Bootstrap.

What is pagination?

Pagination are those numbered links we find either below a webpage or on top of a webpage. They are used to select pages between pages of a website.

How to create pagination using Bootstrap?

To create pagination using Bootstrap, we basically use two (2) HTML elements, the unordered list <ul> ,<a> and the <li> . The <ul> should have a class attribute of pagination and it should wrap all the <li>. Each <li> would have an <a> element where the href will seat.

Example

Let's look at the code example:

Explanation

• Line 15: We add the pagination class to the <ul> HTML element and this <ul> wraps every other <li> . The pagination bootstrap class styles the <ul> element. We can also increase or reduce the size by adding the pagias nation-sm for small-sized paginated link and pagination-lg for large-sized paginated links.

• Lines 16 to 19: We put our <li><a href="your link">Link name</a></li> and our pagination has a new style.