Pagination

Indicate a series of related content exists across multiple pages.

React Bootstrap docs

Basic example

import Pagination from 'react-bootstrap/Pagination'

{/* Basic example */}
<Pagination>
  <Pagination.Item>Prev</Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>Next</Pagination.Item>
</Pagination>

Render dynamically

import Pagination from 'react-bootstrap/Pagination'

{/* Render page links dynamically */}
let active = 3
let items = []
for (let number = 1; number <= 5; number++) {
  items.push(
    <Pagination.Item key={number} active={number === active}>
      {number}
    </Pagination.Item>
  )
}

const dynamicPaginaion = (
  <>
    <Pagination>
      <Pagination.Item>Prev</Pagination.Item>
      {items}
      <Pagination.Item>Next</Pagination.Item>
    </Pagination>
  </>
)

render(dynamicPaginaion)

With icons

import Pagination from 'react-bootstrap/Pagination'

{/* Pagination with prev / next icons */}
<Pagination>
  <Pagination.Item>
    <i className='fi-chevron-left'></i>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <i className='fi-chevron-right'></i>
  </Pagination.Item>
</Pagination>

{/* Pagination with prev / next icons + text */}
<Pagination>
  <Pagination.Item>
    <i className='fi-chevron-left me-sm-2'></i>
    <span className='d-none d-sm-inline'>Prev</span>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <span className='d-none d-sm-inline'>Next</span>
    <i className='fi-chevron-right ms-sm-2'></i>
  </Pagination.Item>
</Pagination>

Sizing

import Pagination from 'react-bootstrap/Pagination'

{/* Large size */}
<Pagination size='lg'>
  <Pagination.Item>
    <i className='fi-chevron-left'></i>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <i className='fi-chevron-right'></i>
  </Pagination.Item>
</Pagination>

{/* Normal size */}
<Pagination>
  <Pagination.Item>
    <i className='fi-chevron-left'></i>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <i className='fi-chevron-right'></i>
  </Pagination.Item>
</Pagination>

{/* Small size */}
<Pagination size='sm'>
  <Pagination.Item>
    <i className='fi-chevron-left'></i>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <i className='fi-chevron-right'></i>
  </Pagination.Item>
</Pagination>

Light version

import Pagination from 'react-bootstrap/Pagination'

{/* Pagination: light version */}
<Pagination className='pagination-light'>
  <Pagination.Item>
    <i className='fi-chevron-left me-sm-2'></i>
    <span className='d-none d-sm-inline'>Prev</span>
  </Pagination.Item>
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Item active>{2}</Pagination.Item>
  <Pagination.Item>{3}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>
    <span className='d-none d-sm-inline'>Next</span>
    <i className='fi-chevron-right ms-sm-2'></i>
  </Pagination.Item>
</Pagination>