Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to customize links for pagination in Bootstrap?
Bootstrap is a well-known front-end framework that provides a set of tools and styles for developing flexible and mobile-friendly websites. In this article, we will be discussing pagination which is a Bootstrap component that allows you to divide the material into numerous pages and browse across them. Bootstrap pagination links are basic and straightforward by default, but you may alter them to match your design demands and make them more user-friendly.
Approaches
There are various techniques you may use to personalize Bootstrap pagination links. Here are several possibilities −
Using CSS
Using JavaScript
Let us look at each approach in detail with examples now.
Approach 1: Using `CSS`
The first approach to customize links for pagination in bootstrap is by using `CSS`. You may customize the pagination links to match your design using CSS. You may, for example, alter the text size, color, and background color of the links. To make the links more engaging, you may also add hover effects and transitions.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination label {
display: inline-block;
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination input[type="radio"] {
display: none;
}
.pagination input[type="radio"]:checked + label {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS-only Pagination</h1>
<div class="content"></div>
<div class="pagination">
<input type="radio" name="page" id="page1" checked>
<label for="page1">1</label>
<input type="radio" name="page" id="page2">
<label for="page2">2</label>
<input type="radio" name="page" id="page3">
<label for="page3">3</label>
</div>
</div>
</body>
</html>
Approach 2: Using `JavaScript`
The second approach to customize links for pagination in bootstrap is by using `JavaScript`.You may alter the JavaScript that controls the pagination links if you want more extensive pagination capabilities. You can, for example, apply custom logic to handle the display of links or to regulate the number of links displayed.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Pagination Example</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Pagination Example</h1>
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span ariahidden="true">«</span></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<!-- Include jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// Custom JavaScript for pagination
$(function() {
$('.pagination li').click(function() {
var $this = $(this);
if ($this.hasClass('active') || $this.hasClass('disabled')) {
return false;
}
$('.pagination li').removeClass('active');
$this.addClass('active');
return false;
});
});
</script>
</body>
</html>
Conclusion
Pagination is a frequent feature in online applications, and Bootstrap makes it simple to incorporate it into your project. Bootstrap has a simple pagination style by default, however, it may be customized with CSS or JavaScript.
If you want to change the design of the pagination links, you may utilize the built-in classes offered by Bootstrap. If you opt to personalize the pagination links using JavaScript, you may add event listeners to the links and change their look dynamically when clicked.
492 Views
