The concept behind the Pagination component of Bootstrap involves depicting a series of connected links that holds some related contents. It is built using an HTML tag to get a close look over connected series of links. 

 

You can use this component within the nav tag so that the screen readers can switch to other tags that are in series. Additionally, Pagination is represented with the help of icons and can be aligned using center, vertical or horizontal alignments. 

 

The disabled states and the activated states can be added within pagination to know which links are unclickable and which are activated.

 

For Example,

 <nav aria-label="Pagination Example">

  <ul class="pagination">

    <li class="page-item"><a class="page-link" href="#">forward</a></li>

    <li class="page-item"><a class="page-link" href="#">first</a></li>

    <li class="page-item"><a class="page-link" href="#">second</a></li>

    <li class="page-item"><a class="page-link" href="#">third</a></li>

    <li class="page-item"><a class="page-link" href="#">backwardt</a></li>

  </ul>

</nav>

 

See Bootstrap5 Pagination Example with differnt sizes and align center and right side to the page

 

How to align the pagination example

 

Subscribe For Daily Updates