'After updating to Laravel 8.x from 7.9.2, $user -> links() has a problem with the user interface, bootstrap maybe

I updated a Laravel project to 8.x from 7.9.2. Everything works properly, except this part from the frontend, which is buggy, seems like a problem with the bootstrap maybe, do you know why? The arrows for the next and previous pages, when I use $user -> links() after I did $users = User::paginate(20); are buggy. See these pictures please, please help me:

Before updating to Laravel 8.x

Before

After updating to Laravel 8.x

enter image description here

phplaravelbootstrap-4


Solution 1:[1]

By default, Laravel-8 is using Tailwind as a CSS framework, but you can keep Bootstrap as the default CSS framework for your app if you are upgrading your app from the previous versions.

Simply add the following code in AppServiceProvider file and all set:

use Illuminate\Pagination\Paginator;

Paginator::useBootstrap(); *//this line will be in boot method*

And here is the reference link for the same: https://laravel.com/docs/8.x/upgrade#pagination-defaults

Solution 2:[2]

It is a modification made in Laravel 8. Laravel includes pagination views built using Bootstrap CSS, call the paginator's useBootstrap method within your AppServiceProvider. Check: https://laravel.com/docs/8.x/pagination#using-bootstrap

In App\Providers\AppServiceProvider add de following lines:

use Illuminate \ Pagination \ Paginator;

public function boot ()
{
      Paginator::useBootstrap();
}

Solution 3:[3]

Like lagbox mentioned, from Laravel 8.x, the pagination uses the Tailwind framework by default. To change that, if you want to use Bootstrap, like I did, just go to Providers/AppServiceProvider.php and put this:

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::useBootstrap();
}

Solution 4:[4]

From the official documentation (https://laravel-livewire.com/docs/2.x/pagination#custom-pagination-view)

Like Laravel, Livewire's default pagination view uses Tailwind classes for styling. If you use Bootstrap in your application, you can enable the Bootstrap theme for the pagination view using the $paginationTheme property on your component.

So, if you are working with Livewire components you can try this:

use Livewire\WithPagination;

class MyComponent extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Alexandre Strapacao G. Vianna
Solution 3 Vladimir B.
Solution 4 annvt

Related Questions