Pagination

Bootstrap 4 Pagination with Material Design UI

Pagination indicates split of long related content across multiple pages.

Bootstrap 4 Pagination

Bootstrap 4 Pagination is built with list HTML elements so screen readers can announce the number of available links. Bootstrap provides both navigation with labels and icons for previous and next.

1
2
3

Propeller Pagination

Propeller Pagination consists of Bootstrap 4 HTML structure with Propeller customized classes. Add .pmd-pagination to the wrapper ul tag to create Propeller Pagination.

1
2
3
4
5
6

Outline Pagination

Add .pmd-pagination-outline class after the .pmd-pagination class to create Outline Pagination.

1
2
3
4
5
6

Pagination Size

Add .pagination-lg or .pagination-sm class to create large or small size pagination respectively.

1
2
3
4
5
6

1
2
3
4
5
6

1
2
3
4
5
6

1
2
3
4
5
6

1
2
3
4
5
6

1
2
3
4
5
6

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the pagination. The table lists the available classes and their effects.

Propeller Class	Effect	Remark
`.pmd-pagination`	Used to create a Propeller pagination.	Required
`.pmd-pagination-outline`	Used to create a outline pagination.	Optional