Paginado
El paginado se utiliza para dividir contenido o datos en varias páginas, con un control para navegar a la página siguiente o anterior.
Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.
Numerado
<nav aria-label="Ejemplo de paginado numerado inicial">
<ul class="pagination">
<li class="page-item" style="opacity: 0;">
<span class="page-link">
<span class="page-previous-icon" aria-hidden="true"></span>
<span class="page-previous-text">Anterior</span>
</span>
</li>
<li class="page-item active"><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 no-events"><span class="page-link">...</span></li>
<li class="page-item"><a class="page-link" href="#">10</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span class="page-next-text">Siguiente</span>
<span class="page-next-icon" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>Descriptivo
<div class="pagination">
<div class="page-navigation">
<div class="page-item">
<a class="btn page-link" href="#">
<span class="page-previous-icon" aria-hidden="true"></span>
<span class="page-next-text">Anterior</span>
</a>
</div>
<div class="page-item">
<a class="btn page-link" href="#">
<span class="page-next-text">Siguiente</span>
<span class="page-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>Estado deshabilitado
<div class="pagination">
<div class="page-navigation">
<div class="page-item disabled">
<a class="btn page-link" href="#">
<span class="page-previous-icon" aria-hidden="true"></span>
<span class="page-next-text">Anterior</span>
</a>
</div>
<div class="page-item disabled">
<a class="btn page-link" href="#">
<span class="page-next-text">Siguiente</span>
<span class="page-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>