Paginations

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>
                                      <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                      </a>
                                    </li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                      <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                      </a>
                                    </li>
                                  </ul>
                                </nav>

Disabled and active states

                                    
                                    <nav>
                                      <ul class="pagination">
                                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                        <li class="active"><a href="#">1 <span class="sr-only">(current)</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 previous/next arrows, to remove click functionality while retaining intended styles. 

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

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

                                
                                <nav><ul class="pagination pagination-lg">...</ul></nav>
                                <nav><ul class="pagination">...</ul></nav>
                                <nav><ul class="pagination pagination-sm">...</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.

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

Aligned links

Alternatively, you can align each link to the sides:

                                    
                                    <nav>
                                      <ul class="pager">
                                        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                                        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                                      </ul>
                                    </nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

                                    
                                    <nav>
                                      <ul class="pager">
                                        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                                        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                                      </ul>
                                    </nav>

Paginations Theme Colored

                                    
                                    <nav>
                                      <ul class="pagination theme-colored">
                                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                        ...
                                      </ul>
                                    </nav>

Pager Theme Colored

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

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

Paginations Dark

                                    
                                    <nav>
                                      <ul class="pagination dark">
                                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                        ...
                                      </ul>
                                    </nav>

Pager Dark

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

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