Utilizor
HomeBootstrap 5 BasicsBS5 Pagination

BBS5 Pagination

Learn how to add pagination to your pages.

BS5 Pagination

Pagination is used to split content across multiple pages.

To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> and .page-link to each <a> inside <li>.

Active and Disabled States

  • .active indicates the current page.
  • .disabled disables a page link.

Breadcrumbs

Breadcrumbs indicate the current page's location within a navigational hierarchy. Use the .breadcrumb class.

Examples

Basic Pagination

html/css

Standard pagination structure.

<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>

Pagination States

html/css

Active and disabled items.

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

Breadcrumbs

html/css

Navigation breadcrumb trail.

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ul>

Test Your Knowledge

1. Which class is added to the <ul> element for pagination?

2. Which class marks a pagination item as the current page?