Bootstrap 4 Paginations


Basic Paginations

When there are many pages on a website, those pages are divided by pagination. You must use the .pagination class to use it.

To create it, follow the steps below:

Example code

<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

Active State of Pagination

Active state means to denote the current page show. To use it, you need to put the .active class inside the <li> tag.

Example code

<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

Disable State of Pagination

The .disabled class is used to un-clickable pagination items. Just opposite side of active state.

Example code

<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

Pagination Sizes

The size of pagination shots can be increased or decreased in bootstrap. Use .pagination-lg to increase the size of pagination and .pagination-sm class to reduce.

Example code

<ul class="pagination pagination-lg">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

<ul class="pagination pagination-sm">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

Alignment Of Pagination

To change the alignment of pagination, you have to add .justify-content classes.

Example code

<!-- left alignment -->
<ul class="pagination justify-content-left">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
<!-- center alignment -->
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
<!-- right alignment -->
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link">Prev</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

Breadcrumbs

Breadcrumbs are another form of pagination. It is mainly used to show the location of the current page.

To use it, see the following steps:

Example code

<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">blog</a></li>
<li class="breadcrumb-item"><a href="#">css</a></li>
<li class="breadcrumb-item active">bootstrap</li>
</ul>