Sign in


Sign up


Bootstrap Pagination

Bootstrap pagination is a component used when content is divided into separate pages to display the page numbers and enable navigation between the pages.


<pagination circle>
  <page-item disabled>First</page-item>
  <page-nav prev disabled></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
  <page-item>Last</page-item>
</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>
  <page-nav prev></page-nav>
  <page-item>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
                
            

Disabled and active states

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

                
<pagination>
  <page-nav prev disabled></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
                
            

Pagination color

                        
<!--Pagination blue-->
<pagination color="blue">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination blue-->

<!--Pagination red-->
<pagination color="red">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination red-->

<!--Pagination teal-->
<pagination color="teal">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination teal-->

<!--Pagination dark-->
<pagination color="dark">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination dark-->

<!--Pagination blue grey-->
<pagination color="bluegrey">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination grey-->

<!--Pagination amber-->
<pagination color="amber">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination amber-->

<!--Pagination purple-->
<pagination color="purple">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination purple-->

<!--Pagination dark grey-->
<pagination color="darkgrey">
  <page-nav prev></page-nav>
  <page-item active>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-item>4</page-item>
  <page-item>5</page-item>
  <page-nav next></page-nav>
</pagination>
<!--/Pagination dark grey-->
                        
                        

Sizing

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

Large

                        
<pagination lg>
  <page-nav prev></page-nav>
  <page-item>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-nav next></page-nav>
</pagination>
                        
                        

Small

                            
<pagination sm>
  <page-nav prev></page-nav>
  <page-item>1</page-item>
  <page-item>2</page-item>
  <page-item>3</page-item>
  <page-nav next></page-nav>
</pagination>