title: Bootstrap popup does not appear when include bootstrap.min.css
body: <p>I'm having problem using CSS as I'm new to this. I'm currently using the bootstrap popup, example as below. When I click on the 'Full Spec' button, the popup box will appear. </p>
  
  <p>However, the file <strong>bootstrap.min.css</strong> seems to be the problem now. If I include bootstrap.min.css in my code, the popup box won't appear. And I if did not include that file, the popup box will appear, but the alignment, size of my images, text and others changes. </p>
  
  <p>Is there a way so that my popup box would appear without disturbing the alignment and size of the image/text? I've tried changing the code in bootstrap.min.css but its kinda hard as I need to scroll it from left to right instead of top to bottom.</p>
  
  <p>Please help me solve my problem. Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/xnQIm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xnQIm.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="icon" type="image/ico" href="favicon.ico"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
      &lt;link rel="stylesheet" href="css/animate.css"&gt;
      &lt;link rel="stylesheet" href="css/templatemo_misc.css"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;  
  
      &lt;script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js2/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  </code></pre>