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?

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>

BBS5 Pagination

BS5 Pagination

Active and Disabled States

Breadcrumbs

Examples

Basic Pagination

Pagination States

Breadcrumbs

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?

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Pagination

BS5 Pagination

Active and Disabled States

Breadcrumbs

Examples

Basic Pagination

Pagination States

Breadcrumbs

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?