title: React-bootstrap: two columns in one row not rendering
body: <p>I have been trying to render two columns in one row and the code that I am using is given below. The expected output is this<a href="https://i.stack.imgur.com/kTThd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kTThd.png" alt="enter image description here"></a>. but react is rendering this. <a href="https://i.stack.imgur.com/gebct.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gebct.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;Grid&gt;
    &lt;Row className="what-the-coaching-in"&gt;
      What the coaching includes
    &lt;/Row&gt;
    &lt;Row className="what-the-coaching-in-below" /&gt;
    &lt;Row&gt;
      &lt;Col xs={6} md={4} className="coaching-green-test-2"&gt;
        &lt;ul&gt;
          &lt;li&gt;DNA Test &amp; personal consultation.&lt;/li&gt;            
          &lt;li&gt;1 to 1 Deep dive session with your Coach to set your 90 day goals, 30 and 60-day bench marks, and your first two-week Daily Core Five (DC5).&lt;/li&gt;
          &lt;li&gt;Weekly ‘team’ coaching calls to set new outcomes, overcome hurdles, brain storm and support each other.&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/Col&gt;
      &lt;Col xs={6} md={4} className="coaching-green-test-2"&gt;
        &lt;ul&gt;
          &lt;li&gt;Daily support through email and phone messaging.&lt;/li&gt;            
          &lt;li&gt;Bespoke exercise programme.&lt;/li&gt;
          &lt;li&gt;Meal plans and recipes.&lt;/li&gt;
          &lt;li&gt;Metric analysis.&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/Col&gt;
    &lt;/Row&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Any idea why two columns are not created? Any help will be appreciated and thanks a ton in advance!!</p>