<ul class='pagination justify-content-center'>
<li class='page-item'><a class='page-link' href='#'>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'><a class='page-link' href='#'>Next</a></li>
</ul>
For the screen readers it is better to wrap the list within a NAV tag and add area-label. Here is the code.
<nav aria-label='There are 4 pages to Navigate'>
<ul class='pagination justify-content-center'>
<li class='page-item'><a class='page-link' href='#'>Previous</a></li>
.....
</ul>
</nav>
pagination pagination-sm | pagination | pagination pagination-lg |
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |