Paginación Bootstrap 5

Paginación básica

Si su sitio web tiene muchas páginas, es posible que desee agregar algún tipo de paginación a cada página.

Para crear una paginación básica, agregue .pagination Añadir clase a <ul> elemento. Luego agregar .page-item a cada <li> elemento, y agregar .page-link Añadir clase a <li> cada enlace de

Ejemplo

<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="#">Página siguiente</a></li>
</ul>

Prueba personal

Estado activo

.active Clase para resaltar la página actual:

Ejemplo

<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="#">Página siguiente</a></li>
</ul>

Prueba personal

Estado de inhabilitado

.disabled Clase para enlaces no clicables:

Ejemplo

<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="#">Página siguiente</a></li>
</ul>

Prueba personal

Tamaño de la paginación

Los bloques de paginación también pueden ajustarse a un tamaño mayor o menor:

Por favor, agregue la clase para bloques más grandes .pagination-lg o para agregar bloques más pequeños .pagination-sm Clase:

Ejemplo

<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="#">Página siguiente</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="#">Página siguiente</a></li>
</ul>

Prueba personal

Alineación de paginación

Utilice las clases de utilidad para cambiar la alineación de la paginación:

Ejemplo

Por defecto (alineación izquierda)
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
Alineación central
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
Alineación derecha
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Prueba personal

Pan de molde (Breadcrumbs)

Otra forma de paginación es el pan de molde:

.breadcrumb y .breadcrumb-item La clase especifica la posición actual de la página en la jerarquía de navegación:

Ejemplo

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotos</a></li>
  <li class="breadcrumb-item"><a href="#">Otoño de 2019</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Pekín</li>
</ul>

Prueba personal