WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Pagination


.

Basic Pagination

In the web development process, if you encounter too much content, you will usually do paging.

Bootstrap can easily implement paging effects.

To create a basic pagination, go to <ul> Add the . Pagination class to the element. Then in <li> . Page-item class on the element´╝Ü:

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 current page can be highlighted using the .active class:

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 Class for setting breadcrumb navigation:

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 »