@extends('layouts/contentLayoutMaster') @section('title', 'Pagination') @section('content')

Basic

A basic pagination with active item

Basic with bootstrap structure

A basic bootstrap pagination with Next and Previous links

Bootstrap pagination with icons

A bootstrap pagination with Next and Previous links with icons

Separated

Pagination with separated Next and Previous icons

To create separated pagination use .prev-item class for the first item and .next-item for the last item.

With icon and text

Pagination with icon and text

Only icons

Pagination with only icons

Success

Use class .pagination-success with .pagination

Danger

Use class .pagination-danger with .pagination

Warning

Use class .pagination-warning with .pagination

Info

Use class .pagination-info with .pagination

Pagination Positions

Use classes .justify-content-{direction} with .pagination to align your pagination.

Left Aligned
Center Aligned
Right Aligned

Pagination Sizes

Use class .pagination-lg for large size pagination & use .pagination-sm for small size pagination. For Default size no classes required.

Pagination Sizes

Dynamic Pagination

We are using jQuery Pagination plugin. This jQuery plugin simplifies the usage of Bootstrap Pagination. It uses appropriate classes: .pagination, .active and .disabled.

Default Pagination

You are on page 1

    Default Pagination with last & first

    You are on page 1

      Pagination drop you here after reload

      Warning! Page will reload.
      You are on page 1

        Set Start Page Of Pagination

        Your start Page 5
          @endsection @section('vendor-script') @endsection @section('page-script') {{-- Page js files --}} @endsection