In react one can set col widths depending on the screen size:
<Col xs={12} sm={4} md={4} lg={4}>
The problem I am having is that My Parent component is rendering two child components side by side, A and B. A is a table that holds other components in every table cell, Child1, Child2 etc..
How can I define <Col> widths for Child1 based on my parent A width and not the screen width?
The Col widths depend on the width of the parent by default, for example
<Col xs={6}>
<Col xs={6}>
A
</Col>
<Col xs={6}>
A
</Col>
</Col>
<Col xs={6}>
<Col xs={6}>
B
</Col>
<Col xs={6}>
B
</Col>
</Col>
will result in
A A B B
Please post your code and the result you're getting to help us find the problem.
The number of columns you wish to span for Extra small devices Phones (<768px) class-prefix col-xs-
<Col xs={6} md={4} lg={2} />, then it will render in half the parent's width in a small screen(xs), a third of the parent's width in a medium screen(md) and so on. But it will depend on the parent's width and not on the width of the screen.
Col should not be parent or child of Col.
If I wanted to do like your picture I would do like this:
<Row>
<Col size={4}>
<Row> A
<Col size={12}> Child 1 </Col>
...
</Row>
</Col>
<Col>
<Row> B ... </Row>
</Row>
size={4} = should be translated to col-4 but I can't find that in react-bootstrap (therefore you might have to set each viewport's size: xs, sm, md, etc...)
col-12 of course implies the whole row in a 12-column setup (like standard Bootstrap)
<div class="w-100"></div> can also be used instead of col-12 to make a new row.