React Bootstrap docs

Pagination

Indicate a series of related content exists across multiple pages.

Basic example

Prev
1(current)
2
More
3
4
5
Next

'use client'

import Pagination from 'react-bootstrap/Pagination'
import PageItem, { Ellipsis } from 'react-bootstrap/PageItem'

export default function PaginationBasicDemo() {
  return (
    <Pagination>
      <PageItem disabled aria-label="Previous page">Prev</PageItem>
      <PageItem active aria-current="page">1</PageItem>
      <PageItem>2</PageItem>
      <Ellipsis className="d-sm-none" />
      <PageItem className="d-none d-sm-block">3</PageItem>
      <PageItem className="d-none d-sm-block">4</PageItem>
      <PageItem>5</PageItem>
      <PageItem aria-label="Next page">Next</PageItem>
    </Pagination>
  )
}

Next.js link example

Prev
1(current)
2
More
3
4
5
Next

'use client'

import Link from 'next/link'
import Pagination from 'react-bootstrap/Pagination'
import PageItem, { Ellipsis } from 'react-bootstrap/PageItem'

export default function PaginationNextLinkDemo() {
  return (
    <Pagination>
      <PageItem as={Link} href="#" disabled aria-label="Prev page">Prev</PageItem>
      <PageItem as={Link} href="#" active aria-current="page">1</PageItem>
      <PageItem as={Link} href="#">2</PageItem>
      <Ellipsis as={Link} href="#" className="d-sm-none" />
      <PageItem as={Link} href="#" className="d-none d-sm-block">3</PageItem>
      <PageItem as={Link} href="#" className="d-none d-sm-block">4</PageItem>
      <PageItem as={Link} href="#">5</PageItem>
      <PageItem as={Link} href="#" aria-label="Next page">Next</PageItem>
    </Pagination>
  )
}

With icons

1(current)
2
More
3
4
5

Prev
1(current)
2
More
3
4
5
Next

'use client'

import Pagination from 'react-bootstrap/Pagination'
import PageItem, { Ellipsis, Prev, Next, First, Last } from 'react-bootstrap/PageItem'

export default function PaginationWithIconsDemo() {
  return (
    <>
      <Pagination className="mb-4">
        <PageItem disabled linkClassName="d-flex align-items-center h-100 fs-lg px-2" aria-label="Previous page">
          <i className="ci-chevron-left"/>
        </PageItem>
        <PageItem active aria-current="page">1</PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <PageItem linkClassName="d-flex align-items-center h-100 fs-lg px-2" aria-label="Next page">
          <i className="ci-chevron-right"/>
        </PageItem>
      </Pagination>

      <Pagination className="mb-4">
        <PageItem disabled linkClassName="d-flex align-items-center h-100 ps-2" aria-label="Previous page">
          <i className="ci-chevron-left fs-lg me-1 ms-n1"/>
          Prev
        </PageItem>
        <PageItem active aria-current="page">1</PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <PageItem linkClassName="d-flex align-items-center h-100 pe-2" aria-label="Next page">
          Next
          <i className="ci-chevron-right fs-lg me-n1 ms-1"/>
        </PageItem>
      </Pagination>

      <Pagination>
        <First linkClassName="fs-base" aria-label="First page" />
        <Prev linkClassName="fs-base" aria-label="Previous page" />
        <PageItem active aria-current="page">1</PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <Next linkClassName="fs-base" aria-label="Next page" />
        <Last linkClassName="fs-base" aria-label="Last page" />
      </Pagination>
    </>
  )
}

Sizing

Prev
1(current)
2
More
3
4
5
Next

Prev
1(current)
2
More
3
4
5
Next

Prev
1(current)
2
More
3
4
5
Next

'use client'

import Pagination from 'react-bootstrap/Pagination'
import PageItem, { Ellipsis } from 'react-bootstrap/PageItem'

export default function PaginationSizingDemo() {
  return (
    <>
      <Pagination size="lg" className="mb-4">
        <PageItem disabled aria-label="Prev page">
          Prev
        </PageItem>
        <PageItem active aria-current="page">
          1
        </PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <PageItem aria-label="Next page">Next</PageItem>
      </Pagination>

      <Pagination className="mb-4">
        <PageItem disabled aria-label="Prev page">
          Prev
        </PageItem>
        <PageItem active aria-current="page">
          1
        </PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <PageItem aria-label="Next page">Next</PageItem>
      </Pagination>

      <Pagination size="sm">
        <PageItem disabled aria-label="Prev page">
          Prev
        </PageItem>
        <PageItem active aria-current="page">
          1
        </PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
        <PageItem aria-label="Next page">Next</PageItem>
      </Pagination>
    </>
  )
}

Items per page select

Show

1(current)
2
More
3
4
5

'use client'

import Pagination from 'react-bootstrap/Pagination'
import PageItem, { Ellipsis } from 'react-bootstrap/PageItem'
import FormSelect from 'react-bootstrap/FormSelect'

export default function PaginationSelectDemo() {
  return (
    <div className="d-flex align-items-center justify-content-between">
      <div className="d-flex align-items-center">
        <span className="fs-sm">Show</span>
        <FormSelect className="border-0" defaultValue="12" aria-label="Items per page select">
          <option value="6">6</option>
          <option value="8">8</option>
          <option value="12">12</option>
          <option value="16">16</option>
          <option value="24">24</option>
        </FormSelect>
      </div>
      <Pagination>
        <PageItem active aria-current="page">1</PageItem>
        <PageItem>2</PageItem>
        <Ellipsis className="d-sm-none" />
        <PageItem className="d-none d-sm-block">3</PageItem>
        <PageItem className="d-none d-sm-block">4</PageItem>
        <PageItem>5</PageItem>
      </Pagination>
    </div>
  )
}

Load more (One-page)

Showing 16 from 48

import ProgressBar from 'react-bootstrap/ProgressBar'
import Button from 'react-bootstrap/Button'

export default function PaginationLoadMoreDemo() {
  return (
    <div className="d-flex flex-column align-items-center" style={{ maxWidth: 300 }}>
      <div className="fs-sm text-center mb-3">Showing 16 from 48</div>
      <ProgressBar
        variant="dark"
        now={30}
        className="d-none-dark w-100 mb-3"
        style={{ height: 4 }}
        aria-label="Items shown"
      />
      <ProgressBar
        variant="light"
        now={30}
        className="d-none d-flex-dark w-100 mb-3"
        style={{ height: 4 }}
        aria-label="Items shown"
      />
      <Button variant="link" size="lg" className="text-body-emphasis text-decoration-none animate-underline">
        <span className="animate-target">Show more</span>
        <i className="ci-chevron-down fs-lg ms-2"/>
      </Button>
    </div>
  )
}