title: Bootstrap modal appearing under background while using jade
body: <p>I'm a starting on node.js and jade, I got an app in google app engine working with twitter bootstrap.</p>
  
  <p><strong>Problem</strong> When I converted the same html to jade though, the modal isn't behaving as it should, rather the background comes over it. I removed fade class but to no avail. Here's the code in jade</p>
  
  <pre><code>  #newWordModal.modal.hide
      .modal-header
        button.close(type='button', data-dismiss='modal') x
        h3 Add A Word
      .modal-body
        #create-word
          input#new-word-name(type='text', placeholder='Type in a word name')
          input#new-word-def(type='text', placeholder='Define it....')
      .modal-footer
        a.btn(href='#', data-dismiss='modal') Close
        a#add-word.btn.btn-primary(href='#', data-dismiss='modal') Add Word!
  </code></pre>
  
  <p>The same in html is this</p>
  
  <pre><code>&lt;div class="modal hide fade" id="newWordModal"&gt;
    &lt;div class="modal-header"&gt;
     &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
     &lt;h3&gt;Add A Word&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;div id="create-word"&gt;
      &lt;input type="text" id="new-word-name" placeholder="Type in a word name" /&gt;
      &lt;input type="text" id="new-word-def" placeholder="Define it...." /&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
     &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
     &lt;a href="#" class="btn btn-primary" data-dismiss="modal" id="add-word"&gt;Add Word!&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Have I missed something here?</p>