• slideshow Get Started
  • layers
    Style
    • Typography
    • Icons
    • Shadow
  • Propeller Components
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Button
    • Card
    • Card Examples
    • Checkbox
    • Chip
    • Dropdown
    • Floating Action Button
    • File Input
    • Form
    • Input Group
    • List
    • Modal
    • Navbar
    • Pagination
    • Popover
    • Progressbar
    • Radio Button
    • Select
    • Sidebar
    • Slider
    • Spinner
    • Stepper
    • Toggle Switch
    • Tab
    • Table
    • Text Fields
    • Tooltip
  • swap_calls Third Party Components
    • Data Table
    • Datetimepicker
    • Range Slider
    • Select2
    • Carousel
    • Rating
    • jQuery Validation
    • Calendar
  • view_quilt UI Sections
    • Intro Section
    • Footer Section
    • Contact Section
  • Created by Hea Poh Linfrom the Noun Project Migration
  • new_releases Release Notes
    • V1.1.0
    • V1.2.0
    • V1.3.0
    • V1.4.0
    • V1.4.1
    • V1.5.0
    • V1.6.0
menu
  • Pricing
  • Themes
  • Blog
    Open Source Pro Angular

Pagination

Bootstrap 4 Pagination with Material Design UI

Pagination indicates split of long related content across multiple pages.

Bootstrap 4 Pagination Propeller Pagination Outline Pagination Pagination Size Configuration Options

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.

  • Previous
  • 1
  • 2
  • 3
  • 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.

  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right

                            

Outline Pagination

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

  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right

                            

Pagination Size

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

  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right
  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right
  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right
  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right
  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right
  • chevron_left
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • chevron_right

                            

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
Bootstrap 4 Pagination Propeller Pagination Outline Pagination Pagination Size Configuration Options
  • All Mail
    • Social
    • Promo
  • Trash
  • Spam
  • Follow Up
  • Propeller © All Rights Reserved.

    Licensed under Propeller Pro Developer License

  • mail_outline
    For Support

    proprosupport@propeller.in

Primary chat