title: React Bootstrap container different sizing to regular HTML Bootstrap
body: <p>Why does the Bootstrap container component size differently than a regular HTML Bootstrap, not sure if I am missing a prop or not?</p>
  <p>This is what I get the output I get for both:
  (the white space in the sides are from the container margin)</p>
  <p><a href="https://i.stack.imgur.com/bm30t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bm30t.png" alt="enter image description here" /></a></p>
  <p>React code:</p>
  <pre><code>&lt;Container&gt;
    &lt;Row className=&quot;row&quot;&gt;
      &lt;Col className=&quot;col-lg-3 col-md-4&quot;&gt;
        &lt;div
          style={{ width: &quot;100%&quot;, height: &quot;100vh&quot;, backgroundColor: &quot;blue&quot; }}
        &gt;&lt;/div&gt;
      &lt;/Col&gt;
      &lt;div className=&quot;col-lg-9 col-md-8 tab-container&quot;&gt;
          &lt;div
              style={{ width: &quot;100%&quot;, height: &quot;100vh&quot;, backgroundColor: &quot;red&quot; }}
          &gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/Row&gt;
  &lt;/Container&gt;
  </code></pre>
  <p>Regular HTML code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-3 col-md-4&quot;&gt;
              &lt;div style=&quot;width: 100%; height: 100vh; background-color: blue&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-lg-9 col-md-8&quot;&gt;
              &lt;div style=&quot;width: 100%; height: 100vh; background-color: red&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Can someone help with the correct styling/fix for the React version to match the regular one please?</p>