Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Basic example
d-inline-block Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const BasicPagination = () => {
return (
<>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item active>{3}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap d-inline-block" aria-label="...">
<Pagination>
<Pagination.Prev disabled>Previous</Pagination.Prev>
<Pagination.Item>{1}</Pagination.Item>
<Pagination.Item active>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination>
<Pagination.First /> //Switch to first page
<Pagination.Prev />
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Next />
<Pagination.Last /> //Switch to last page
</Pagination>
</nav>
</>
);
};
export default BasicPagination;
Custom pagination
Create fancy pagination using .custom-pagination modifier class.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const CustomPagination = () => {
return (
<Pagination className='custom-pagination'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
);
};
export default CustomPagination;
Rounded pagination
Use the .pagination-rounded modifier class to make custom pagination more rounded.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const RoundedPagination = () => {
return (
<Pagination className='custom-pagination pagination-rounded'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
);
};
export default RoundedPagination;
Filled pagination
Use the .pagination-filled modifier class to make filled pagination.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const FilledPagination = () => {
return (
<>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-filled'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-rounded pagination-filled'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
</>
);
};
export default FilledPagination;
Simple pagination
Fancy minimal simple style pagination? Create using .pagination-simple modifier class.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const SimplePagination = () => {
return (
<>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-simple'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-rounded pagination-simple'>
<Pagination.Prev >Previous</Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
</>
);
};
export default SimplePagination;
Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const WorkingWithIcons = () => {
return (
<>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-filled'>
<Pagination.Prev ><i className="ri-arrow-left-s-line" /></Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next ><i className="ri-arrow-right-s-line" /></Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap d-inline-block" aria-label="Page navigation example">
<Pagination className='custom-pagination pagination-rounded pagination-filled'>
<Pagination.Prev ><i className="ri-arrow-left-s-line" /></Pagination.Prev>
<Pagination.Item active>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item>{3}</Pagination.Item>
<Pagination.Ellipsis />
<Pagination.Item>{15}</Pagination.Item>
<Pagination.Next ><i className="ri-arrow-right-s-line" /></Pagination.Next>
</Pagination>
</nav>
</>
);
};
export default WorkingWithIcons;
Alignment
Use justify-content utility classes to align pagination - center, right & full justified.
import React from 'react';
import { Pagination } from 'react-bootstrap'
const Alignments = () => {
return (
<>
<nav className="pagination-wrap justify-content-center mb-3" aria-label="Page navigation example">
<Pagination>
<Pagination.Prev disabled>Previous</Pagination.Prev>
<Pagination.Item>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item >{3}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap justify-content-end mb-3" aria-label="Page navigation example">
<Pagination>
<Pagination.Prev disabled>Previous</Pagination.Prev>
<Pagination.Item>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item >{3}</Pagination.Item>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
<nav className="pagination-wrap justify-content-between" aria-label="Page navigation example">
<Pagination>
<Pagination.Prev>Previous</Pagination.Prev>
</Pagination>
<Pagination>
<Pagination.Item>{1}</Pagination.Item>
<Pagination.Item>{2}</Pagination.Item>
<Pagination.Item >{3}</Pagination.Item>
</Pagination>
<Pagination>
<Pagination.Next >Next</Pagination.Next>
</Pagination>
</nav>
</>
);
};
export default Alignments;
Pagination sm
Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.
import React from 'react'; import { Pagination } from 'react-bootstrap'
const SmallPagination = () => {
return ( <> <nav className="pagination-wrap d-inline-block" aria-label="Page navigation example"> <Pagination size="sm"> <Pagination.Prev >Previous</Pagination.Prev> <Pagination.Item>{1}</Pagination.Item> <Pagination.Item>{2}</Pagination.Item> <Pagination.Item active>{3}</Pagination.Item> <Pagination.Next >Next</Pagination.Next> </Pagination> </nav> <nav className="pagination-wrap d-inline-block" aria-label="..."> <Pagination size="sm" > <Pagination.Prev disabled>Previous</Pagination.Prev> <Pagination.Item>{1}</Pagination.Item> <Pagination.Item active>{2}</Pagination.Item> <Pagination.Item>{3}</Pagination.Item> <Pagination.Next >Next</Pagination.Next> </Pagination> </nav> <nav className="pagination-wrap d-inline-block" aria-label="Page navigation example"> <Pagination size="sm"> <Pagination.First /> {/Switch to first page /} <Pagination.Prev className="sr-only" /> <Pagination.Item active>{1}</Pagination.Item> <Pagination.Item>{2}</Pagination.Item> <Pagination.Item>{3}</Pagination.Item> <Pagination.Next className="sr-only" /> <Pagination.Last /> {/Switch to last page /} </Pagination> </nav> <nav className="pagination-wrap d-inline-block" aria-label="Page navigation example"> <Pagination size="sm" className='custom-pagination'> <Pagination.Prev >Previous</Pagination.Prev> <Pagination.Item active>{1}</Pagination.Item> <Pagination.Item>{2}</Pagination.Item> <Pagination.Item>{3}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{15}</Pagination.Item> <Pagination.Next >Next</Pagination.Next> </Pagination> </nav> </> ); };
export default SmallPagination; </Code>