Navigate paged results with native Bootstrap pagination controls.
Use .pagination when a long result set is divided into discrete pages. Wrap the list in a labelled navigation region, keep Previous and Next at the edges, and mark the current page with aria-current="page" so assistive technology can identify the active position.
.pagination
aria-current="page"
Disable boundary controls when they cannot move, and include accessible labels for icon-only Previous, Next, and ellipsis items. Use an ellipsis only where skipped pages are intentional; do not hide nearby pages that help the user understand where they are in the range.
Match the density to the surrounding surface with Bootstrap size variants, and keep pagination close to the collection it controls. For tables or filtered lists, update the visible result range and disabled states whenever filtering changes the page count.
Use page numbers with Previous/Next and an ellipsis for long result sets.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">More pages</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav>
<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">More pages</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav>
Keep Previous disabled on the first page while remaining actions stay available.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link" role="link" aria-disabled="true" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></span> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav>
<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link" role="link" aria-disabled="true" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></span> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav>
Use compact and larger controls with Bootstrap size variants when the layout needs density.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34<div class="d-flex flex-column gap-3"> <nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> <nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
<div class="d-flex flex-column gap-3"> <nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> <nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item active" aria-current="page"> <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="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
Use the same page range, active state, and skipped-pages marker across Arabic and Hebrew RTL examples, with English as the LTR comparison.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<div dir="rtl"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="السابق"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">السابق</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">صفحات إضافية</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="التالي"><span class="d-none d-sm-inline">التالي</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
<div dir="rtl"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="السابق"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">السابق</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">صفحات إضافية</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="التالي"><span class="d-none d-sm-inline">التالي</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<div dir="rtl"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="הקודם"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">הקודם</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">עמודים נוספים</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="הבא"><span class="d-none d-sm-inline">הבא</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
<div dir="rtl"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="הקודם"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">הקודם</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">עמודים נוספים</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="הבא"><span class="d-none d-sm-inline">הבא</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<div dir="ltr"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">More pages</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
<div dir="ltr"> <nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"><i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i><span class="d-none d-sm-inline">Previous</span></a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item disabled"> <span class="page-link"><i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i><span class="visually-hidden">More pages</span></span> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"><span class="d-none d-sm-inline">Next</span><i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i></a> </li> </ul> </nav> </div>
For Bootstrap's source behavior and sizing variables, see the Bootstrap Pagination documentation.
No matching pages.
Restore the default appearance.