The Pagination Component in Bootstrap 4

If your website or blog contains many pages and you want to display title, short description and thumbnail image in home, category or tag pages then pagination is the way of display a specific number of posts/pages e.g. 5, 10, 15 and giving users the option to navigate to the next or previous page.

Demo1 Demo2 Demo3 Demo4

Similarly, if you have a long web page with say 2000+ words, you may divide that single page into multiple pages and let users navigate via pagination component.

The Bootstrap 4 has built-in pagination component that can be created by using a few CSS classes.

How to create pagination using Bootstrap 4

The recommended way is using the wrapper <nav> element for identifying it as the navigation component and using HTML list elements with .pagination built-in class for creating the pagination. See an example with the code below:

See online demo and code

So you have to use following classes for creating Bootstrap 4 pagination:

• In the main <ul>, use the .pagination class
• The <li> is given the .page-item class
• The link tag <a> inside the <li> is given .page-link
• You should use the aria-label in the <nav> element to define the purpose of pagination component.

A demo of creating active state for current page number

Just use the .active class for making the current page number stand out from the others. You will use the .active class in the <li> element as shown in the example below:

See online demo and code

Using the disable class example

If a user is navigating the link number 1 in pagination component then you may want to disable the “Previous” link. Similarly, if pagination ends at 7 (as in above demos), then making Next link disabled as the user is at page number 7 makes sense.

For implementing that, use the Bootstrap 4 .disable class in the <li> tag that you require to disable. In the following demo, I have used this in the ‘Next’ <li>:

See online demo and code

How to override the background color of active state?

You may want using some other color than the default blue color for the active state of pagination.

By overriding the built-in .page-item.active .page-link classes, you may override the default blue color of the active state of the current page number.

See the following example where I used the red background color for the active number and yellow for border color:

See online demo and code

The following CSS is used in the <style> section. You must place this after the reference of Bootstrap 4 CSS file:

The same markup is used as in above example.

Customizing the disabled state example

Similarly, you may customize the disabled state of the link by overriding the built-in class. The classes that you need to use are:

.page-item.disabled .page-link

See the example below where I used the same markup as in above two examples. The default disable color which is light grey border and white background is changed to dark grey border color with the light grey background. Have a look:

See online demo and code

The CSS in style section:

Customizing the entire pagination component example

Finally, you may customize the entire pagination component as well by using a few more CSS classes that override the default properties.

In this example, I have changed the normal state of page numbers, active number, disabled link and hover/focus state of the page numbers. Visit the demo page for the live preview and grabbing the CSS classes used:

See online demo and code

The CSS used for this demo:

Dealing with the sizes of pagination

Bootstrap 4 has built-in classes to deal with the size of pagination component. In all above examples, we used the normal sized pagination. You may also create large and small sized pagination component by using:

• pagination-lg (for large size)
• pagination-sm (for small size)

Use any of these classes in the <ul> element with .pagination class. For example:

<ul class=”pagination pagination-sm”>

See the following demo where you may see the difference among the normal, large and small sized pagination:

See online demo and code

The markup for this demo:

You can see the complete code on the demo page that includes custom CSS.

How to change the pagination alignment?

You may use the flexbox utilities for changing the alignment of pagination component. For example, to align pagination centrally, use the .justify-content-center class.

For aligning right or end of content, use the .justify-content-end class.

In the following demo, I showed three different alignments for pagination, so you may compare easily:

See online demo and code

The code:

Using icons in place of Next / Previous texts example

You may also use icons in place of text in the pagination. For example, showing arrows for next and previous texts.

In the following example, I used simple code and font-awesome icons in two pagination components.

See online demo and code

The markup for font-awesome icons:

You may see the complete code on the example page with CDN link for the font-awesome library.