CODEWITHSUNDEEP
phplaravel
Luna
Luna

Reputation: 37

Change default pagination style in laravel

@extends('layouts.app')

@section('content')
<h4 style="text-align:center;">SHOES</h4>
    @foreach($shoes as $list)
        <div style="margin-top: 40px">
            <div class="row d-flex justify-content-md-center">
                <div class="card" style="width: 22rem;"> 
                    <img class="card-img-top justify-content-center" src="{{ asset("images/$list->shoe_image") }}" alt="" style="width:350px; height:350px;">
                    {{-- bg-card-pink p-2 m-2 --}}
                    <div class="card-body">
                        <h1>{{ $list->shoe_name }}</h1><br>
                        <h6>{{ $list->shoe_description }}</h6><br>
                        ${{ $list->shoe_price }}<br>
                    </div>
                    
                    <a class="btn btn-primary btn-dark" href="/detail/{{ $list->id }}">
                        SEE DETAILS
                    </a>
                </div>
            </div>
        </div>
        @endforeach
        <div class="row d-flex justify-content-md-center mt-4">{{ $shoes->links() }}</div>
@endsection

Anybody had any idea changing the color/style of the pagination button on the blade? I use default pagination by laravel which is $shoes->links()

Upvotes: 0

Views: 3736

Answers (2)

SNOUSSI
SNOUSSI

Reputation: 1

Simply add pagination to your links if you want to use Bootstrap, or add a custom class to style it yourself :

<style>
    .custom-pagination {
        color: #0fb6cc; 
        border: 1px solid #7e1414; 
        margin: 0 2px; 
    }
    .custom-pagination  {
        background-color: #0fb6cc; 
        border-color: #0fb6cc; 
        color: white; 
    }

    .custom-pagination .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Immatriculation</th>
        </tr>
    </thead>
    <tbody>
        @foreach($vehicules $vehicule)
            <tr>
                <td>{{$voiture->id}}</td>
                <td>{{$voiture->immatriculation}}</td>    
            </tr>
        @endforeach
    </tbody>
</table>
<div class="d-flex custom-pagination">
      {{ $vehicules->links('pagination::bootstrap-5') }}
</div>

and don't forget to include the Bootstrap CDN in section

Upvotes: 0

Arun Verma
Arun Verma

Reputation: 137

You can customize default pagination by exporting pagination files from vendor folder to resources.

To export run in terminal: php artisan vendor:publish --tag=laravel-pagination

See Laravel Docs

Upvotes: 1

Related Questions