Bulma Pagination Concept

Bulma | Pagination

Steps To Create Bulma CSS Pagination Component

The pagination component consists of the following elements:

  • The pagination-previous & pagination-next modifier classes are used for previous and next page visits.
  • The pagination-list is used to display the page list. Basically, it is a container for page items.
  • The pagination-link modifier class is used to provide page number.
  • The pagination-ellipsis modifier class is used for range separators.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination: Alignment

By default, pagination is aligned in the left direction but you can align it in the right direction using the is-right modifier class. To align it into the center, use is-centered modifier class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination: Right Alignment

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Rounded Paginated Items

To create a pagination item, use the is-rounded modifier class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination Size

Basically, pagination comes in 3 additional sizes. Use the following modifier class such as is-small, is-medium, is-large to create pagination's small size, medium size and large size correspondingly.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination: Medium Size

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination: Large Size

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output