March 30th, 2020 
Prerana Kasar Bootstrap Pagination
Pagination means that when the multiple pages website are arranged in the multiple pages websites provide the numbers to the pages and navigations across the pages.
In bootstrap the pagination is created by the class .pagination to the <ul> tag.
Example: 1 Bootstrap Pagination Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Pagination Example</h2>
<ul class="pagination">
<li><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>
</ul>
</div>
</body>
</html>
Here we use the class .pagination to the <ul> to create the pagination.
Active Pagination
Active Pagination means that which is a highlight which page is opened by the user. Through the class .active, active page is showed.
Example: 2 Bootstrap Active Pagination Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Active Pagination Example</h2>
<ul class="pagination">
<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>
</ul>
</div>
</body>
</html>
Here we use the class .active to the <li> to create the active pagination. This class is applied on which tag that is opened by the user.
The below image shows that how the active page shows.
Disabled Pagination
Disabled Pagination means that the page is not able to open the page and this page is disabled. Through the class .disabled the page is disabled.
Example: 3 Bootstrap Disabled Pagination Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Active Pagination Example</h2>
<ul class="pagination">
<li class="disabled"><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>
</ul>
</div>
</body>
</html>
Here we use the class .disabled to the <li> to create the disabled pagination.
When you put the cursor on the pagination number and that page is not clickable and show red crossed circle.
Pagination Sizing
To increase or decrease the size of the block of pagination. The class .pagination-lg and .pagination-sm to sized the pagination.
Example: 4 Bootstrap Pagination Sizing Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progress Bar Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Large Pagination Example</h2>
<ul class="pagination pagination-lg">
<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>
</ul>
<h2>Normal Pagination Example</h2>
<ul class="pagination">
<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>
</ul>
<h2>Small Pagination Example</h2>
<ul class="pagination pagination-sm">
<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>
</ul>
</div>
</body>
</html>
The above code shows the sizing of the Pagination. Large, normal and Small are the three sizes of the pagination.
Breadcrumb
The breadcrumb is another form of secondary navigation and pagination. The class .breadcrumb is used to create the Breadcrumb and class . active is used to show the opened page of the breadcrumb.
Example: 5 Bootstrap Breadcrumb Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progress Bar Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Breadcrumb Example</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="active">Services</li>
</ul>
</div>
</body>
</html>
The above code shows the breadcrumb. When we define the class .active so you have removed the link tag than the .active class is worked.
Posted in 
Tags: 
