Which are the classes used for pagination in Bootstrap4 ?
Last Updated :
10 Mar, 2022
In this article, we will know the various classes used for the Pagination in Bootstrap 4, along with understanding their implementations through the examples.
Pagination allows us to navigate different pages on a website. Bootstrap provides us with different classes to enable pagination in a webpage. We can use the .pagination class inside a list tag to add pagination to our webpage.
Syntax:
<ul class="pagination">
<li class="page-item"> Content </li>
</ul>
The pagination can be done in the following ways:
- Basic Pagination
- Sizing Pagination
- Disabled Pagination
- Active Pagination
- Alignment in pagination
We will explore all the ways for creating the pagination in Bootstrap 4 & understand them in a sequence.
Basic Pagination: It is the basic form to use pagination, the syntax is as follows:
Syntax:
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Basic Pagination Classes:
- .pagination: This class can be used inside the <ul> tag to specify the pagination on a webpage.
- .page-item: This class can be used inside the <li> tag to specify the page item on a webpage.
- .page-link: This class can be used inside the <a> tag to specify the page link on a webpage.
Example: This example describes the use of the Basic Pagination in Bootstrap 4.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>
Pagination classes in Bootstrap 4
</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Example of Basic pagination</h3>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">4</a>
</li>
<li class="page-item">
<a href="#" class="page-link">5</a>
</li>
<li class="page-item">
<a href="#" class="page-link">6</a>
</li>
<li class="page-item">
<a href="#" class="page-link">7</a>
</li>
<li class="page-item">
<a href="#" class="page-link">8</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</body>
</html>
|
Output:
Basic pagination
Sizing pagination: Sizing pagination is used to provide pagination of different sizes to the webpage. There are mainly three types of sizes we can provide to pagination are given below:
Syntax:
<ul class="pagination-sm">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Pagination Sizing Classes:
- .pagination: It provides the default sized pagination to the webpage.
- .pagination-sm: It provides the small-sized pagination to the webpage.
- .pagination-lg: It provides the large-sized pagination to the webpage.
Example: This example describes the use of the Pagination with different sizing in Bootstrap 4.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>
Pagination classes in Bootstrap 4
</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Example of Sized pagination</h3>
<h4>Normal sized pagination</h4>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
<h4>Small sized pagination</h4>
<ul class="pagination pagination-sm">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
<h4>Large sized pagination</h4>
<ul class="pagination pagination-lg">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</body>
</html>
|
Output:
Sized pagination
Disabled pagination: The .disabled class is used to disable the functionality that has to be performed by any element while clicking on it. It is mainly used to disable the functionality of the “Previous” and “Next” buttons on the page. The disabled class uses the CSS “pointer-events: none” property to disable the clickable functionality.
Syntax:
<ul class="pagination disabled">
<li class="page-item active">
<a href="#" class="page-link"></a>
</li>
</ul>
Example: This example describes the use of the Pagination Disabled state in Bootstrap 4.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>
Pagination classes in Bootstrap 4
</title>
</head>
<body>
<h2>Welcome to GFG!</h2>
<h3>Example of Disable pagination</h3>
<ul class="pagination">
<li class="page-item disabled">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</body>
</html>
|
Output:
Disabled pagination
Active pagination: The .active class can be added to the <li> tag to highlight or specify the current page that is visible on the web page.
Syntax:
<ul class="pagination">
<li class="page-item active">
<a href="#" class="page-link"></a>
</li>
</ul>
Example: This example describes the use of the Pagination Active state in Bootstrap 4.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>
Pagination classes in Bootstrap 4
</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Example of Active pagination</h3>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</body>
</html>
|
Output:
Active pagination
Alignment in the pagination: This class is used to specify and justify the content to the center and right of the page. It uses the following syntax and classes for this purpose:
Syntax:
<ul class="pagination justify-content-center">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Pagination Alignment Classes:
- .justify-content-center: It is used to align the content to the center of the display width.
- .justify-content-end: It is used to align the content to the right of the display width.
Example: This example describes the use of the Pagination Alignment Classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>
Pagination classes in Bootstrap 4
</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Example of Pagination Alignment</h3>
<br>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</body>
</html>
|
Output:
aligned page
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...