how do i give rows in a bootstrap container a total height equal to column height?

You can add display:flex to the parent component.

.parent{
  display:flex;
  border:1px solid red;
}

Row, Col {
  border: 2px solid black;
 }
<Container fluid>
        <Row class="parent">
          <Col>
            Only row in first column
            <img src="https://picsum.photos/id/100/100/200" />
          </Col>
          <Col >
            <Row>
                First row in second column
            </Row>
            <Row>
                Second row in second column
            </Row>
            <Row>
                Third row in second column
            </Row>
            <Row>
                Fourth row in second column
            </Row>
          </Col>
        </Row>
      </Container>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top