React Bootstrap Pagination Component
Pagination with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap Pagination component from CoreUI to create accessible and responsive navigation between pages, including sizing, alignment, and icon support.
Overview of React Bootstrap Pagination#
The React Bootstrap Pagination component helps you build navigation for multi-page content, such as search results or article listings. It's based on semantic HTML with <ul> and <li> elements, ensuring accessibility and screen reader compatibility.
Wrap the component in a <nav> element and use a descriptive aria-label like aria-label="Search results pages" for clarity.
Using icons in pagination#
You can replace text in pagination buttons with icons or symbols. Make sure to include proper aria-labels for accessibility.
Disabled and active pagination items#
Use the disabled prop to indicate non-interactive items and the .active class to highlight the current page. CoreUI handles keyboard accessibility with tabindex="-1" and JS-based interaction disabling.
Pagination sizing#
Adjust the size of the React Bootstrap Pagination component with the size prop. Available values: lg (large), sm (small).
Pagination alignment#
Change pagination alignment using the align prop: "start", "center", or "end".
API reference#
Here’s the API reference for the React Bootstrap Pagination component: