WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Pagination


In this chapter we discuss of Pagination

Basic Pagination

When web site have many of pages we can sort of pagination to each page.

A basic pagination in Bootstrap work on:

We can create a basic pagination,by adding this code .pagination class to an <ul> element:

Example

<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>
Try it Yourself »

Active State

The active state mean you are surfing current page:

We can add class .active:

Example

<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>
Try it Yourself »

Disabled State

A disabled link cannot be clicked:

Add class .disabled if a link for some reason is disabled:

Example

<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 class="disabled"><a href="#">5</a></li>
</ul>
Try it Yourself »

Pagination Sizing

Pagination blocks can also be sized to a larger size or a smaller size:

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

Example

<ul class="pagination pagination-lg">
  <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>

<ul class="pagination pagination-sm">
  <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>
Try it Yourself »