@extends('layouts/contentLayoutMaster') @section('title', 'Pagination') @section('content') {{-- Default Pagination Starts --}}

Basic

A basic pagination with active item

Seprated

Pagination with seprated Next and Previous icons

To create seprated 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

{{-- Default Pagination Ends --}} {{-- Themed Pagination Starts --}}

Success

Use class .pagination-success with .pagination

Danger

Use class .pagination-danger with .pagination

Info

Use class .pagination-info with .pagination

Warning

Use class .pagination-warning with .pagination

{{-- Themed Pagination Ends --}} {{-- Pagination Positions start --}}

Pagination Positions

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

Left Aligned
Center Aligned
Right Aligned
{{-- Pagination Positions end --}} {{-- Pagination Sizes start --}}

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

{{-- Pagination Sizes end --}} {{-- Dynamic Pagination start --}}

Dynamic Pagination

We are using jQuery Pagination plugin. This jQuery plugin simplifies the usage of Bootstrap Pagintion. 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
          {{-- Dynamic Pagination end --}} @endsection @section('vendor-script') @endsection @section('page-script') {{-- Page js files --}} @endsection