Search code examples
javascriptphplaravellaravel-livewire

How to make Livewire Pagination responsive?


how to make livewire pagination responsive? when using Boostrap, its only need to add flex-wrap on class pagination to make it responsive.

Component:

class Index extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public function render()
    {
        return view('livewire.data-list.index', [
            'dataList' => DataList::whereStatus(1)->orderBy('id', 'desc')->paginate(15),
        ]);
    }
}

Blade :

<div>
    {{ $dataList->onEachSide(1)->links() }}
</div>

Solution

    1. First you have to publish your vendor file to resources/view directory so that you can modify it by the following command line php artisan vendor:publish --tag=laravel-pagination
    2. Than in resources file you can edit pagination files and design according to your need . You can customize according to your design