Pagination is used to make a large number of links together.
Pagination is built with html elements to store many links in
a sequence.
In bootstrap pagination is used to make a responsive
pagination. Bootstrap allow to make it more attractive and easy to
used by using different classes.
Example of pagination
In this example an html element un-ordered list is used.
To make it a responsive pagination bootstrap class pagination
is used.
<ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
Output of above code
Icons in pagination
In this example there is a simple pagination using
class pagination. To make it more attractive
icons are added in the pagination.
<ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#"aria-label="Previous"><spanaria-hidden="true">«</span><spanclass="sr-only">Previous</span></a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#"aria-label="Next"><spanaria-hidden="true">»/span><spanclass="sr-only">Next</span></a></li></ul>
Output here...
Pagination size
In this example pagination-lg class is used
to make large sized pagination and pagination-sm
class is used to make small sized pagination.
<ulclass="pagination pagination-lg"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
<ulclass="pagination pagination-sm"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
Output of above code
Active and disabled state
In this example disabled class is used to
make a link disabled in the pagination and active
class is used to make an active link in the pagination.
<ulclass="pagination"><liclass="page-item disabled"><aclass="page-link"href="#">Previous</a></li><liclass="page-item active"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
