Reactstrap Pagination

Bootstrap pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Learn how to create nice looking pagination using these Bootstrap pagination examples to indicate a series of related content exists across multiple pages and to navigate through pages easily.

Example

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="Page navigation example">
        <Pagination>
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <i className=" fa fa-angle-left"></i>
              <span className=" sr-only">Previous</span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <i className=" fa fa-angle-right"></i>
              <span className=" sr-only">Next</span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

Colors

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <Pagination
        className="pagination-primary"
        listClassName="pagination-primary"
      >
        <PaginationItem className="active">
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            4
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            5
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            6
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            7
          </PaginationLink>
        </PaginationItem>
      </Pagination>
      <Pagination
        className="pagination-info"
        listClassName="pagination-info"
      >
        <PaginationItem>
          <PaginationLink
            aria-label="Previous"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            <span aria-hidden={true}>
              <i aria-hidden={true} className="ni ni-bold-left"></i>
            </span>
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem className="active">
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            4
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
            5
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink
            aria-label="Next"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            <span aria-hidden={true}>
              <i aria-hidden={true} className="ni ni-bold-right"></i>
            </span>
          </PaginationLink>
        </PaginationItem>
      </Pagination>
      <div className="pagination-container justify-content-center">
        <Pagination
          className="pagination-success"
          listClassName="pagination-success"
        >
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-double-left"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className="active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              4
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              5
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-double-right"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </div>
      <div className="pagination-container justify-content-center">
        <Pagination
          className="pagination-warning"
          listClassName="pagination-warning"
        >
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-left"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className="active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              4
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              5
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-right"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </div>
      <div className="pagination-container justify-content-center">
        <Pagination
          className="pagination-danger"
          listClassName="pagination-danger"
        >
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-left"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className="active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              4
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              5
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-right"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </div>
      <div className="pagination-container justify-content-center">
        <Pagination
          className="pagination-secondary"
          listClassName="pagination-secondary"
        >
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-left"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              4
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className="active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              5
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-right"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </div>
      <div className="pagination-container justify-content-center">
        <Pagination
          className="pagination-default"
          listClassName="pagination-default"
        >
          <PaginationItem>
            <PaginationLink
              aria-label="Previous"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-left"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className="active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              4
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              5
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink
              aria-label="Next"
              href="#pablo"
              onClick={(e) => e.preventDefault()}
            >
              <span aria-hidden={true}>
                <i aria-hidden={true} className="fa fa-angle-right"></i>
              </span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </div>
    </>
  );
}

export default Example;

Disabled and active states

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="...">
        <Pagination>
          <PaginationItem className=" disabled">
            <PaginationLink
              href="#pablo"
              onClick={(e) => e.preventDefault()}
              tabindex="-1"
            >
              <i className=" fa fa-angle-left"></i>
              <span className=" sr-only">Previous</span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className=" active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2 <span className=" sr-only">(current)</span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              <i className=" fa fa-angle-right"></i>
              <span className=" sr-only">Next</span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

Sizing

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

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="...">
        <Pagination size="lg">
          <PaginationItem className=" disabled">
            <PaginationLink
              href="#pablo"
              onClick={(e) => e.preventDefault()}
              tabindex="-1"
            >
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className=" active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="...">
        <Pagination size="sm">
          <PaginationItem className=" disabled">
            <PaginationLink
              href="#pablo"
              onClick={(e) => e.preventDefault()}
              tabindex="-1"
            >
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className=" active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

Alignment

Change the alignment of pagination components with flexbox utilities.

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="Page navigation example">
        <Pagination
          className="justify-content-center"
          listClassName=" justify-content-center"
        >
          <PaginationItem className=" disabled">
            <PaginationLink
              href="#pablo"
              onClick={(e) => e.preventDefault()}
              tabindex="-1"
            >
              <i className=" fa fa-angle-left"></i>
              <span className=" sr-only">Previous</span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className=" active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              <i className=" fa fa-angle-right"></i>
              <span className=" sr-only">Next</span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

import React from "react";

// reactstrap components
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function Example() {
  return (
    <>
      <nav aria-label="Page navigation example">
        <Pagination
          className="justify-content-center"
          listClassName=" justify-content-end"
        >
          <PaginationItem className=" disabled">
            <PaginationLink
              href="#pablo"
              onClick={(e) => e.preventDefault()}
              tabindex="-1"
            >
              <i className=" fa fa-angle-left"></i>
              <span className=" sr-only">Previous</span>
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              1
            </PaginationLink>
          </PaginationItem>
          <PaginationItem className=" active">
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              3
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#pablo" onClick={(e) => e.preventDefault()}>
              <i className=" fa fa-angle-right"></i>
              <span className=" sr-only">Next</span>
            </PaginationLink>
          </PaginationItem>
        </Pagination>
      </nav>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.