Sign in


Sign up


Bootstrap Pagination


<Pagination className="pagination-circle">
    <PageItem disabled>
        <PageLink className="page-link">
            <span>First</span>
        </PageLink>
    </PageItem>
    <PageItem disabled>
        <PageLink className="page-link" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span className="sr-only">Previous</span>
        </PageLink>
    </PageItem>
    <PageItem active>
        <PageLink className="page-link">
           1 <span className="sr-only">(current)</span>
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            2
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            3
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            4
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            5
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            &raquo;
        </PageLink>
    </PageItem>
    <PageItem>
        <PageLink className="page-link">
            Last
        </PageLink>
    </PageItem>
</Pagination>
                    

Basic example

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

                
<Pagination>
  <PageItem>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>
                
            

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

                
<Pagination>
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>
                
            

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.

                            
<Pagination>
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
</Pagination>
                            

Pagination color

                        
<Pagination className="pg-blue">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-red">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-teal">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-dark">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-bluegrey">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-amber">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-purple">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>

<Pagination className="pg-darkgrey">
  <PageItem disabled>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem active>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      4
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      5
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>
                        

Sizing

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

Large

                        
<Pagination className="pagination-lg">
  <PageItem>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>
                        

Small

                            
<Pagination className="pagination-sm">
  <PageItem>
    <PageLink className="page-link" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span className="sr-only">Previous</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      1 <span className="sr-only">(current)</span>
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      2
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      3
    </PageLink>
  </PageItem>
  <PageItem>
    <PageLink className="page-link">
      &raquo;
    </PageLink>
  </PageItem>
</Pagination>