Paginación Bootstrap5

En el proceso de desarrollo web, si el contenido es demasiado extenso, generalmente se realiza paginación.

Bootstrap 5 puede implementar la paginación de manera muy sencilla.

Para crear una paginación básica, se puede<ul>agregar en el elemento.paginationla clase. Luego, en<li>agregar en el elemento.page-itemla clase,<li>agregar 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 configurar el enlace de paginación como no clicable:

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 »

Alineación de la paginación

Se pueden usar clases de utilidad para configurar 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> <!--A la derecha--> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>

Pruébalo »

Migas de pan

.breadcrumby.breadcrumb-itemLa clase se usa 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 »
Otras extensiones