Bootstrap Pagination And Pager

100

Article

Bootstrappaginationandpager.rar

What is pagination?

Pagination links indicate that a series of related content exists across multiple pages
A large amount of pages are linked together in some relationship such such as search results or inboxes.

Pagination classes

.pagination
.active
.disabled
.pagination-lg
.pagination-sm
.breadcrumb

Basic pagination

If you have your own website that has lots of pages you should sort pagination
Use .pagination class in <ul> tag

Sample program for Basic pagination

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<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>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

That is the output for basic pagination

Working with icons

Looking to use an icon or symbol in place of text for some pagination links
Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

Sample program for working with icons

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<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>
<li><a href = "#">»</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output
Output

That is the output for working with icons

Active State

The active state shows what is the current page
.active class is used
Easily identify which page we are in

Sample program for Active state

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href="#">1</a></li>
<li class="active"><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 = "#">»</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

That is the output for Active state

The person worked in the second page

Disable State

Use of disable link cont able to un-clickable
.disable class is using

Sample program for Disable state

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the disable link

The fourth page will be disabled

Pagination Sizing

The pagination link has two links; one is large and small
.pagination-lg class is using large size
.pagination-sm class is using small size

Sample program for Pagination sizing

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class="pagination pagination-lg">
<li><a href = "#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href = "#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This output indicates two various sizes for pagination

Breadcrumbs

Another form for pagination is breadcrumbs
That comes under the single well format

Sample program for Breadcrumbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Insert</a></li>
<li><a href="#">mail</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output
Output

These are the pagination types and example programs and outputs

Bootstrap Pager

What is pager

The pager is an unordered list, it is also a similar to pagination
By default the links are centered

Types of pager classes

.pager
.previous
.next
.disable

Default pager

The pager default page is align in center of the page
You can link your web pages in this area
.pager class is used in the<ul> tag inside

Sample program for default pager

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pagination
</h1>
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output
Output

This is the output for default pager

Aligned Links

In this aligned link is fixed in the lift and right corner of the page
.previous and .next classes are used in the<li> tag inside

Sample program for Aligned links

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pager
</h1>
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output
Output

Disabled

In this disabled is used for un-clickable movements in the particular page or problem pages
.disabled class is used to disabled the given page

Sample program for Disable

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center page-header text-info">
Bootstrap Pager
</h1>
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Disabled</a></li>
<li class = "next"><a href = "#">Active →</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output
Output

In this output the disabled link is an un-clickable movement

Conclusion

I hope now you can understand how to use and create the Bootstrap Pagination and pager. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.

Up Next

Ebook Download

View all

Frontend Developer Interview

Read by 3 people

Download Now!

Learn

View all