Paginação Bootstrap 5

Paginação básica

Se seu site tiver muitas páginas, você pode querer adicionar alguma paginação a cada página.

Para criar paginação básica, adicione .pagination Classe adicionada a <ul> elemento. Em seguida, adicione .page-item a cada <li> elemento, e adicione .page-link Classe adicionada a <li> cada link da:

Exemplo

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Anterior página</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="#">Próxima página</a></li>
</ul>

Experimente pessoalmente

Estado ativo

.active Classe para "destacar" a página atual:

Exemplo

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Anterior página</a></li>
  <li class="page-item"><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="#">Próxima página</a></li>
</ul>

Experimente pessoalmente

Estado desativado

.disabled Classe para links não clicáveis:

Exemplo

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Anterior página</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="#">Próxima página</a></li>
</ul>

Experimente pessoalmente

Tamanho da paginação

O bloco de paginação pode ser ajustado para maior ou menor tamanho:

Por favor, adicione a classe para bloco maior .pagination-lg ou para adicionar bloco menor .pagination-sm Classe:

Exemplo

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Anterior página</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="#">Próxima página</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Anterior página</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="#">Próxima página</a></li>
</ul>

Experimente pessoalmente

Alinhamento da paginação

Use as classes utilitárias para alterar a alinhamento da paginação:

Exemplo

<!-- Padrão (alinhado à esquerda) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Alinhado ao centro -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Alinhado à direita -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Experimente pessoalmente

Pão ralado (Breadcrumbs)

Outra forma de paginação é o pão ralado:

.breadcrumb e .breadcrumb-item A classe define a posição atual da página na hierarquia de navegação:

Exemplo

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotos</a></li>
  <li class="breadcrumb-item"><a href="#">Outono de 2019</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Pequim</li>
</ul>

Experimente pessoalmente