Rate these docs

React Bootstrap Pagination

React Pagination - Bootstrap 4 & Material Design

React Bootstrap pagination is a component used to indicate existance 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


        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
            <MDBRow>
              <MDBCol>
                <MDBPagination className="mb-5">
                  <MDBPageItem>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">Previous</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      1
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>2</MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>3</MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">Next</span>
                    </MDBPageNav>
                  </MDBPageItem>
                </MDBPagination>
              </MDBCol>
            </MDBRow>
          )
        }

        export default PaginationPage;
      

Working with icons

Looking to use an icon or symbol in place of text for some pagination links?


          import React from "react";
          import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

          const PaginationPage = () => {
            return (
              <MDBRow>
                <MDBCol>
                  <MDBPagination className="mb-5">
                    <MDBPageItem>
                      <MDBPageNav aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </MDBPageNav>
                    </MDBPageItem>
                    <MDBPageItem>
                      <MDBPageNav>
                        1
                      </MDBPageNav>
                    </MDBPageItem>
                    <MDBPageItem>
                      <MDBPageNav>2</MDBPageNav>
                    </MDBPageItem>
                    <MDBPageItem>
                      <MDBPageNav>3</MDBPageNav>
                    </MDBPageItem>
                    <MDBPageItem>
                      <MDBPageNav aria-label="Previous">
                        <span aria-hidden="true">&raquo;</span>
                      </MDBPageNav>
                    </MDBPageItem>
                  </MDBPagination>
                </MDBCol>
              </MDBRow>
            )
          }

          export default PaginationPage;
      

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.


        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
            <MDBRow>
              <MDBCol>
                <MDBPagination className="mb-5">
                  <MDBPageItem disabled>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">Previous</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem active>
                    <MDBPageNav>
                      1 <span className="sr-only">(current)</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>2</MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>3</MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">Next</span>
                    </MDBPageNav>
                  </MDBPageItem>
                </MDBPagination>
              </MDBCol>
            </MDBRow>
            )
        }

        export default PaginationPage;
      

Sizing

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


        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
            <MDBRow>
              <MDBCol>
                <MDBPagination size="lg">
                  <MDBPageItem>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span className="sr-only">Previous</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      1 <span className="sr-only">(current)</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      2
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      3
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      &raquo;
                    </MDBPageNav>
                  </MDBPageItem>
                </MDBPagination>
              </MDBCol>
            </MDBRow>
            )
        }

        export default PaginationPage;
      

        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
            <MDBRow>
              <MDBCol>
                <MDBPagination size="sm">
                  <MDBPageItem>
                    <MDBPageNav aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span className="sr-only">Previous</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      1 <span className="sr-only">(current)</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      2
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      3
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav>
                      &raquo;
                    </MDBPageNav>
                  </MDBPageItem>
                </MDBPagination>
              </MDBCol>
            </MDBRow>
          )
        }

        export default PaginationPage;
      

Shape

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


        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
            <MDBRow>
              <MDBCol>
                <h4 className="title my-5 text-left">Bootstrap MDBPagination</h4>
                <MDBPagination circle>
                  <MDBPageItem disabled>
                    <MDBPageNav className="page-link">
                      <span>First</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem disabled>
                    <MDBPageNav className="page-link" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span className="sr-only">Previous</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem active>
                    <MDBPageNav className="page-link">
                      1 <span className="sr-only">(current)</span>
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      2
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      3
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      4
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      5
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      &raquo;
                    </MDBPageNav>
                  </MDBPageItem>
                  <MDBPageItem>
                    <MDBPageNav className="page-link">
                      Last
                    </MDBPageNav>
                  </MDBPageItem>
                </MDBPagination>
              </MDBCol>
            </MDBRow>
            )
        }

        export default PaginationPage;
      

Colors


        import React from "react";
        import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";

        const PaginationPage = () => {
          return (
          <MDBRow>
            <MDBCol>
              <h4 className="title my-5 text-left">MDBPagination color</h4>
              <MDBPagination color="blue">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="red">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="teal">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="dark">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="bluegrey">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="amber">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="purple">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>

              <MDBPagination color="darkgrey">
                <MDBPageItem disabled>
                  <MDBPageNav aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem active>
                  <MDBPageNav>
                    1 <span className="sr-only">(current)</span>
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    2
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    3
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    4
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    5
                  </MDBPageNav>
                </MDBPageItem>
                <MDBPageItem>
                  <MDBPageNav>
                    &raquo;
                  </MDBPageNav>
                </MDBPageItem>
              </MDBPagination>
            </MDBCol>
          </MDBRow>
          )
        }

        export default PaginationPage;
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

React Bootstrap Pagination - API

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


Imports

In order to use Pagination component make sure you have imported proper modules first.


      import React from 'react';
      import { MDBPagination, MDBPageItem, MDBPageLink } from 'mdbreact';
    

API Reference: Pagination Properties

The table below shows the configuration options of the MDBPagination component.

Name Type Default Description Example
size String Changes size of pagination componetn. Choose from lg | sm <MDBPagination size="lg" />
circle Boolean false Changes shape of pagination buttons to circular <MDBPagination circle />
className String Sets custom classes <MDBPagination className="customClass" />
color String blue Changes default pagination buttons color; available values: [blue, red, teal, dark-grey, dark, blue-grey, amber, purple] <MDBPagination color="red" />
tag String ul Changes default Pagination tag <MDBPagination tag="ol" />

API Reference: PageItem Properties

The table below shows the configuration options of the MDBPageItem component.

Name Type Default Description Example
active Boolean false Sets active state of the button <MDBPageItem circle />
className String Sets custom classes <MDBPageItem className="customClass" />
disabled Boolean false Disables Item from being clicked <MDBPageItem disabled />
tag String li Changes default tag <MDBPageItem tag="li" />