English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basics Tutorial

Bootstrap Plugins

Bootstrap Pagination

This chapter will explain the pagination features supported by Bootstrap. Pagination is an unordered list, Bootstrap handles pagination in the same way as other interface elements.

Pagination (Pagination)

The following table lists the classes provided by Bootstrap for handling pagination.

ClassDescriptionExample code
.paginationAdd this class to display pagination on the page.
<ul>
　　<li><a href="#">«</a>/a></li>
　　<li><a href="#">1</a></li>
　　......
</ul>
.disabled, .activeYou can customize the links by using .disabled to define non-clickable links by using .active to indicate the current page.
<ul>
　　<li><a href="#">«</a>/a></li>
　　<li><a href="#">1<span>(current)</<span></a></li>
　　......
</ul>
.pagination-lg, .pagination-smUse these classes to get items of different sizes.
<ul>.../ul>
<ul>.../ul>
<ul>.../ul>

Default pagination

The following examples demonstrate the class discussed in the table above .pagination Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Default pagination</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a>/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>/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

Page status

The following examples demonstrate the class discussed in the table above .disabled, .active Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Page status</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><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>/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

Page size

The following examples demonstrate the class discussed in the table above .pagination-* Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Page size</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pagination pagination-lg">
	<li><a href="#">«</a>/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>/a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a>/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>/a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a>/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>/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

Pagination (Pager)

If you want to create a simple pagination link to provide navigation for users, you can do so through pagination. Like pagination links, pagination is also an unordered list. By default, the links are centered. The table below lists the classes that Bootstrap handles for pagination.

ClassDescriptionExample code
.pagerAdd this class to get pagination links.
<ul>
　　<li><a href="#">Previous/a></li>
　　<li><a href="#">Next/a></li>
</ul>
.previous, .nextUse class .previous Align the links to the left, using .next Align the links to the right.
<ul>
　　<li><a href="#">← Older</a>/a></li>
　　<li><a href="#">Newer →</a>/a></li>
</ul>
.disabledAdd this class to disable the corresponding button.
<ul>
　　<li><a href="#">← Older</a>/a></li>
　　<li><a href="#">Newer →</a>/a></li>
</ul>

Default pagination

The following examples demonstrate the class discussed in the table above .pager Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Default pagination/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pager">
	<li><a href="#">Previous/a></li>
	<li><a href="#">Next/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

Aligned links

The following examples demonstrate the class discussed in the table above .previous, .next Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Aligned links in pagination/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pager">
	<li class="previous"><a href="#">← Older</a>/a></li>
	<li class="next"><a href="#">Newer →</a>/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

Status of pagination

The following examples demonstrate the class discussed in the table above .disabled Usage:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Status of pagination</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</head>
<body>
<ul class="pager">
	<li class="previous disabled"><a href="#">← Older</a>/a></li>
	<li class="next"><a href="#">Newer →</a>/a></li>
</ul>
</body>
</html>
Test to see ‹/›

The results are as follows:

More examples of pagination

ClassDescriptionExample
.pagerA simple pagination link, aligned to the center.Try It
.previousButton style for the previous page button in .pager, aligned to the leftTry It
.nextButton style for the next page button in .pager, aligned to the rightTry It
.disabledDisabled LinksTry It
.paginationPagination LinksTry It
.pagination-lgLarger Pagination LinksTry It
.pagination-smSmaller Pagination LinksTry It
.disabledDisabled LinksTry It
.activeCurrent Page Link StyleTry It
Bootstrap TagsBootstrap Breadcrumb Navigation