How to create pagination in Bootstrap 4 ?
Last Updated :
02 Jun, 2023
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue.
Pagination is an element used to indicate the actuality of a series of affiliated content across multiple runners and enables navigation across them.
Introduction to Pagination: We utilize an enormous square of associated joins for our pagination, making joins hard to miss and effectively adaptable—all while giving huge hit regions. Pagination is worked with a list of HTML components so screen per user can report the number of accessible connections. Utilize a wrapping <nav> component to distinguish it as a routing area to screen per user and other assistive advances.
Also, as pages probably have more than one such route area, it’s prudent to give a clear aria-name to the <nav>. For instance, if the pagination part is utilized to explore between a bunch of list items, a proper name could be aria-label=”Search results pages”.
Example: In this example, we will create pagination in Bootstrap4.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="navigation example">
<ul class="pagination border-success">
<li><a class="page-link" href="#">Previous</a></li>
<li><a class="page-link" href="#">11</a></li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
<li><a class="page-link" href="#">14</a></li>
<li><a class="page-link" href="#">15</a></li>
<li><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</body>
</html>
|
Output:
Working with icons: Hoping to utilize a symbol or image instead of text for some pagination joins. Make certain to furnish legitimate screen per user support with aria ascribes and the .sr only
Example: In this example, we will work with icons for pagination.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#"
aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a class="page-link" href="#">11</a></li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
<li><a class="page-link" href="#">14</a></li>
<li><a class="page-link" href="#">15</a></li>
<li>
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output:
Disabled and Active States:
- Active: Pagination joins are adjustable for various conditions. Use .active to show the current page.
Example: In this example, we will use .active for showing the current page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="...">
<ul class="pagination">
<li>
<a class="page-link" href="#"
tabindex="-1">
Previous
</a>
</li>
<li><a class="page-link" href="#">11</a></li>
<li class="active">
<a class="page-link" href="#">12</a>
</li>
<li><a class="page-link" href="#">13</a></li>
<li class="active">
<li><a class="page-link" href="#">14</a></li>
<li class="active">
<li><a class="page-link" href="#">15</a></li>
<li class="active">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output:
- Disabled: While the .disabled class utilizes pointer-occasions: none to attempt to cripple the connection usefulness of <a>, that CSS property isn’t yet normalized and doesn’t represent the console route. Accordingly, you ought to consistently add tab index=”- 1″ on crippled connections and utilize custom JavaScript to completely incapacitate their usefulness.
Example: In this example, we will disable the page according to our requirements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item active">
<span class="page-link">
12
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output:
Sizing: Larger and Smaller: In this case, we will set the size of the pagination list.
Example: In this example, we will resize the pagination.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 2rem 0 0 2rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="larger">
<ul class="pagination pagination-lg">
<li class=" disabled">
<a class="page-link"
href="#"
tabindex="-1">11</a>
</li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
</ul>
</nav>
<nav aria-label="small">
<ul class="pagination pagination-sm">
<li class="disabled">
<a class="page-link"
href="#" tabindex="-1">11</a>
</li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
</ul>
</nav>
</body>
</html>
|
Output:
Alignment: In this case, we will change the alignment of pagination components with Flexbox.
Example: In this example, we will change the alignment of pagination.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 2rem 0 0 0;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#"
tabindex="-1">Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#"
tabindex="-1">Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...