title: Why does using bootstrap change css layout?
body: <p>I am using the <a href="https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp" rel="nofollow noreferrer" title="Bootstrap Progress Bars">Bootstrap Progress Bars</a>. Here is my code:</p>
  <pre><code>  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;progress&quot;&gt;
      &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;70&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width:1%&quot;&gt;
        1%
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It changes the display output of the website. Do you know why is that? I use WordPress.</p>
  <p><img src="https://i.imgur.com/0nPJzrZ.png" alt="" /></p>
  <p><img src="https://i.imgur.com/eQGQQra.png" alt="" /></p>