La paginación en bootstrap 4 nos ayuda a navegar entre diferentes páginas cuando hay muchos elementos, como pueden ser posts.

Para ello tenemos que crear una lista ul (aunque tambien nos puede servir ol) con la clase pagination, que esta compuesta por elementos li con la clase page-item y cada elemento de la lista mantiene un enlace con la clase page-link, tal y como vemos aquí.

<ul class="pagination pagination-lg"> 			
    <li class="page-item"><a class="page-link" href="#">< Anterior</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 active"><a class="page-link" href="#">3</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">Siguiente ></a></li>
</ul>

Como vemos el 3 tiene la clase active lo cual hace que se diferencie del resto, siendo en la sección de contenido donde nos encontraríamos.

En el 4 elemento hemos añadido la clase disabled para que aparezca como no clickable.

En la lista podemos añadir las clases:

• pagination-lg: para que se vea más grande
• pagination-sm: para que se vea más pequeño

Migas de pan en bootstrap 4

De forma muy similar a la paginación podemos crear también las migas de pan, con las que el usuario puede saber en todo momento donde se encuentra.

Su uso es muy similar al de la paginación por eso lo ponemos aquí, vemos que tenemos que usar la clase breadcrumb y la clase breadcrumb-item para los elementos.

<ul class="breadcrumb">	
    <li class="breadcrumb-item"><a href="#">home</a></li>	
    <li class="breadcrumb-item"><a href="#">noticias</a></li>	
    <li class="breadcrumb-item"><a href="#">2018</a></li>
</ul>

Y aquí vemos los resultados.

Hay que tener en cuenta que estos elementos y su funcionalidad no tienen mucha lógica si no están construidos por medio de un lenguaje tipo php, donde se lean los datos desde la BBDD