How can I set height of Row/Cols with % in React-Bootstrap/MDBReact?

Question

so basically I have a little problem with setting up a height of Row/Cols using the % in React-Bootstrap. I have a Row with 8 columns(Im gonna add some buttons,icons,images and text field here) which all of them have to be the same height.

I did try use just % with height and maxHeight but obviously it didnt work out. I think pxs are pointless because it will be displayed on screens with different resolution so im afraid it will just mess up. I did download the MDBreact and used 'className="h-25 d-inline-block"' but it didnt work neither.

     <Container md={12} style={{backgroundColor: "red", margin:"0px", maxWidth: "100%", maxHeight: "85%", height: "85%"}}>

           <Row>
           <Col className="h-25 d-inline-block" style={{backgroundColor: "yellow"}}>Machine 11</Col>
            <Col style={{backgroundColor: "pink"}}> Machine 21</Col>
            <Col style={{backgroundColor: "blue"}}> Machine 31</Col>
            <Col style={{backgroundColor: "purple"}}> Machine 41</Col>
            <Col style={{backgroundColor: "gray"}}> Machine 51</Col>
            <Col style={{backgroundColor: "red"}}> Machine 61</Col>
            <Col style={{backgroundColor: "pink"}}> Machine 71</Col>
            <Col style={{backgroundColor: "magenta"}}> Machine 81</Col>
                </Row>


    </Container>

I did expect the height of column set equally at 20/25% (There gonna be 3 Rows + navbar is made already) but I got literally nothing except I do it with pixels but its missing the point.

@Goteil Did I successfully answer your question below? – terrymorse Apr 10 '20 at 15:13 — terrymorse, Apr 10 '20 at 15:13

terrymorse · Accepted Answer · 2020-04-10T15:11:06.587

You have the container's height set to 85%, so its parent container must have a specific height. If the container's parent doesn't have a specific height, then you must set the container height.

You also need to set the height of each row to "h-25".

Here's an example using HTML (the effect is the same in react).

/* styling just to show element dimensions */
.container {
  border: 1px dashed green;
  margin-top: 8px;
}
.col {
  border: 1px solid #ccc;
  background-color: #e0e0e0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- same as <Container style={{height: 200px}}> -->
<div class="container" style="height: 200px">

  <!-- same as <Row className="h-25"> -->
  <div class="row h-25">
    <div class="col">row1-col-1</div>
    <div class="col">row1-col-2</div>
    <div class="col">row1-col-3</div>
  </div>

  <div class="row h-25">
    <div class="col">row2-col-1</div>
    <div class="col">row2-col-2</div>
    <div class="col">row2-col-3</div>
  </div>

  <div class="row h-25">
    <div class="col">row2-col-1</div>
    <div class="col">row2-col-2</div>
    <div class="col">row2-col-3</div>
  </div>
</div>

How can I set height of Row/Cols with % in React-Bootstrap/MDBReact?

1 Answers1