React Bootstrap Pagination
React Pagination - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all
while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the
number of available links. We use a wrapping <nav> element to identify it as a navigation
section to screen readers and other assistive technologies.
Basic example
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<MDBPagination className="mb-5">
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
1
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>2</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>3</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">Next</span>
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
Working with icons
Looking to use an icon or symbol in place of text for some pagination links?
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<MDBPagination className="mb-5">
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
1
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>2</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>3</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">»</span>
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
Disabled and active states
Pagination links are customizable for different circumstances. Use disabled prop for links that
appear un-clickable and active to indicate the current page.
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<MDBPagination className="mb-5">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>2</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>3</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">Next</span>
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
Sizing
Fancy larger or smaller pagination? Add lg prop or sm for additional sizes.
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<MDBPagination size="lg">
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<MDBPagination size="sm">
<MDBPageItem>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
Shape
The way pagination "feels" can be easily altered by changing its style from rectangular to circular.
Simply add circle prop to the <MDBPagination> component.
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<h4 className="title my-5 text-left">Bootstrap MDBPagination</h4>
<MDBPagination circle>
<MDBPageItem disabled>
<MDBPageNav className="page-link">
<span>First</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem disabled>
<MDBPageNav className="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav className="page-link">
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
»
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav className="page-link">
Last
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
Colors
import React from "react";
import { MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow } from "mdbreact";
const PaginationPage = () => {
return (
<MDBRow>
<MDBCol>
<h4 className="title my-5 text-left">MDBPagination color</h4>
<MDBPagination color="blue">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="red">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="teal">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="dark">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="bluegrey">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="amber">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="purple">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
<MDBPagination color="darkgrey">
<MDBPageItem disabled>
<MDBPageNav aria-label="Previous">
<span aria-hidden="true">«</span>
<span className="sr-only">Previous</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem active>
<MDBPageNav>
1 <span className="sr-only">(current)</span>
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
2
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
3
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
4
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
5
</MDBPageNav>
</MDBPageItem>
<MDBPageItem>
<MDBPageNav>
»
</MDBPageNav>
</MDBPageItem>
</MDBPagination>
</MDBCol>
</MDBRow>
)
}
export default PaginationPage;
React Pagination - API
In this section you will find advanced information about the Pagination component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
Imports
In order to use Pagination component make sure you have imported proper modules first.
import { MDBPagination, MDBPageItem, MDBPageLink } from 'mdbreact';
API Reference: Pagination Properties
The table below shows the configuration options of the MDBPagination component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
size |
String | |
Changes size of pagination componetn. Choose from lg | sm |
<MDBPagination size="lg" /> |
circle |
Boolean | false |
Changes shape of pagination buttons to circular | <MDBPagination circle /> |
className |
String | |
Sets custom classes | <MDBPagination className="customClass" /> |
color |
String | blue |
Changes default pagination buttons color; available values: [blue, red, teal, dark-grey, dark, blue-grey, amber, purple] |
<MDBPagination color="red" /> |
tag |
String | ul |
Changes default Pagination tag | <MDBPagination tag="ol" /> |
API Reference: PageItem Properties
The table below shows the configuration options of the MDBPageItem component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
active |
Boolean | false |
Sets active state of the button | <MDBPageItem circle /> |
className |
String | |
Sets custom classes | <MDBPageItem className="customClass" /> |
disabled |
Boolean | false |
Disables Item from being clicked | <MDBPageItem disabled /> |
tag |
String | li |
Changes default tag | <MDBPageItem tag="li" /> |
API Reference: PageLink Properties
The table below shows the configuration options of the MDBPageLink component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Sets custom classes | <MDBPageLink className="customClass" /> |
tag |
String | a |
Changes default tag | <MDBPageLink tag="a" /> |