{"id":4772,"date":"2024-03-14T01:55:48","date_gmt":"2024-03-14T01:55:48","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/"},"modified":"2025-07-31T13:09:26","modified_gmt":"2025-07-31T13:09:26","slug":"how-to-set-pagination-style-in-laravel","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/","title":{"rendered":"Laravel Pagination Styling Guide"},"content":{"rendered":"<p>In Laravel, you can use the Blade template engine to set pagination styles. Here is an example code that demonstrates how to set pagination styles in a Blade template.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">&lt;!-- \u5728\u89c6\u56fe\u6587\u4ef6\u4e2d\u8bbe\u7f6e\u5206\u9875\u6837\u5f0f --&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pagination\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\">&lt;!-- \u663e\u793a\u4e0a\u4e00\u9875\u94fe\u63a5 --&gt;<\/span>\r\n    @if ($paginator-&gt;onFirstPage())\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"disabled\"<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;laquo;<\/span> \u4e0a\u4e00\u9875<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\r\n    @else\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{{ $paginator-&gt;previousPageUrl() }}\"<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;laquo;<\/span> \u4e0a\u4e00\u9875<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\r\n    @endif\r\n\r\n    <span class=\"hljs-comment\">&lt;!-- \u663e\u793a\u5206\u9875\u94fe\u63a5 --&gt;<\/span>\r\n    @foreach ($elements as $element)\r\n        <span class=\"hljs-comment\">&lt;!-- \"Three Dots\" Separator --&gt;<\/span>\r\n        @if (is_string($element))\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>{{ $element }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\r\n        @endif\r\n\r\n        <span class=\"hljs-comment\">&lt;!-- Array Of Links --&gt;<\/span>\r\n        @if (is_array($element))\r\n            @foreach ($element as $page =&gt; $url)\r\n                @if ($page == $paginator-&gt;currentPage())\r\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"current\"<\/span>&gt;<\/span>{{ $page }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\r\n                @else\r\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{{ $url }}\"<\/span>&gt;<\/span>{{ $page }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\r\n                @endif\r\n            @endforeach\r\n        @endif\r\n    @endforeach\r\n\r\n    <span class=\"hljs-comment\">&lt;!-- \u663e\u793a\u4e0b\u4e00\u9875\u94fe\u63a5 --&gt;<\/span>\r\n    @if ($paginator-&gt;hasMorePages())\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{{ $paginator-&gt;nextPageUrl() }}\"<\/span>&gt;<\/span>\u4e0b\u4e00\u9875 <span class=\"hljs-symbol\">&amp;raquo;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\r\n    @else\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"disabled\"<\/span>&gt;<\/span>\u4e0b\u4e00\u9875 <span class=\"hljs-symbol\">&amp;raquo;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\r\n    @endif\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>In the example above, we used the Paginator class provided by Laravel to obtain pagination links and current page information. By looping through the pagination links in the Blade template and setting the appropriate styles, you can customize the pagination style. You can customize different styles of pagination links as needed to meet your design requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Laravel, you can use the Blade template engine to set pagination styles. Here is an example code that demonstrates how to set pagination styles in a Blade template. &lt;!&#8211; \u5728\u89c6\u56fe\u6587\u4ef6\u4e2d\u8bbe\u7f6e\u5206\u9875\u6837\u5f0f &#8211;&gt; &lt;div class=&#8221;pagination&#8221;&gt; &lt;!&#8211; \u663e\u793a\u4e0a\u4e00\u9875\u94fe\u63a5 &#8211;&gt; @if ($paginator-&gt;onFirstPage()) &lt;span class=&#8221;disabled&#8221;&gt;&amp;laquo; \u4e0a\u4e00\u9875&lt;\/span&gt; @else &lt;a href=&#8221;{{ $paginator-&gt;previousPageUrl() }}&#8221;&gt;&amp;laquo; \u4e0a\u4e00\u9875&lt;\/a&gt; @endif &lt;!&#8211; \u663e\u793a\u5206\u9875\u94fe\u63a5 &#8211;&gt; @foreach ($elements as [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[4609,4603,361,4610,326],"class_list":["post-4772","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-blade","tag-laravel","tag-pagination","tag-styling","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Laravel Pagination Styling Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Pagination Styling Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T01:55:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T13:09:26+00:00\" \/>\n<meta name=\"author\" content=\"William Carter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"William Carter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\"},\"author\":{\"name\":\"William Carter\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0\"},\"headline\":\"Laravel Pagination Styling Guide\",\"datePublished\":\"2024-03-14T01:55:48+00:00\",\"dateModified\":\"2025-07-31T13:09:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\"},\"wordCount\":89,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Blade\",\"Laravel\",\"Pagination\",\"Styling\",\"web development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\",\"name\":\"Laravel Pagination Styling Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T01:55:48+00:00\",\"dateModified\":\"2025-07-31T13:09:26+00:00\",\"description\":\"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel Pagination Styling Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0\",\"name\":\"William Carter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g\",\"caption\":\"William Carter\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/williamcarter\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Pagination Styling Guide - Blog - Silicon Cloud","description":"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/","og_locale":"en_US","og_type":"article","og_title":"Laravel Pagination Styling Guide","og_description":"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T01:55:48+00:00","article_modified_time":"2025-07-31T13:09:26+00:00","author":"William Carter","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"William Carter","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/"},"author":{"name":"William Carter","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0"},"headline":"Laravel Pagination Styling Guide","datePublished":"2024-03-14T01:55:48+00:00","dateModified":"2025-07-31T13:09:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/"},"wordCount":89,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Blade","Laravel","Pagination","Styling","web development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/","name":"Laravel Pagination Styling Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T01:55:48+00:00","dateModified":"2025-07-31T13:09:26+00:00","description":"Learn how to style pagination in Laravel using Blade templates. Complete guide with code examples.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-pagination-style-in-laravel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Laravel Pagination Styling Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0","name":"William Carter","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g","caption":"William Carter"},"url":"https:\/\/www.silicloud.com\/blog\/author\/williamcarter\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/4772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=4772"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/4772\/revisions"}],"predecessor-version":[{"id":149478,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/4772\/revisions\/149478"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=4772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=4772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=4772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}