Posts Learn Components Snippets Categories Tags Tools new About
/

How to Customize and Display Laravel Pagination Links

Learn how to customize and display Laravel pagination links that are currently using Bootstrap or Tailwind CSS components

Created on Nov 21, 2021

17 views

In this short snippet, you will learn how to customize and display the Laravel pagination links component on the front end. In any version of Laravel application especially Laravel 8 you can publish the default pagination using the "vendor publish" command.
php artisan vendor:publish --tag=laravel-pagination
By publishing the Laravel pagination component you will be able to customize and style the default HTML template provided by Laravel. The file itself is located within the resources folder and below is the full path to it. Do note that these files are the same pagination component but different styling where the "default" is no style, "tailwind" using Tailwind CSS, and "bootstrap-4" is using Bootstrap framework.
resources/views/vendor/pagination/default.blade.php
resources/views/vendor/pagination/tailwind.blade.php
resources/views/vendor/pagination/bootstrap-4.blade.php
From within the file itself, you can customize the classes, the format, and also placement for each link. For example, if you are using simple pagination then you can make use of PostSrc Pagination Components and make it simple and intuitive.
Simple Pagination Component by PostSrc

For the implementation, you can reference your views as follows. For the first code below it will be the query to get all "posts" from the DB using Laravel Eloquent Model.
<?php

$post = Post::query()->paginate(10);
For the blade views, you can refer to the code below. For this case, it's using the "tailwind" theme. If you are using bootstrap by default then you can reference the bootstrap pagination component.
{{ $post->links('pagination::tailwind') }}
I hope this snippet helps and cheers, happy coding!

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)