title: Spring Boot Thymeleaf: How to include html file
body: <p>i have a problem with Spring Boot Thymeleaf. I want to include a simple html-file in another html file with Thymeleaf. </p>
  
  <p>Here my main.html file:
  In the middle of the codesnippet you can see the root-div, here i want to include the dashboard.html file.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head&gt;
      &lt;title&gt;Admin-Area&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;link href="/backend/webjars/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link href="/backend/webjars/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 fixed-top mainnav navbar-expand-xl"&gt;
          &lt;a class="navbar-brand col-sm-3 col-md-2 mr-0" href="../dashboard/dashboard.html"&gt;B2C-Shop&lt;/a&gt;
          &lt;button type="button" class="navbar-toggler navbar-toggler-right"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/nav&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"&gt;
                  &lt;div th:each="script: ${scripts}"&gt;
                      &lt;div th:if="${script.endsWith('dashboard.html')}"&gt;
                          &lt;div id="root" th:include="dashboard :: dashboard&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/main&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="/backend/webjars/es5-shim/4.5.9/es5-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="/backend/webjars/es6-shim/0.20.2/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="/backend/webjars/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/backend/webjars/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="/backend/webjars/modernizr/2.8.3/modernizr.min.js"&gt;&lt;/script&gt;
      &lt;div th:each="script: ${scripts}"&gt;
          &lt;div th:if="${script.endsWith('.js')}"&gt;
              &lt;script type="text/javascript" th:src="'/backend/js' + ${script}"&gt;&lt;/script&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the dashboard.html file which i want to include in the main.html file.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
      &lt;div th:fragment="dashboard"&gt;
          &lt;h1&gt;Welcome to B2C-Admin-Area&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my DashboardController.java which i declare the dashboarb/dashboard.html file
  The return methode "getTemplate()" references to backend folder in resources folder. </p>
  
  <pre><code>/**
       *
       * Render dash board
       *
       * @param model the attribute model
       * @return the template file name
       */
      @RequestMapping(value = "/backend/dashboard/dashboard.html", method = RequestMethod.GET)
      public String dashboard(final Model model)
      {
          String[] script = {"/dashboard/dashboard.html"};
          model.addAttribute(SCRIPT, script);
          return getTemplate();
      }
  
  /**
       * Gets the template file name.
       *
       * @return the template file name
       */
      protected String getTemplate()
      {
          return "backend";
      }
  </code></pre>
  
  <p>My folder stucture looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/xsAxA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xsAxA.png" alt="enter image description here"></a></p>
  
  <p>Do you have any idea to include this file? </p>
  
  <p>Thank you.</p>
  
  <p>Regards MWC.</p>