Vue Bootstrap Pagination

Vue Pagination - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap pagination is a component used to indicate existence of a series of related content across multiple pages and enables navigation across them.

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. We use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

Basic example

To create a basic pagination, add the .pagination class to an ul element: 

        
            
        <template>
          <mdb-pagination circle>
            <mdb-page-item disabled>Previous</mdb-page-item>
            <mdb-page-nav prev disabled></mdb-page-nav>
            <mdb-page-item>1</mdb-page-item>
            <mdb-page-item>2</mdb-page-item>
            <mdb-page-item>3</mdb-page-item>
            <mdb-page-nav next></mdb-page-nav>
            <mdb-page-item>Last</mdb-page-item>
          </mdb-pagination>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

        
            
        <template>
          <mdb-pagination>
            <mdb-page-nav prev></mdb-page-nav>
            <mdb-page-item>1</mdb-page-item>
            <mdb-page-item>2</mdb-page-item>
            <mdb-page-item>3</mdb-page-item>
            <mdb-page-nav next></mdb-page-nav>
          </mdb-pagination>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Disabled and active states

Pagination links are customizable for different circumstances. Use disabled prop for links that appear un-clickable and active to indicate the current page.

        
            
        <template>
          <mdb-pagination>
            <mdb-page-nav prev disabled></mdb-page-nav>
            <mdb-page-item>1</mdb-page-item>
            <mdb-page-item active>2</mdb-page-item>
            <mdb-page-item>3</mdb-page-item>
            <mdb-page-nav next></mdb-page-nav>
          </mdb-pagination>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Sizing

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

        
            
          <template>
            <mdb-pagination lg>
              <mdb-page-nav prev></mdb-page-nav>
              <mdb-page-item>1</mdb-page-item>
              <mdb-page-item>2</mdb-page-item>
              <mdb-page-item>3</mdb-page-item>
              <mdb-page-nav next></mdb-page-nav>
            </mdb-pagination>
          </template>
        
        
    
        
            
          <script>
            import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
            export default {
              name: 'PageLoader',
              components: {
                mdbPagination,
                mdbPageItem,
                mdbPageNav                
              }
            }
          </script>
      
        
    
        
            
        <template>
          <mdb-pagination sm>
            <mdb-page-nav prev></mdb-page-nav>
            <mdb-page-item>1</mdb-page-item>
            <mdb-page-item>2</mdb-page-item>
            <mdb-page-item>3</mdb-page-item>
            <mdb-page-nav next></mdb-page-nav>
          </mdb-pagination>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Shape

The way pagination "feels" can be easily altered by changing its style from rectangular to circular. Simply add circle prop to the mdb-pagination component.

        
            
        <template>
          <mdb-pagination circle>
            <mdb-page-item disabled>First</mdb-page-item>
            <mdb-page-nav prev disabled></mdb-page-nav>
            <mdb-page-item active>1</mdb-page-item>
            <mdb-page-item>2</mdb-page-item>
            <mdb-page-item>3</mdb-page-item>
            <mdb-page-item>4</mdb-page-item>
            <mdb-page-item>5</mdb-page-item>
            <mdb-page-nav next></mdb-page-nav>
            <mdb-page-item>Last</mdb-page-item>
          </mdb-pagination>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Colors

To change the color of the pagination, for example, add the .pg-blue class to the ul element.

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

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

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

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

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

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

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

            <!--Pagination dark grey-->
            <mdb-pagination color="darkgrey">
              <mdb-page-nav prev></mdb-page-nav>
              <mdb-page-item active>1</mdb-page-item>
              <mdb-page-item>2</mdb-page-item>
              <mdb-page-item>3</mdb-page-item>
              <mdb-page-item>4</mdb-page-item>
              <mdb-page-item>5</mdb-page-item>
              <mdb-page-nav next></mdb-page-nav>
            </mdb-pagination>
            <!--/Pagination dark grey-->
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbPagination, mdbPageItem, mdbPageNav } from 'mdbvue';
          export default {
            name: 'PageLoader',
            components: {
              mdbPagination,
              mdbPageItem,
              mdbPageNav                
            }
          }
        </script>

Vue Pagination - API

In this section you will find advanced information about the Pagination component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
      <script>
        import { mdbPagination, mdbPageNav, mdbPageItem } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
tag String 'ul' Changes pagination's wrapper tag <mdb-pagination tag="ul" />
cirlce Boolean false Changes item style into circle <mdb-pagination cirlce />
lg Boolean false Changes pagination size <mdb-pagination lg />
sm Boolean false Changes pagination size <mdb-pagination sm />
color String 'blue' Changes item's color <mdb-pagination color="red" />