Pagination

A set of presentational components for building pagination UI.

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.

API

Pagination

import Pagination from 'react-bootstrap/Pagination' Copy import code for the Pagination component
Name Type Default Description
size
'sm' | 'lg'

Set's the size of all PageItems.

bsPrefix
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.

PageItem

import PageItem from 'react-bootstrap/PageItem' Copy import code for the PageItem component
Name Type Default Description
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

href
string
onClick
function

A callback function for when this component is clicked

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/pagination/