Search code examples
laravelbootstrap-4html-table

Laravel- Custom CSS and Bootstrap

I have a blade file in which there is a table which is getting values from the controller executing the stored procedure. The issue is on my blade file when I use

<!-- Pagination Links -->
   <div class="text-center mt-4">
       {{ $results->links() }}
   </div>

It takes the laravel pagination as well and the bootstrap as well which breaks my UI, how do I correct this? enter image description here

Solution

  • Write down the version of Laravel and which CSS you are using.

    The default pagination theme is tailwind, so to use bootstrap you need to configure it in AppServiceProvider.

    // app/Providers/AppServiceProvider.php

use Illuminate\Pagination\Paginator;
 
/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    // bootstrap5
    Paginator::useBootstrapFive();

}

    Select one according to the CSS you are using.

        // bootstrap4
    Paginator::useBootstrapFour();
    // useBootstrap() is same as bootstrap4
    Paginator::useBootstrap();
    // bootstrap3
    Paginator::useBootstrapThree();

    https://laravel.com/docs/11.x/pagination#customizing-the-pagination-view