Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm using Bootstrap 4 and it seems that the pagination isn't responsive, but even so the amount of links on the current Laravel pagination is way bigger than expected and I was wondering how to make it smaller. (I'm using Laravel 5.5)
How to make it like:
[<][1][2][...][6][7][>] (example)?
May be simply you can use next or previous button by using simplePaginate() instead of paginate() function.
However, if you really need to keep the same format but reduce the numbers, in this case, I think you have only one way to do that is called customized the pagination function. Check this discussion how to do that- https://stackoverflow.com/questions/27655992/limit-amount-of-links-shown-with-laravel-pagination
Just write a custom presenter like:
@if ($paginator->hasPages())
<ul class="pagination pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="disabled"><span>«</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
@endif
@if($paginator->currentPage() > 3)
<li class="hidden-xs"><a href="{{ $paginator->url(1) }}">1</a></li>
@endif
@if($paginator->currentPage() > 4)
<li><span>...</span></li>
@endif
@foreach(range(1, $paginator->lastPage()) as $i)
@if($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
@if ($i == $paginator->currentPage())
<li class="active"><span>{{ $i }}</span></li>
@else
<li><a href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
@endif
@endif
@endforeach
@if($paginator->currentPage() < $paginator->lastPage() - 3)
<li><span>...</span></li>
@endif
@if($paginator->currentPage() < $paginator->lastPage() - 2)
<li class="hidden-xs"><a href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
@else
<li class="disabled"><span>»</span></li>
@endif
</ul>
@endif
As an example. You can make the links any way you desire.
(& raquo ;) and (& laquo ;) no space did not display correctly in code block, sorry.
I may be archaic, but since I only cared to limit this for responsive view I created a media query to only display the next/previous buttons and active page..
this could easily be extended to show any number of pages at any breakpoints.
@media screen and ( max-width: 520px ){
li.page-item {
display: none;
}
.page-item:first-child,
.page-item:last-child,
.page-item.active {
display: block;
}
}
This is a very old thread, and now L5.7 allows you to say how many buttons there should be.
Adjusting The Pagination Link Window
You may control how many additional links are displayed on each side of the paginator's URL "window". By default, three links are displayed on each side of the primary paginator links. However, you may control this number using the onEachSide method:
{{ $users->onEachSide(5)->links() }}
@Snapey Solved my problem :) Now the links are visible in a single row on mobile.
Or https://laracasts.com/discuss/channels/guides/paginator-another-episode
There's all kinds of flexibility in the framework if you search the docs and the API.
superb
I'm using Laravel 8 but onEachSide does not work so I use @jlrdw solution but for TailwindCss and reduce link on each side to 1 and decrease padding to make the pagination fit on mobile phone
@if ($paginator->hasPages())
{{-- Custom default component--}}
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-center">
<span class="relative z-0 inline-flex shadow-sm rounded-md">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
<span class="relative inline-flex items-center px-1 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-1 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
@endif
{{-- Pagination Elements --}}
@if($paginator->currentPage() > 2)
<a href="{{ $paginator->url(1) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => 1]) }}">
1
</a>
@endif
@if($paginator->currentPage() > 3)
{{-- "Three Dots" Separator --}}
<span aria-disabled="true">
<span class="relative inline-flex items-center p-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">...</span>
</span>
@endif
@foreach(range(1, $paginator->lastPage()) as $i)
@if($i >= $paginator->currentPage() - 1 && $i <= $paginator->currentPage() + 1)
@if ($i == $paginator->currentPage())
<span aria-current="page">
<span class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium badge-success border border-gray-300 cursor-default leading-5">{{ $i }}</span>
</span>
@else
<a href="{{ $paginator->url($i) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $i]) }}">
{{ $i }}
</a>
@endif
@endif
@endforeach
@if($paginator->currentPage() < $paginator->lastPage() - 2)
{{-- "Three Dots" Separator --}}
<span aria-disabled="true">
<span class="relative inline-flex items-center p-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">...</span>
</span>
@endif
@if($paginator->currentPage() < $paginator->lastPage() - 1)
<a href="{{ $paginator->url($paginator->lastPage()) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $paginator->lastPage()]) }}">
{{ $paginator->lastPage() }}
</a>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-1 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
@else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
<span class="relative inline-flex items-center px-1 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
</span>
@endif
</span>
</nav>
@endif
Result: https://prnt.sc/1xiilxo
@tranghaviet I'm working with Laravel 8 and for me, the onEachSide() is working fine.
If I'm using onEachSide(0) in my Blade template...
{{ $shifts->withQueryString()->onEachSide(0)->links() }}
...the following is rendered: [<][1][2]...[7]...[50][51][>]
If I'm using onEachSide(2) in my Blade template...
{{ $shifts->withQueryString()->onEachSide(2)->links() }}
...the following is rendered: [<][1][2]...[10][11][12][13][14]...[50][51][>]
Please or to participate in this conversation.