How to correct scattered pagination links and objects view in browser while using pagination() function in Laravel 8

I am working on Laravel 8 framework, PHP 8 and MariaDB 10.4.17.

I am using paginate() feature in controller class and {{$variable->links()}} in .blade.php view file.

When testing the outcome on the browser, I am getting the paginator links and objects scattered.

Here is how I use paginate() in controller class :

class Homepage extends Controller
{
    public function index(){

        $data['articles']=Article::orderBy('created_at','DESC')->paginate(1);

        return view('front.homepage',$data);

    }

Here is how I call pagination in my .blade.php view file :

{{$articles->links()}}

Finally, this is the scattered view I get in browser:

https://i.stack.imgur.com/KW3xr.jpg

I would be happy to hear from you, if you have any idea why such untidiness occurs and how to correct it?

srasch

5 years ago

Level 14

Can you provide your blade file? Looks like a css thing to me.

Linda Maya

5 years ago

Level 1

Thanks..Here it is :

@extends('front.layouts.master')

@section('title','Homepage')

@section('content')


      <div class="col-md-9 mx-auto">

        @foreach($articles as $article)

        <div class="post-preview">
          <a href="{{route('single',[$article->getCategory->slug,$article->slug])}}">
            <h2 class="post-title">
              {{$article->title}}
            </h2>
            <img src="{{$article->image}}">
            <h3 class="post-subtitle">
                {{\Illuminate\Support\Str::limit($article->content,75)}}
            </h3>
          </a>
          <p class="post-meta"> Category : <a href="#">{{$article->getCategory->name}}</a>
          <span class="float-right">{{$article->created_at->diffForHumans()}}</span>
          </p>


        </div>

        @if(!$loop->last)
        <hr>
        @endif

        @endforeach

        {{$articles->links()}}

        <!-- Pager -->

      </div>

@include('front.widgets.categoryWidget')


@endsection

srasch

5 years ago

Best Answer

Level 14

It seems like you are using Bootstrap. Laravel 8 provides a TailwindCss pagination by default.

But, you can change it.

From the docs:

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;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Paginator::useBootstrap();
}

Linda Maya

5 years ago

Level 1

Yes, I am using bootstrap, and I have added the reference and the method you have given, to the App\Providers\AppServiceProvider It works properly now. The problem is solved! Thank you.

1 like

Please or to participate in this conversation.