{"id":1967,"date":"2021-01-08T12:00:00","date_gmt":"2021-01-08T11:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/how-to-use-layout-page-in-spring-boot-with-thymeleaf-master-and-content-page\/"},"modified":"2026-07-05T03:25:16","modified_gmt":"2026-07-05T01:25:16","slug":"how-to-use-layout-page-in-spring-boot-with-thymeleaf-master-and-content-page","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-use-layout-page-in-spring-boot-with-thymeleaf-master-and-content-page\/","title":{"rendered":"How to use Layout  Page in Spring Boot with Thymeleaf (Master and Content Page)"},"content":{"rendered":"<p>In this tutorial, you would learn how to use layout and content page in a Spring application. This is also called Master and Content page in .Net.<\/p>\n<ol>\n<li><a href=\"#t1\">The Dependencies<\/a><\/li>\n<li><a href=\"#t2\">The Layout Page<\/a><\/li>\n<li><a href=\"#t3\">The Content Page<\/a><\/li>\n<li><a href=\"#t4\">Working with Scrips<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Normally, websites and web applications share some page components across pages. For instance, headers, sidebar and footer. This component, would only be defined in a single page and then it would be made to affect all the pages using it.<\/p>\n<p>The figure below shows this.<\/p>\n<figure id=\"attachment_14507\" aria-describedby=\"caption-attachment-14507\" style=\"width: 258px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/01\/Layout-Page-in-Spring.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14507\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/01\/Layout-Page-in-Spring.jpg\" alt=\"Layout and Content pages in Spring\" width=\"258\" height=\"272\" \/><\/a><figcaption id=\"caption-attachment-14507\" class=\"wp-caption-text\">Layout pages in Spring<\/figcaption><\/figure>\n<p>Let&#8217;s now first look at how to create the layout page(layout)<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. The Dependencies<\/strong><\/h4>\n<p>Before you can use layout pages in your Spring application, you need to add two dependencies:<\/p>\n<ul>\n<li>the thymeleaf dependency<\/li>\n<li>the layout-dialect dependency<\/li>\n<\/ul>\n<p>These two dependencies are given below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;dependency&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;groupId&gt;<\/span>org.springframework.boot<span style=\"color: #007700;\">&lt;\/groupId&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;artifactId&gt;<\/span>spring-boot-starter-thymeleaf<span style=\"color: #007700;\">&lt;\/artifactId&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/dependency&gt;<\/span>\n\n<span style=\"color: #007700;\">&lt;dependency&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;groupId&gt;<\/span>nz.net.ultraq.thymeleaf<span style=\"color: #007700;\">&lt;\/groupId&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;artifactId&gt;<\/span>thymeleaf-layout-dialect<span style=\"color: #007700;\">&lt;\/artifactId&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;version&gt;<\/span>2.5.1<span style=\"color: #007700;\">&lt;\/version&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/dependency&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. The Layout Page<\/strong><\/h4>\n<p>The layout page is similar to any other HTML page. However, you must add the xmlns:layout attribute to the\u00a0 html tag.<\/p>\n<p>This is shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;html<\/span> <span style=\"color: #0000cc;\">lang=<\/span><span style=\"background-color: #fff0f0;\">\"en\"<\/span> <span style=\"color: #0000cc;\">xmlns:layout=<\/span><span style=\"background-color: #fff0f0;\">\"http:\/\/www.ultraq.net.nz\/thymeleaf\/layout\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<\/pre>\n<p>Next, you need to specify the part of the layout page where you want the content to appear. This is done using a div tag with the fragment attribute. So anything outside this div tag would remain fixed while the content of the div tag would be changing. The code below shows how you do this.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">layout:fragment=<\/span><span style=\"background-color: #fff0f0;\">\"content\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;p&gt;<\/span>Changing contents<span style=\"color: #007700;\">&lt;\/p&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. The Content Page<\/strong><\/h4>\n<p>Just like in the layout page, you need to add the<em> xmlns:layout<\/em> attribute. But additionally, you also must add the <em>layout: decorate<\/em> attribute as well. The layout:decorate attribute would have a value set to the layout page(without the .html extension).\u00a0 This is shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;html<\/span> <span style=\"color: #0000cc;\">lang=<\/span><span style=\"background-color: #fff0f0;\">\"en\"<\/span> \n      <span style=\"color: #0000cc;\">xmlns:layout=<\/span><span style=\"background-color: #fff0f0;\">\"http:\/\/www.ultraq.net.nz\/thymeleaf\/layout\"<\/span>\n      <span style=\"color: #0000cc;\">layout:decorate=<\/span><span style=\"background-color: #fff0f0;\">\"_layout\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<\/pre>\n<p>Here, the layout page is <em>_layout.html<\/em> placed inside the templates folder.<\/p>\n<p>Having added this HTML markup, you then need to specify the div tag that would wrap the whole content of the page. This is done as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">layout:fragment=<\/span><span style=\"background-color: #fff0f0;\">\"content\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\n<span style=\"color: #888888;\">&lt;!--Content of the page--&gt;<\/span>\n\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n<\/pre>\n<p>At this point, anything you want in the content page must be inside this div tag include modals.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Using Scripts in Layout-Content Page<\/strong><\/h4>\n<p>I would also like to explain how script work in layout\/content page.<\/p>\n<p>First, note that scripts defined in the layout page, apply to both the layout and the content page. However, you may want a script that applies only to the layout page. This is achieved using the <em>th:block<\/em> tag.<\/p>\n<p>For instance, we want a script called<em> account.js<\/em> to execute only for the content page. Then take the steps below:<\/p>\n<p>In the layout page, add the following block,<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;th:block<\/span> <span style=\"color: #0000cc;\">layout:fragment=<\/span><span style=\"background-color: #fff0f0;\">\"script\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/th:block&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>In the content page, add<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;th:block<\/span> <span style=\"color: #0000cc;\">layout:fragment=<\/span><span style=\"background-color: #fff0f0;\">\"script\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">th:src=<\/span><span style=\"background-color: #fff0f0;\">\"@{\/js\/accounts.js}\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/th:block&gt;<\/span>\n<\/pre>\n<p>In this case, the <em>accounts.js<\/em> script is placed inside the <em>js<\/em> folder in the static folder.<\/p>\n<p>&nbsp;<\/p>\n<p>I hope this helps you! Please do watch the video as well. And if you have any challenges, leave a comment.<\/p>\n<p>Finally, join us at <a href=\"https:\/\/www.facebook.com\/groups\/1447709731988533\" target=\"_blank\" rel=\"noopener noreferrer\">International Computer Programmers.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you would learn how to use layout and content page in a Spring application. This is also called Master and Content page &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1967","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1967"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1967\/revisions"}],"predecessor-version":[{"id":2135,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1967\/revisions\/2135"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}