Laravel Pagination with Bootstrap

version : Laravel 10
Post Time : 15-04-2024

Laravel Pagination with Bootstrap

Let's do from scratch
install laravel

                                      
                                        

composer create-project --prefer-dist laravel/laravel laravel_project_name

Create Controller by following command 

                                      
                                        

php artisan make:controller UserController

routes/web.php

                                      
                                        

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\UserController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
   return view('welcome');
});

Route::get('/user', [UserController::class, 'index'])->name('user');

                                      
                                        

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use DB;

class UserController extends Controller
{
  public function index()
  {
       /*$data['users'] = DB::table('users')->select('*')->where('status','=' , 1)->orderBy('sort_order', 'desc')->paginate(10);*/

      $data['users'] = User::where('status', '=', 1)->paginate(10);

      return view('user_list',$data);
  }

}

user_list.blade.php 

                                      
                                        

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Laravel</title>
</head>
<body>
<div class="container">
          <table class="table">
              <thead>
                  <tr>
                      <th scope="col">Name</th>
                      <th scope="col">Email</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach ($users as $user)
                  <tr>
                      <td>{{ $user->name }}</td>
                      <td>{{ $user->email }}</td>
                  </tr>
                  @endforeach
              </tbody>
          </table>
          {{ $users->links() }}
      </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
</body>
</html>
 

by default it support tailwind css 
so if you want to use with bootstrap
you can do like following :

                                      
                                        

{{ $users->links('pagination::bootstrap-5') }}

to apply globaly in application
just open file : app/Providers/AppServiceProvider.php

                                      
                                        

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
   /**
    * Register any application services.
    */
   public function register(): void
   {
       //
   }

   /**
    * Bootstrap any application services.
    */
   public function boot(): void
   {
       Paginator::useBootstrapFive();
       //for Bootstrap
       // Paginator::useBootstrap();
       //with specific Bootstrap version 
       // Paginator::useBootstrapFour();
   }
}