コンポーネント

ボタン、ドロップダウン、入力フォーム、ナビゲーション、アラートなどのコンポーネント。

現在翻訳中です。お待ちください。

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Contents

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>

Disabled and active states

Links are customizable for different circumstances. Use .disabledfor unclickable links and .activeto indicate the current page.

<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></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">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.

<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
</ul>
</nav>

Sizing

Fancy larger or smaller pagination? Add .pagination-lgor .pagination-smfor additional sizes.

<nav>
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It’s great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

Alternatively, you can align each link to the sides:

<nav>
<ul class="pager">
<li class="pager-prev"><a href="#">Older</a></li>
<li class="pager-next"><a href="#">Newer</a></li>
</ul>
</nav>

Optional disabled state

Pager links also use the .disabledclass.

<nav>
<ul class="pager">
<li class="pager-prev disabled"><a href="#">Older</a></li>
<li class="pager-next"><a href="#">Newer</a></li>
</ul>
</nav>