Pagination

    A set of presentational components for building pagination UI.



    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);
    Press esc to disable tab trapping

    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.

    <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>;
    Press esc to disable tab trapping

    API

    Paginationview source file

    import Pagination from 'react-bootstrap/Pagination'
    NameTypeDefaultDescription
    size
    'sm' | 'lg'

    Set's the size of all PageItems.

    bsPrefix required
    string
    		'pagination'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    PageItemview source file

    import PageItem from 'react-bootstrap/PageItem'
    NameTypeDefaultDescription
    active
    boolean
    		false

    Styles PageItem as active, and renders a <span> instead of an <a>.

    activeLabel
    string
    		'(current)'

    An accessible label indicating the active state..

    disabled
    boolean
    		false

    Disables the PageItem