Bootstrap pagination


Bootstrap pagination : Pagination basically content divided in an organized manner. If have a lot of data and you want to show that using links(url) by dividing them into small pieces, pagination is the best way to display them by using the links to individual page. You can also add different types of pagination sizes as per your need by adding the classes – .pagination-lg and .pagination-sm.


Bootstrap pagination:

 
<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>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>

Demo »

Bootstrap pagination Example

Bootstrap pagination

Following states are Available in bootstrap pagination.

1. Active State.

2. Disabled State.

Bootstrap pagination : Active State

Active state shows which page currently active. .active class is used to show the active state.Active link will be highlighted with background color.

 
<ul class="pagination">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="active"><a href="#">3(Active)</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>

Demo »

Bootstrap pagination Active State

Bootstrap pagination : Disabled State

Disabled State makes the link disabled means that link will not be clickable. .disabled class is used to show the disabled state. This can be useful when you want to prevent user to click the link in the pagination.

 
<ul class="pagination">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="disabled"><a href="#">3(Disabled)</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>

Demo »

Bootstrap Pagination Disabled Example

For more sizes you can also use the following class in the pagination.

Bootstrap pagination : Larger size

For large size .pagination-lg class is used. If you want larger pagination button size you can use the .pagination-lg class. Below example shows the large pagination. To try the large pagination just click try and edit code to see out.

  <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>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>

Demo »

Bootstrap  large pagination Example

Bootstrap pagination : Smaller size

For Smaller size the class .pagination-sm is used. If want smaller pagination use .pagination-sm to create smaller pagination button. Below is an example which shows the smaller pagination than default pagination button size. You can try it to see the output also you can edit code online to try the pagination size.

 <ul class="pagination pagination-sm">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>

Demo »

Bootstrap  samll  pagination Example


Bootstrap pagination : Change Background Color


If You Want to change the background color of bootstrap pagination you can add following css to add background color.

 <ul class="pagination pagination-sm">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>
<style>
.pagination li a {
    background: #d14836;
    color: yellow;
}
</style>

Demo »

pagination color bootstrap

Bootstrap pagination : Rounded Pagination Style


If You Want rounded pagination you can add following css.

 <ul class="pagination pagination-sm">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>
<style>
.pagination li a {
   border-radius: 50% !important;margin: 0 6px;
}
</style>

Demo »

rounded pagination

Bootstrap pagination : Rounded Colored Pagination


You can simply decorate the rounded pagination with background color. Add the following css to make the background colored.

 <ul class="pagination pagination-sm">
      <li><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a> </li> 
</ul>
<style>
.pagination li a {
   border-radius: 50% !important;margin: 0 6px;
}
.pagination li a {
    background: yellow;
}
</style>

Demo »

The above code will produce the following beautiful output –
rounded colored pagination

Learn More With Us :

Bootstrap Pager


Advertisements

Add Comment

📖 Read More