Simple pagination, useful for search results.
Pagination
<nav class="pagination is-centered" role="navigation">
<ul class="pagination-list">
<li><strong>Page:</strong> </li>
<li><a class="pagination-link">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link">45</a></li>
<li><a class="pagination-link is-current">46</a></li>
<li><a class="pagination-link">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
<br>
<nav class="pagination is-centered" role="navigation">
<ul class="pagination-list">
<li><strong>Filter results:</strong> </li>
<li><a class="pagination-link">All</a></li>
<li><a class="pagination-link">People</a></li>
<li><a class="pagination-link is-current">Centres, Institutes and Groups</a></li>
<li><a class="pagination-link">Publications</a></li>
<li><a class="pagination-link">News</a></li>
<li><a class="pagination-link">Events</a></li>
<li><a class="pagination-link">Courses</a></li>
</ul>
</nav>The pagination component consists of several elements:
pagination-previousandpagination-nextfor incremental navigationpagination-listwhich displays page items:pagination-linkfor the page numberspagination-ellipsisfor range separators
- Use the
.is-centeredclass to centre the list
All elements are optional so you can compose your pagination as you wish.
For more information, read the official Bulma documentation for pagination.