title: Bootstrap modal in thymeleaf project
body: <p>I have maven+spring+thymeleaf+bootstrap project with this page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  &lt;title&gt;Index&lt;/title&gt;
  &lt;meta name="description" content="app" /&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
  
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" /&gt;
      &lt;link rel="stylesheet" href="../../css/bootstrap.css" th:href="@{/css/bootstrap.css}"/&gt;
      &lt;link rel="stylesheet" href="../../css/bootstrap-responsive.css" th:href="@{/css/bootstrap-responsive.css}"/&gt;
      &lt;link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" th:href="@{/css/bootstrap-responsive.min.css}"/&gt;
      &lt;link rel="stylesheet" href="../../css/bootstrap-modal.css" th:href="@{/css/bootstrap-modal.css}"/&gt;
      &lt;script src="../../js/modernizr-2.0.6.min.js"  type="text/javascript" th:src="@{/js/modernizr-2.0.6.min.js}"&gt;&lt;/script&gt;
      &lt;script src="../../js/bootstrap.min.js"  type="text/javascript" th:src="@{/js/bootstrap.min.js}"&gt;&lt;/script&gt;
      &lt;script src="../../js/bootstrap.js"  type="text/javascript" th:src="@{/js/bootstrap.js}"&gt;&lt;/script&gt;
      &lt;script src="../../js/jquery-2.0.3.js" th:src="@{/js/jquery-2.0.3.js}"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="navbar"&gt;
                &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                    &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;a class="brand" href="#"&gt;Lau&lt;/a&gt;
                    &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
  
  
                      &lt;ul class="nav pull-right"&gt;
  
  
  
                        &lt;li&gt;&lt;a href="/BusinessPoint/sign_in" th:text="#{msg.sign_in}"&gt;Sign in&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="" th:text="#{msg.register}"&gt;Register&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#myModal" th:text="#{msg.register_company}"&gt;Register company&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
              &lt;/div&gt;
  
    &lt;h1 th:text="${serverTime}"&gt;&lt;/h1&gt;
  
  
        &lt;a href="#modalwin" data-toggle="modal" class="btn btn-large"&gt;Display Window&lt;/a&gt;
  
  
  &lt;!-- first modal window --&gt;
      &lt;div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;header class="modal-header"&gt;
          &lt;a href="#" class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
          &lt;h3&gt;Prepare to be Amazed &lt;small&gt;or easily amused :]&lt;/small&gt;&lt;/h3&gt;
        &lt;/header&gt;
  
        &lt;div class="modal-body"&gt;
  
          &lt;p&gt;Close me by clicking anywhere outside the window, or by clicking the blue button.&lt;/p&gt;
  
          &lt;p&gt;lool&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;footer class="modal-footer"&gt;
          &lt;a href="#" class="btn btn-primary" id="okwin01"&gt;Sounds Good!&lt;/a&gt;
        &lt;/footer&gt;
      &lt;/div&gt; &lt;!-- @end @modalwin --&gt;
  
  
  ​
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And I can't show bootstrap modals. What is more I see '?' character near my button...
  I have included all necesary files. Css files are ok, I guess js files too. I tried evertything and no result. Any ideas?</p>
  
  <p>File source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  &lt;title&gt;Index&lt;/title&gt;
  &lt;meta name="description" content="app" /&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
  
      &lt;link href="/BusinessPoint/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="/BusinessPoint/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.css" /&gt;
      &lt;link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.min.css" /&gt;
      &lt;script src="/BusinessPoint/js/modernizr-2.0.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/BusinessPoint/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/BusinessPoint/js/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/BusinessPoint/js/bootstrap-modal.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="navbar"&gt;
                &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                    &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;a class="brand" href="#"&gt;Laud&lt;/a&gt;
                    &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
  
  
                      &lt;ul class="nav pull-right"&gt;
  
  
  
                        &lt;li&gt;&lt;a href="/BusinessPoint/sign_in"&gt;Sign in&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;Register&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#myModal"&gt;Register company&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
              &lt;/div&gt;
  
    &lt;h1&gt;July 31, 2013 4:24:24 PM CEST&lt;/h1&gt;
  
  
  
  &lt;div id="w" class="container center"&gt;
  
  &lt;!-- first modal window --&gt;
      &lt;div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;header class="modal-header"&gt;
          &lt;a href="#" class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
          &lt;h3&gt;Prepare to be Amazed &lt;small&gt;or easily amused :]&lt;/small&gt;&lt;/h3&gt;
        &lt;/header&gt;
  
  
  
  
      &lt;/div&gt; 
  
  &lt;a href="#modalwin" data-toggle="modal" class="btn btn-large"&gt;Display Window&lt;/a&gt;
  ?
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>