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:
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.
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.
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.
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.
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.
Bootstrap pagination : Rounded Pagination Style
If You Want rounded pagination you can add following css.
Bootstrap pagination : Rounded Colored Pagination
You can simply decorate the rounded pagination with background color. Add the following css to make the background colored.
The above code will produce the following beautiful output –