title: Bootstrap Modal wont show up
body: <p>I am trying to create a simple interface with Bootstrap. I have a small page with a few things. It works just fine, but then I wanted to add a modal element to it. I took the example directly from the second <a href="http://getbootstrap.com/2.3.2/javascript.html#modals" rel="nofollow">bootstrap example</a>. But when I try to use it only the shadow appears, which because the buttons don't appear I can't exit out of it.
  Why can't I get the modal to work?</p>
  
  <p>Initial code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;  
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
        &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
        &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row border-top-bottom"&gt;
          &lt;div class="col-sm-1"&gt;
          &lt;h5&gt;WEEK 1&lt;/h5&gt; 
          &lt;/div&gt;
          &lt;div class="col-sm-2 border-right"&gt;    
              &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
              &lt;a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"&gt;&lt;img src="http://placehold.it/50x50"&gt;&lt;/a&gt;
              &lt;p&gt;&lt;a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"&gt;&lt;img src="http://placehold.it/50x50"&gt;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="panel panel-info"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;h3 class="panel-title"&gt;This weeks project tittle&lt;/h3&gt;                
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;Project description: ba nananananana nananananana nananananana nananana nana batman!&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;script&gt;
      $('.btn').popover();
  &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Added modal code:</p>
  
  <pre><code>&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;One fine body…&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>