pagination not styled in laravel 5.5

Question

Here is my code where I am showing the paginations of my blog posts !!

<div class="clearfix">
    {{ $posts->render() }}
    <a class="btn btn-secondary float-right" href="#">Older Posts &rarr;</a>
</div>

Here is the controller where the pagination function is called.

public function index()
{
    $posts = post::where('status',1)->paginate(2);
    return view('user.blog',compact('posts'));
}

I have tried lot, but my pagination displayed but not properly styled !! Why ??

kerrin · Accepted Answer · 2019-07-26T01:44:31.170

62

To display the pagination links in your blade view:

{{ $posts->links() }}

Or if you need to specify Bootstrap 4:

{{$posts->links("pagination::bootstrap-4")}}

Laravel docs: https://laravel.com/docs/5.5/pagination

edited Jul 26 '19 at 01:44

answered Oct 07 '17 at 23:19

kerrin

3,376
1
26
36

Are you using Bootstrap? From the Laravel docs: 'The HTML generated by the paginator is compatible with the Bootstrap CSS framework.' – kerrin Oct 08 '17 at 13:41
I am using laravel 5.5 and boostrap is integrated with it – Muhammad Hamza Oct 08 '17 at 13:44
How to make it work ? that it shows the proper css ? – Muhammad Hamza Oct 08 '17 at 13:57
15

What happens when you specify Bootstrap 4? {{$posts->links("pagination::bootstrap-4")}} – kerrin Oct 08 '17 at 21:41
Working for me, Thanks. – Shahrukh Anwar Apr 18 '18 at 12:03
Kerrin solution works perfectly !! Thanks. :) {{$posts->links("pagination::bootstrap-4")}} – manelseo Jul 07 '18 at 09:06
With `vendor:publish`, artisan command, you can create your own specific pagination template into `view\vendor\pagination`. – Fatih Mert Doğancan May 20 '20 at 16:22

score 16 · Answer 2 · answered Nov 02 '18 at 14:38

16

For pretty boostrap 4 pagination, simply call this:

{{ $results->links( "pagination::bootstrap-4") }}

answered Nov 02 '18 at 14:38

Emeka Mbah

16,745
10
77
96

score 11 · Answer 3 · answered Apr 09 '21 at 09:37

11

For Laravel 8

Laravel includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator's useBootstrap method within the boot method of your App\Providers\AppServiceProvider class:

use Illuminate\Pagination\Paginator;

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

Laravel docs: https://laravel.com/docs/8.x/pagination

answered Apr 09 '21 at 09:37

migsAV

289
3
11

worked with me, laravel 8 and bootstrap 5 – Omar Apr 29 '22 at 15:51

score 6 · Answer 4 · edited Feb 08 '22 at 13:04

To add your bootstrap-style to links, you can create your pagination.blade.php that contains something like this

<!-- Previous page symbol "<" Link -->

@if ($paginator->hasPages())
    <ul class="pagination">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
@else
            <li class="page-item"><a href="{{ $paginator->previousPageUrl() }}" class="page-link" rel="prev">&laquo;</a></li>
@endif

{{-- Pagination Elements(represents page number such as 1,2,3) --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
    @if (is_string($element))
            <li class="page-item disabled">{{ $element }}</li>
    @endif

    {{-- Array Of Links --}}
    @if (is_array($element))
        @foreach ($element as $page => $url)
                @if ($page == $paginator->currentPage())
                        <li class="page-item active">
                            <a href="#" class="page-link">{{ $page }}<span class="sr-only">(current)</span></a>
                        </li>
                @else
                        <li class="page-item">
                            <a href="{{ $url }}" class="page-link">{{ $page }}</a>
                        </li>
                @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page symbol ">" Link --}}
        @if ($paginator->hasMorePages())
                <li class="page-item"><a href="{{ $paginator->nextPageUrl() }}" class="page-link" rel="next">&raquo;</a></li>
        @else
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
        @endif
    </ul>
    @endif

and than use

{{ $results->links('pagination') }}

pagination not styled in laravel 5.5

4 Answers4