Pagination¶

Indicate a series of related content exists across multiple pages.

Examples¶

A numbered page list, in three sizes.

Default

A numbered page list. An item without a url renders as the current page.

Usage

{% include 'bootstrap_components:pagination' with {
  items: [
    { url: '#', title: '« First' },
    { url: '#', title: '‹ Previous' },
    { url: '#', title: '1' },
    { title: '2' },
    { url: '#', title: '3' },
    { url: '#', title: 'Next ›' },
    { url: '#', title: 'Last »' },
  ],
} %}

Props¶

Prop	Type	Description	Example
`variant`	string	Size: `default`, `sm` or `lg`. Defaults to `default`.	`default`
`alignment`	string	`start`, `center` or `end`. Defaults to `start`.	`start`
`items`	array	Pagination items. Each is `{ url, title, disabled, attributes }`. Omit `url` for the current page; set `disabled` for an unavailable link.	`[{title: '1'}, {url: '/page/2', title: '2'}]`

Variants¶

Variant	Description
`sm`	Smaller pagination.
`default`	Standard size.
`lg`	Larger pagination.