Indicate a series of related content exists across multiple pages.
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>
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)
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>
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>
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>