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> |
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> |
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> |
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> |
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> |
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> |
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> |
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> |
The above code will produce the following beautiful output –
Learn More With Us :
Advertisements