Bootstrap pagination

<!--Pagination -->
<nav class="my-4">
    <ul class="pagination pagination-circle pg-blue mb-0">

        <!--First-->
        <li class="page-item disabled"><a class="page-link" ripple-radius>First</a></li>

        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" ripple-radius aria-label="Previous">
                <span aria-hidden="true">«</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">»</span>
                <span class="sr-only">Next</span>
            </a>
        </li>

        <!--First-->
        <li class="page-item"><a class="page-link">Last</a></li>

    </ul>
</nav>
<!--/Pagination -->

        

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 pg-blue">
    <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 pg-blue">
        <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>