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.

On this page

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.

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

Using icons in pagination

You can replace text in pagination buttons with icons or symbols. Make sure to include proper aria-labels for accessibility.

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationWorkingWithIconsExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationWorkingWithIconsExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}

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.

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationDisabledAndActiveExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous" disabled>
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem active>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationDisabledAndActiveExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous" disabled>
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem active>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}

Pagination sizing

Adjust the size of the React Bootstrap Pagination component with the size prop. Available values: lg (large), sm (small).

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingLargeExample = () => {
  return (
    <CPagination size="lg" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingLargeExample = () => {
  return (
    <CPagination size="lg" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingSmallExample = () => {
  return (
    <CPagination size="sm" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingSmallExample = () => {
  return (
    <CPagination size="sm" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

Pagination alignment

Change pagination alignment using the align prop: "start", "center", or "end".

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignmentExample = () => {
  return (
    <CPagination align="center" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignmentExample = () => {
  return (
    <CPagination align="center" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignment2Example = () => {
  return (
    <CPagination align="end" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignment2Example = () => {
  return (
    <CPagination align="end" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

API reference

Here’s the API reference for the React Bootstrap Pagination component: