Bootstrap pagination

Provide pagination links for your site or app.

Basic examples

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" ripple-radius 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" ripple-radius>1</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>2</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>3</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>4</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>5</a></li>
    <li class="page-item" >
      <a class="page-link" ripple-radius 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 .disabled for unclickable links and .active to indicate the current page.



<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" ripple-radius 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" ripple-radius>1 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item" ><a class="page-link" ripple-radius>2</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>3</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>4</a></li>
    <li class="page-item" ><a class="page-link" ripple-radius>5</a></li>
    <li class="page-item" >
      <a class="page-link" ripple-radius 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">«</span>
                <span class="sr-only">Previous</span>
            </span>
        </li>
        <li class="page-item active">
            <a class="page-link" ripple-radius>1 <span class="sr-only">(current)</span></a>
        </li> 
    </ul>
</nav>

Pagination color


<!--Pagination blue-->
<nav>
    <ul class="pagination pg-blue">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination blue-->

<!--Pagination red-->
<nav>
    <ul class="pagination pg-red">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination red-->

<!--Pagination teal-->
<nav>
    <ul class="pagination pg-teal">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination teal-->

<!--Pagination dark-->
<nav>
    <ul class="pagination pg-dark">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination dark-->

<!--Pagination blue grey-->
<nav>
    <ul class="pagination pg-bluegrey">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination grey-->

<!--Pagination amber-->
<nav>
    <ul class="pagination pg-amber">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination amber-->

<!--Pagination purple-->
<nav>
    <ul class="pagination pg-purple">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination purple-->

<!--Pagination dark grey-->
<nav>
    <ul class="pagination pg-darkgrey">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" ripple-radius>1</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>4</a></li>
        <li class="page-item"><a class="page-link" ripple-radius>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" ripple-radius aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination dark grey-->

Sizing

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



<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" ripple-radius 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" ripple-radius>1</a></li>
    <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
    <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
    <li class="page-item">
      <a class="page-link" ripple-radius 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" ripple-radius 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" ripple-radius>1</a></li>
    <li class="page-item"><a class="page-link" ripple-radius>2</a></li>
    <li class="page-item"><a class="page-link" ripple-radius>3</a></li>
    <li class="page-item">
      <a class="page-link" ripple-radius aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>