How to Fix Weird Pagination Arrows in Latest Laravel

Published: Oct 19, 2021 - Updated: Mar 16, 2022

Hello artisans! In the latest Laravel, we are facing a weird pagination arrows issue. Because by default Laravel loads Tailwind paginator. We can easily solve the issue. We can fix it in 2 methods. Let's have a look:

Table of Contents

  1. The Issue
  2. Method 1
  3. Method 2

The Issue

The pagination style issue we are facing:

Method 1

Laravel includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator's useBootstrap method within the boot method of your App\Providers\AppServiceProvider class:

AppServiceProvider.php
use Illuminate\Pagination\Paginator;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Paginator::useBootstrap();
}

Method 2

We can also call Bootstrap paginator like:

// tailwind
$posts->links()

// bootstrap
$posts->links('pagination::bootstrap-4')
That's all. Thanks for reading. :)