title: Thymeleaf not working (th:fragment/th:replace) using bootstrap
body: <p>I'm trying to use thymeleaf for the first time to separate the bootstrap navbar and javascript into it's own seperate html file away from my main html page. I have the setup exactly as the thymeleaf tutorial laid out but it won't display the content correctly when I run Spring. </p>
  
  <p><strong>index.html</strong> &lt;- main page for my site <strong>*Updated</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head th:replace="common/header :: common-header" /&gt;
  
  &lt;body&gt;
      &lt;div th:replace="common/header :: navbar" /&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;!-- carousel --&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div id="carousel-example-generic" class="carousel slide"
                              data-ride="carousel"&gt;
                              &lt;!-- Indicators --&gt;
                              &lt;ol class="carousel-indicators"&gt;
                                  &lt;li data-target="#carousel-example-generic" data-slide-to="0"
                                      class="active"&gt;&lt;/li&gt;
                                  &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                                  &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
                              &lt;/ol&gt;
  
                              &lt;!-- Wrapper for slides --&gt;
                              &lt;div class="carousel-inner" role="listbox"&gt;
                                  &lt;div class="item active"&gt;
                                      &lt;img
                                          src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
                                          alt="..." /&gt;
                                      &lt;div class="carousel-caption"&gt;
                                          &lt;h4&gt;First Thumbnail Label&lt;/h4&gt;
                                          &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply
                                              random text. It has roots in a piece of classical Latin
                                              literature from 45 BC, making it over 2000 years old.&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="item"&gt;
                                      &lt;img
                                          src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
                                          alt="..." /&gt;
                                      &lt;div class="carousel-caption"&gt;
                                          &lt;h4&gt;First Thumbnail Label&lt;/h4&gt;
                                          &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply
                                              random text. It has roots in a piece of classical Latin
                                              literature from 45 BC, making it over 2000 years old.&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="item"&gt;
                                      &lt;img
                                          src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
                                          alt="..." /&gt;
                                      &lt;div class="carousel-caption"&gt;
                                          &lt;h4&gt;First Thumbnail Label&lt;/h4&gt;
                                          &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply
                                              random text. It has roots in a piece of classical Latin
                                              literature from 45 BC, making it over 2000 years old.&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  ...
                              &lt;/div&gt;
  
                              &lt;!-- Controls --&gt;
                              &lt;a class="left carousel-control" href="#carousel-example-generic"
                                  role="button" data-slide="prev"&gt; &lt;span
                                  class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                              &lt;/a&gt; &lt;a class="right carousel-control"
                                  href="#carousel-example-generic" role="button" data-slide="next"&gt;
                                  &lt;span class="glyphicon glyphicon-chevron-right"
                                  aria-hidden="true"&gt;&lt;/span&gt; &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;img src="/image/logo.png" class="img-responsive" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;hr /&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;div clas="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;img src="/image/bestseller.png" class="img-responsive" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;div clas="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;img src="/image/hours.png" class="img-responsive" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;div clas="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;img src="/image/faq.png" class="img-responsive" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;div class="home-headline"&gt;
                  &lt;span&gt;Featured Books&lt;/span&gt;
              &lt;/div&gt;
              &lt;hr style="margin-top: -15px;" /&gt;
          &lt;/div&gt;
  
  
          &lt;div class="row"&gt;
              &lt;div id="featured-books" class="carousel slide" data-ride="carousel"&gt;
                  &lt;!-- Indicators --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#featured-books" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#featured-books" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="#featured-books" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
  
                  &lt;!-- Wrapper for slides --&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                      &lt;div class="item active"&gt;
                          &lt;img src="/image/shelf.png" class="img-responsive" /&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img src="/image/shelf.png" class="img-responsive" /&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img src="/image/shelf.png" class="img-responsive" /&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;img class="img-responsive" src="/image/book1.png" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Controls --&gt;
                  &lt;a class="left carousel-control" href="##featured-books"
                      role="button" data-slide="prev"&gt; &lt;span
                      class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt; &lt;a class="right carousel-control" href="##featured-books"
                      role="button" data-slide="next"&gt; &lt;span
                      class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- end of container --&gt;
  
  
      &lt;div th:replace="common/header :: body-bottom-scripts" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>header.html</strong> &lt;- Thymeleaf file, where I'm having issues <strong>*Updated</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:th="http://www.thymeleaf.org" &gt;
  &lt;head th:fragment="common-header"&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  
  &lt;title&gt;Alexander's Bookstore&lt;/title&gt;
  
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link href="/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;link href="/css/non-responsive.css" rel="stylesheet" /&gt;
  
  &lt;!-- Custom styles for this template --&gt;
  &lt;link href="/css/style.css" rel="stylesheet" /&gt;
  
  &lt;link rel="icon" href="/image/applie-touch-icon.png" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div th:fragment="navbar"&gt;
          &lt;div class="page-top"
              style="width: 100%; height: 20px; background-color: #f46b42;"&gt;&lt;/div&gt;
          &lt;!-- Static navbar --&gt;
          &lt;nav class="navbar navbar-default navbar-inverse"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#"&gt;ALEXANDER'S BOOKSTORE&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar"&gt;
                      &lt;ul class="nav navbar-nav navbar-left"&gt;
                          &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"
                              data-toggle="dropdown" role="button" aria-haspopup="true"
                              aria-expanded="false"&gt;BOOKS &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Browse the bookshelf&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Store hours &amp;#38; Directions&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;&lt;/li&gt;
                          &lt;form class="navbar-form"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input type="text" name="keyword" class="form-control"
                                      placeholder="Book title" /&gt;
                              &lt;/div&gt;
                              &lt;button type="submit" class="btn btn-default"&gt;Search&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;SHOPPING CART&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;MY ACCOUNT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;LOGOUT&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!--/.nav-collapse --&gt;
              &lt;/div&gt;
              &lt;!--/.container-fluid --&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div th:fragment="body-bottom-scripts"&gt;
      &lt;script
          src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>HomeController.java</strong></p>
  
  <pre><code>package com.bookstore.controller;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestMapping;
  
  @Controller
  public class HomeController {
      @RequestMapping("/")
      public String index() {
          return "index";
      }
  }
  </code></pre>
  
  <p><strong>pom.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"&gt;
    &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
  
    &lt;groupId&gt;com.bookstore&lt;/groupId&gt;
    &lt;artifactId&gt;bookstore&lt;/artifactId&gt;
    &lt;version&gt;0.1.0&lt;/version&gt;
    &lt;packaging&gt;war&lt;/packaging&gt;
  
    &lt;name&gt;Bookstore&lt;/name&gt;
    &lt;description&gt;frontend part for our bookstore project&lt;/description&gt;
    &lt;!-- FIXME change it to the project's website --&gt;
    &lt;url&gt;http://www.example.com&lt;/url&gt;
  
    &lt;parent&gt;
      &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
      &lt;artifactId&gt;spring-boot-starter-parent&lt;/artifactId&gt;
      &lt;version&gt;2.0.3.RELEASE&lt;/version&gt;
      &lt;relativePath/&gt; &lt;!-- lookup parent from repository --&gt;
    &lt;/parent&gt;
  
    &lt;properties&gt;
      &lt;project.build.sourceEncoding&gt;UTF-8&lt;/project.build.sourceEncoding&gt;
      &lt;maven.compiler.source&gt;1.10&lt;/maven.compiler.source&gt;
      &lt;maven.compiler.target&gt;1.10&lt;/maven.compiler.target&gt;
    &lt;/properties&gt;
  
    &lt;dependencies&gt;
  
      &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
        &lt;version&gt;2.0.3.RELEASE&lt;/version&gt;
      &lt;/dependency&gt;
  
      &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
      &lt;/dependency&gt;
  
      &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-test&lt;/artifactId&gt;
        &lt;scope&gt;test&lt;/scope&gt;
      &lt;/dependency&gt;
  
      &lt;dependency&gt;
        &lt;groupId&gt;junit&lt;/groupId&gt;
        &lt;artifactId&gt;junit&lt;/artifactId&gt;
        &lt;version&gt;4.11&lt;/version&gt;
        &lt;scope&gt;test&lt;/scope&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
        &lt;groupId&gt;com.bookstore&lt;/groupId&gt;
        &lt;artifactId&gt;bookstore&lt;/artifactId&gt;
        &lt;version&gt;0.1.0&lt;/version&gt;
      &lt;/dependency&gt;
  
    &lt;/dependencies&gt;
  
    &lt;build&gt;
      &lt;finalName&gt;bookstore&lt;/finalName&gt;
      &lt;pluginManagement&gt;&lt;!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --&gt;
        &lt;plugins&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-clean-plugin&lt;/artifactId&gt;
            &lt;version&gt;3.0.0&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-resources-plugin&lt;/artifactId&gt;
            &lt;version&gt;3.0.2&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-compiler-plugin&lt;/artifactId&gt;
            &lt;version&gt;3.7.0&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-surefire-plugin&lt;/artifactId&gt;
            &lt;version&gt;2.20.1&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-war-plugin&lt;/artifactId&gt;
            &lt;version&gt;3.2.0&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-install-plugin&lt;/artifactId&gt;
            &lt;version&gt;2.5.2&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;artifactId&gt;maven-deploy-plugin&lt;/artifactId&gt;
            &lt;version&gt;2.8.2&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
            &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
            &lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifactId&gt;
          &lt;/plugin&gt;
        &lt;/plugins&gt;
      &lt;/pluginManagement&gt;
    &lt;/build&gt;
  &lt;/project&gt;
  </code></pre>
  
  <p><strong>my project file structure</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EN07d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EN07d.png" alt="enter image description here"></a></p>
  
  <p>I've tried to troubleshoot by rebuilding the project and cleaning out my .m2 repository but it gives me the same problem so I've rounded it down to a thymeleaf issue. Any help is appreciated! </p>