Paginación Bootstrap4

En el desarrollo de páginas web, si el contenido es demasiado extenso, normalmente se aplica paginación.

Bootstrap 4 puede implementar el efecto de paginación de manera muy sencilla.

Para crear una paginación básica, puedes<ul>añadir en el elemento.paginationla clase. Luego en<li>añadir en el elemento.page-itemla clase,<li>añadir en la etiqueta <a> del elemento.page-linkla clase:

Ejemplo

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

Pruébalo »

Estado de la página actual

La página actual puede usar.activela clase para resaltar:

Ejemplo

<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 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="#">Next</a></li> </ul>

Pruébalo »

Enlaces de paginación no clicables

.disabledLa clase puede hacer que los enlaces de paginación no sean clicables:

Ejemplo

<ul class="pagination"> <li class="page-item disabled"><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>

Pruébalo »

Tamaño de visualización de la paginación

Se pueden configurar los elementos de paginación en diferentes tamaños.

.pagination-lgLa clase establece los elementos de paginación con fuente grande,.pagination-smLa clase establece los elementos de paginación con fuente pequeña:

Ejemplo

<ul class="pagination pagination-lg"> <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> <ul class="pagination pagination-sm"> <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>

Pruébalo »

Navegación de migas de pan

.breadcrumby.breadcrumb-itemLa clase se utiliza para configurar la navegación de migas de pan:

Ejemplo

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul>

Pruébalo »

Alineación de la paginación

Puedes utilizar clases de utilidad para establecer la alineación de la paginación:

Ejemplo

<!--Por defecto (izquierda)--> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Centrado--> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Derecha--> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>

Pruébalo »
Otras extensiones