Bootstrap Paginator shows Tailwind paginator

Working with Laravel 10

In my Livewire component I have:

    {
        return view('livewire.admin.user.user-table',
        [
            'users' => User::search($this->search)
            ->where('active', $this->active)
            ->orderBy($this->sortBy, $this->sortAsc ? 'asc' : 'desc')
            ->paginate($this->perPage)
        ]);
    }

In my blade I have this:

{{ $users->links() }}

But I don't see the pages numbers only Previous and Next buttons.

And I wanted to use the Bootstrap 4 view.

In AppServiceProvider I have:

public function boot()
    {        
        Paginator::useBootstrapFour();
...}

I published the paginator views.

I cleared the cache.

I still see exactly the same previous next buttons with no page numbers in between.

Checking the page source on the browser, I don't see any classes that are being used in the bootstrap-4.blade.

I added some text to:

views\vendor\pagination\bootstrap4.blade

and

views\vendor\pagination\tailwind.blade

Non of the changes display on the page, so which view is being used to show the pagination???

Why doesn't it use the bootstrap-4 from my views\vendor\pagination folder?

I have no idea what view it is choosing to display for the pagination,

What am I missing?

martinbean

2 years ago

Level 80

@sigalz https://livewire.laravel.com/docs/pagination#using-bootstrap-instead-of-tailwind

1 like

newbie360

2 years ago

Best Answer

Level 24

@sigalz

This just change Laravel template

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

For Livewire you need change the setting in config/livewire.php or change it at runtime

    'pagination_theme' => 'bootstrap',

and also you need use the trait, without use WithPagination, it still using Laravel template

<?php
 
namespace App\Livewire;
 
use Livewire\WithPagination;
 
class ShowPosts extends Component
{
    use WithPagination;

1 like

SigalZ

2 years ago

Level 5

@newbie360 Thank you very much

Please or to participate in this conversation.