Pagination

A set of presentational components for building pagination UI.

Example

Result

Loading...

Live Editor

import Pagination from 'react-bootstrap/Pagination'; let active = 2; let items = []; for (let number = 1; number <= 5; number++) { items.push( <Pagination.Item key={number} active={number === active}> {number} </Pagination.Item>, ); } const paginationBasic = ( <div> <Pagination>{items}</Pagination> <br /> <Pagination size="lg">{items}</Pagination> <br /> <Pagination size="sm">{items}</Pagination> </div> ); render(paginationBasic);

import Pagination from 'react-bootstrap/Pagination';

let active = 2;
let items = [];
for (let number = 1; number <= 5; number++) {
  items.push(
    <Pagination.Item key={number} active={number === active}>
      {number}
    </Pagination.Item>,
  );
}

const paginationBasic = (
  <div>
    <Pagination>{items}</Pagination>
    <br />

    <Pagination size="lg">{items}</Pagination>
    <br />

    <Pagination size="sm">{items}</Pagination>
  </div>
);

render(paginationBasic);

More options

For building more complex pagination UI, there are few convenient sub-components for adding "First", "Previous", "Next", and "Last" buttons, as well as an "Ellipsis" item for indicating previous or continuing results.

Result

Loading...

Live Editor

import Pagination from 'react-bootstrap/Pagination'; function AdvancedExample() { return ( <Pagination> <Pagination.First /> <Pagination.Prev /> <Pagination.Item>{1}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{10}</Pagination.Item> <Pagination.Item>{11}</Pagination.Item> <Pagination.Item active>{12}</Pagination.Item> <Pagination.Item>{13}</Pagination.Item> <Pagination.Item disabled>{14}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{20}</Pagination.Item> <Pagination.Next /> <Pagination.Last /> </Pagination> ); } export default AdvancedExample;

import Pagination from 'react-bootstrap/Pagination';

function AdvancedExample() {
  return (
    <Pagination>
      <Pagination.First />
      <Pagination.Prev />
      <Pagination.Item>{1}</Pagination.Item>
      <Pagination.Ellipsis />

      <Pagination.Item>{10}</Pagination.Item>
      <Pagination.Item>{11}</Pagination.Item>
      <Pagination.Item active>{12}</Pagination.Item>
      <Pagination.Item>{13}</Pagination.Item>
      <Pagination.Item disabled>{14}</Pagination.Item>

      <Pagination.Ellipsis />
      <Pagination.Item>{20}</Pagination.Item>
      <Pagination.Next />
      <Pagination.Last />
    </Pagination>
  );
}

export default AdvancedExample;

API

Pagination

PageItem