Pagination
Overview
Use pagination to indicate a series of related content exists across multiple pages.
Default
- Add the classes
qg-previous
andqg-next
to the previous and next buttons. - Refer to the Bootstrap pagination documentation for more implementation information.
- A parent
<div>
with a class ofpagination-container
is required on each pagination instance for Google Analytics tracking.
Code
<div class="pagination-container"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li> <li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a></li> </ul> </nav> </div> <div class="pagination-container"> <nav aria-label="Page navigation example"> <ul class="pagination flex-wrap"> <li class="page-item disabled"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item active"><a class="page-link" href="#">5 <span class="sr-only">(current)</span></a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item"><a class="page-link" href="#">10</a></li> <li class="page-item"> <a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a></li> </ul> </nav> </div> <div class="pagination-container"> <nav aria-label="Page navigation example"> <ul class="pagination flex-wrap"> <li class="page-item"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(current)</span></a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item disabled"><a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a> </li> </ul> </nav> </div>