CODEWITHSUNDEEP
reactjsreact-bootstrap
Rachit
Rachit

Reputation: 248

React-bootstrap: two columns in one row not rendering

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 thisenter image description here. but react is rendering this. enter image description here

<Grid>
  <Row className="what-the-coaching-in">
    What the coaching includes
  </Row>
  <Row className="what-the-coaching-in-below" />
  <Row>
    <Col xs={6} md={4} className="coaching-green-test-2">
      <ul>
        <li>DNA Test & personal consultation.</li>            
        <li>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).</li>
        <li>Weekly ‘team’ coaching calls to set new outcomes, overcome hurdles, brain storm and support each other.</li>
      </ul>
    </Col>
    <Col xs={6} md={4} className="coaching-green-test-2">
      <ul>
        <li>Daily support through email and phone messaging.</li>            
        <li>Bespoke exercise programme.</li>
        <li>Meal plans and recipes.</li>
        <li>Metric analysis.</li>
      </ul>
    </Col>
  </Row>
</Grid>

Any idea why two columns are not created? Any help will be appreciated and thanks a ton in advance!!

Upvotes: 0

Views: 2196

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36209

This looks like you didn't include necessary CSS file for bootstrap.

To use React-Bootstrap, include the CSS for Bootstrap v3

Paste this in your <head> tag in HTML file:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Upvotes: 2

Related Questions