Bootstrap 4 Pagination

Bootstrap 4 pagination indicates a series of related content exists across multiple web pages.

Pagination specifies the existence of a series of related content across multiple pages and it creates navigation between pages inside a web project.

Basic Pagination

To create pagination follow the following steps.

  • Step1:To create pagination,you have to add .pagination to the pagination container base class.
  • Step2:To create pagination,you have to add .page-item to the every page item or child element of parent container.

Example

General Syntax

		<nav aria-label="Page navigation example">
  <ul class="pagination">
    <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="#">Next</a></li>
  </ul>
</nav>
	  
Try It Now

Source Code

	
		<div class="container">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <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="#">Next</a></li>
    </ul>
  </nav>
</div>	
	
Try it yourself

Source Code : Output

Remember:In the above example .pagination is assigned to pagination parent container while .page-item to the every child element of container having class .pagination.

Disabled and active states

To disable any page item, you have to add .disabled class to any page item base class While to make any page item to active, you have to add .active to any page item base class.

Example

General Syntax

		<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">2</a>
    </li>
  </ul>
</nav>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <nav>
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="#"> <<< </a>
      </li>
      <li class="page-item disabled">
        <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item active">
        <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="#">>></a>
      </li>
    </ul>
  </nav>
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

Remember:In the above example .active is assigned to the page item base class to make page item active while .disabled to make page item disabled.

Bootstrap 4 Pagination Sizing

To control the pagination size,follow the follwing steps.

  • Smaller Size:To create smaller size page item, add .pagination-sm class to the pagination container base class having .pagination.
  • Large Size:To create large size page item, add .pagination-lg class to the pagination container base class having .pagination.

Pagination:Smaller Size

Pagination : Large Size

General Syntax

		<ul class="pagination pagination-lg"></ul>   
<ul class="pagination pagination-sm"></ul>
	  
Try It Now

Source Code

	
		<nav aria-label="Page navigation example">
  <ul class="pagination pagination-lg">
    <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="#">Next </a>
    </li>
  </ul>
</nav>	
	
Try it yourself

Source Code : Output

Remember:In the above example .pagination-sm is assigned to the pagination container base class to make smaller page item while .pagination-lg to make larger pagination item.

Pagination:Alignment

To change pagination alignment,you have to add flexbox utilities class to the pagination parent container base class.

Pagination is aligned left by default.Therefore to align it in the center of the web page,assign .justify-content-center to the pagination container base class having .pagination class.

Centered Pagination

General Syntax

		<ul class="pagination justify-content-end "></ul>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <nav class="">
    <ul class="pagination justify-content-end">
      <li class="page-item"><a href="#" class="page-link">Previous</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">3</a></li>
      <li class="page-item"><a href="#" class="page-link">Next</a></li>
    </ul>
  </nav>
</div>	
	
Try it yourself

Source Code : Output

Remember:In the above example .justify-content-center is assigned to the pagination container base class so that the pagination item aligned in the center of the web page.

Right Aligned Pagination

Since pagination is aligned by default left direction of the web page.To align it in the right side of the web page,assign .justify-content-end to the pagination container base class having .pagination.

Example

General Syntax

		<ul class="pagination justify-content-end"></ul>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <nav aria-label="Pagination">
    <ul class="pagination justify-content-end">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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="#">Next</a>
      </li>
    </ul>
  </nav>
</div>	
	
Try it yourself

Source Code : Output

Remember:In the above example .justify-content-end is assigned to the pagination container base class so that the pagination item aligned in the right side of the web page.

Our Tutorials

Bootstrap 4 Pagination
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS