Bootstrap 5 Learning Kit – Reference

Pagination

Numbers and text
                
                  Previous
1
2
3
Next

                
              
<nav aria-label="Search results pages">
  <ul class="pagination">
    <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><nav aria-label="Search results pages">
  <ul class="pagination">
    <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>

Numbers and icons
                
                  
                      
                        «
                      
                    
1
2
3

                      
                        »
                      
                    

                
              
<nav aria-label="Search results pages">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </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" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav><nav aria-label="Search results pages">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </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" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

Active and disabled items
                
                  Previous
1
2

                      
                        3 (current)
                      
                    

                      Next
                    

                
              
<nav aria-label="Search results pages">
  <ul class="pagination">
    <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 active" aria-current="page">
      <a href="#" class="page-link">
        3 <span class="visually-hidden">(current)</span>
      </a>
    </li>
    <li class="page-item disabled">
      <a href="#" class="page-link" tabindex="-1" aria-disabled="true">Next</a>
    </li>
  </ul>
</nav><nav aria-label="Search results pages">
  <ul class="pagination">
    <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 active" aria-current="page">
      <a href="#" class="page-link">
        3 <span class="visually-hidden">(current)</span>
      </a>
    </li>
    <li class="page-item disabled">
      <a href="#" class="page-link" tabindex="-1" aria-disabled="true">Next</a>
    </li>
  </ul>
</nav>

Active and disabled items without anchors

 elements for active and disabled page links:

<p><code><span></code> elements for active and disabled page links:</p>
<nav aria-label="Search results pages">
  <ul class="pagination">
    <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 active" aria-current="page">
      <span class="page-link">
        3 <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item disabled">
      <span class="page-link">Next</span>
    </li>
  </ul>
</nav>

<code></code> elements for active and disabled page links: <nav aria-label="Search results pages"> <ul class="pagination"> <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 active" aria-current="page"> 3 (current) </li> <li class="page-item disabled"> Next </li> </ul> </nav>

Sizing
                
                  Previous
1
2
3
Next

                
                
                  Previous
1
2
3
Next

                
                
                  Previous
1
2
3
Next

                
              
<nav aria-label="Search results pages">
  <ul class="pagination pagination-sm">
    <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>
<nav aria-label="Search results pages">
  <ul class="pagination">
    <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>
<nav aria-label="Search results pages">
  <ul class="pagination pagination-lg">
    <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><nav aria-label="Search results pages">
  <ul class="pagination pagination-sm">
    <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>
<nav aria-label="Search results pages">
  <ul class="pagination">
    <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>
<nav aria-label="Search results pages">
  <ul class="pagination pagination-lg">
    <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>

Alignment
                
                  Previous
1
2
3
Next

                
                
                  Previous
1
2
3
Next

                
              
<nav aria-label="Search results pages">
  <ul class="pagination justify-content-center">
    <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>
<nav aria-label="Search results pages">
  <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><nav aria-label="Search results pages">
  <ul class="pagination justify-content-center">
    <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>
<nav aria-label="Search results pages">
  <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>

Page Navigation:

Pagination

Numbers and text

Numbers and icons

Active and disabled items

Active and disabled items without anchors

Sizing

Alignment