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:

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

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.

 

      
1
      
2
      
3(Active)
      
4
      
5
      
6
      
7 
 

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.

 

      
1
      
2
      
3(Disabled)
      
4
      
5
      
6
      
7 
 

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.

  

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

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.

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

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.

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

Bootstrap pagination : Rounded Pagination Style

If You Want rounded pagination you can add following css.

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

Bootstrap pagination : Rounded Colored Pagination

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

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7 
 

The above code will produce the following beautiful output –

Learn More With Us :

Bootstrap Pager