Search code examples
reactjsbootstrap-4reactstrap

Reactstrap: Row/Col classes (col-6) aren't working for a Card component

I have a React app and am using Reactstrap to style my components. I want a single Card to run with full width of my Container, so I am using the classes col-md-6 for two different parts of the CardBody, but it's still stacking vertically instead of horizontally across. I want the price and "Select" button to be side-by-side with the Product Title and description. I have the bootstrap cdn in my index.html file and I know it's connected because I have Bootstrap classes working in other components of my app. Can anyone help me figure out how to get it to stack horizontally?

image

My code:

// component is wrapped in a <Container> in the parent component
<Row>
  <Card>
    <Col className="col-6">
      <CardBody>
        <h5>Product title</h5>
        <CardText>Some quick example text to build on the product title and make up the bulk of the card's content.</CardText>
      </CardBody>
    </Col>
    <Col className="col-6">
      <CardBody>
        <h6>Price: { cost }</h6>
        <Button color="success" size="lg" onClick={ handleSelection }>Select</Button>
      </CardBody>
    </Col>
  </Card>
</Row>
Solution

  • I figured it out. Something about the Card component's classes throws things off. If you wrap the Row in the Card instead of the other way around, it will work.

    <Card>
  <Row>
    <Col>
      <CardBody>
        <h5>Product Title</h5>
        <CardText>Text about product</CardText>
      </CardBody>
    </Col>
    <Col>
      <CardBody>
        <h6>Price: 50</h6>
        <Button>Select</Button>
      </CardBody>
    </Col>
  </Row>
</Card>