Pagination example 1
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Pagination | |
| Description | Pagination across the card group examples | |
| Provider | Skin | |
| Note | The page numbers are ordinary wiki links. The current page is not a link. | |
| Reference | getbootstrap.com - pagination | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Pagination
This pagination links the six card group examples, as it would appear on the third one.
- Code
<ul class="pagination">
<li class="page-item">[[Card group example 2|<span class="page-link">Previous</span>]]</li>
<li class="page-item">[[Card group example 1|<span class="page-link">1</span>]]</li>
<li class="page-item">[[Card group example 2|<span class="page-link">2</span>]]</li>
<li class="page-item"><span class="page-link active">3</span></li>
<li class="page-item">[[Card group example 4|<span class="page-link">4</span>]]</li>
<li class="page-item">[[Card group example 5|<span class="page-link">5</span>]]</li>
<li class="page-item">[[Card group example 6|<span class="page-link">6</span>]]</li>
<li class="page-item">[[Card group example 4|<span class="page-link">Next</span>]]</li>
</ul>
- Result
Disabled link, small size and centered
On the first page, there is no previous page, so the link is disabled.
- Code
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item disabled"><span class="page-link">Previous</span></li>
<li class="page-item"><span class="page-link active">1</span></li>
<li class="page-item">[[Card group example 2|<span class="page-link">2</span>]]</li>
<li class="page-item">[[Card group example 3|<span class="page-link">3</span>]]</li>
<li class="page-item">[[Card group example 2|<span class="page-link">Next</span>]]</li>
</ul>
- Result
