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.