56 - Componente : pagination

Para mostrar un paginador de datos muy común en sitios web Bootstrap 4 nos provee de una clase llamada "pagination" que debemos asignársela a una lista no ordenada de HTML.

Las clases que debemos utilizar son:

  • pagination (se aplica a un "ul")
  • page-item (se aplica a cada "li")
  • page-link (se aplica a cada "a")

Veamos en un ejemplo como implementamos la componente de paginación:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
  </div> 
</body>
</html>

En el navegador tenemos:

bootstrap 4 pagination page-item page-link

Podemos mostrar los enlaces más grandes o más pequeño dependiendo si le agregamos las clases "pagination-sm" o "pagination-lg":

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
    <hr>
    <ul class="pagination pagination-sm">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
    <hr>
    <ul class="pagination  pagination-lg">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
  </div> 
</body>
</html>

En el navegador tenemos:

bootstrap 4 pagination page-item page-link pagination-sm pagination-lg

Para indicar cual página está activa debemos agregar la clase "active" a un "li":

      <li class="page-item active"><a class="page-link" href="#">2</a></li>

Alineamiento de la barra de paginación

Podemos alinear la barra de paginación agregando alguna de estas tres clases al elemento "ul":

  • justify-content-center
  • justify-content-start
  • justify-content-end 
<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <ul class="pagination justify-content-end">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
    <hr>
    <ul class="pagination pagination-sm justify-content-center">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
    <hr>
    <ul class="pagination  pagination-lg justify-content-start">
      <li class="page-item"><a class="page-link" href="#"><</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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">></a></li>
    </ul>
  </div> 
</body>
</html>

En el navegador tenemos:

bootstrap 4 pagination page-item page-link pagination-sm pagination-lg justify-content-start justify-content-center justify-content-end

Ejecutar Ejemplo

Retornar