The $posts-links layout error in Laravel UI may come up when we are using Pagination. It is a navigation bar that helps users to move from one page to another page. As per Laravel docs Bootstrap CSS is the default CSS to style pagination. We use this method to display our pagination results. However, with Laravel updates to version 8, the pagination UI might at times gets messy. You can fix it using any of the options as explained below.
Add bootstrap in AppServiceProvider for layout error
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap();
}Setting the paginator to use Bootstrap libraries from application boot time can help avid design and layout errors for methods linked with Paginator.
After adding the above method in your App Service Provider, you can add the $posts->links() code after @endforeach in your post.blade.php file, as shown below.
{{ $posts->links() }}However, at times this ma also not solve your design problems. For rare cases like these you may use an alternate method to add the bootstrap library in a different way as explained below.
Pass bootstrap library to $posts->links
At times passing the useBootstrap() function to Paginator class may not work. In these cases, you can use an easier method. Simply pass ‘pagination::bootstrap-4’ as an argument to $posts->links
$posts->links('pagination::bootstrap-4')However, the first method is the proper and recommended way to fix the $posts-links layout error.
