Categories: BOOTSTRAP

Bootstrap 4 Pagination with Example

Bootstrap Pagination: Pagination is one of the most common feature seen in web based application for managing large number of pages in a systematic way. Bootstrap has default pagination system characterized by specific design and html structure that we will study in this post
Even when you use Search Engines like Google, Bing or Yahoo after limited (10) searches it shows navigation below to showcase the next list of pages.

How to build Bootstrap 4 pagination?

Pagination in bootstrap 4 is built within nav element proceeded by ul (class=’pagination’) and li with class(.page-item) & anchor tag class (.page-link)accordingly. Each of these elements have respective CSS which imparts its user experience to the viewer respectively.

  <ul class="pagination">
    <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="#">5</a></li>
  </ul>

Try it Editor

If the page has more than one pagination than it is recommended to use descriptive ‘aria-label’ which differentiates between the paginations accordingly.

Bootstrap 4 pagination CSS

.pagination CSS is mainly defined as being display flex, list style none and border radius(.25rem)
.page-item CSS have specific round border for first and last items respectively with top-left and top-bottom values. Their active and disabled state are also given values with color and pointer difference mainly.
.page-link CSS has specific position, padding, margin, line height, color, background color with border. Link hover, focus and :not disabled property are also well defined. Value of Bootstrap Pagination Default Color : #007bff approx Dodge Blue is defined here which can be changed with Specific css values to match the layout.

.pagination
{display:-ms-flexbox;display:flex;padding-left:0;
list-style:none;border-radius:.25rem}

.page-link
{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}

.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}
.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
.page-link:not(:disabled):not(.disabled){cursor:pointer}

.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}
.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}

.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}
.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}
.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}

.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}
.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}
.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}

Bootstrap 4 pagination Size

There are three basic style in pagination with small(sm), default and large(lg) used to depict their sizes accordingly.

Bootstrap Pagination Small(.pagination-sm):Will make the size smaller than usual with special class being .pagination-sm.
Bootstrap Pagination Default(.pagination):Normal way is to use the specified .pagination class directly to the ul html structure for default size of pagination layout.
Bootstrap Pagination large(.pagination-lg):

This specific class will make the size a bit longer and giving user to highlight its use for that area.(.pagination-lg)

Try it Editor

Bootstrap 4 pagination Active & Disabled

There are two basic states that are defined as being active and disabled respectively. Here we are going to study their behaviour one by one.
Bootstrap pagination Active Example:By adding class active to the li element you can make the pagination highlight current page with active state which characterises with change in their color and background color respectively.

Bootstrap Pagination Active Class: .active is the class which you must add to the li element.
Bootstrap pagination active Color: Once you assign .active class the values of CSS change with #007bff becomes the background color while the color becomes normal #fff highlighting the vice versa change from default pagination.
Bootstrap pagination active Background Color:

With .active class Background becomes #007bff i.e. dodge blue approx.

Bootstrap Pagination Disabled Example:
With the addition of .disabled class the pagination item becomes dull grey and un-clickable with pointer-events: none.
In this editor find how these values are assigned with change in color and click behaviour

Try it Editor

Bootstrap 4 Pagination Centered

To make pagination take center position as a whole in the design then you need to use two new utility classes of d-flex and mx-auto that imparts Center position to the whole pagination layout respectively.

You can also add new utility class .justify-content-center on the ul structure that imparts centered position to the whole pagination accordingly.

Try it Editor

Bootstrap Pagination Example with large number of Pages(Many Pages)

When the number of pages high and you need to restrict the code to your choice of number, then there must be code to get it working accordingly. JavaScript is written to get this effect and thus limit the number of pagination when there are multiple pages accordingly. There are also plugin available which can do this things as per to control the layout of the page.

Try it Editor