CODEWITHSUNDEEP
reactjsreact-bootstrap
Tee F
Tee F

Reputation: 285

Col width in React Bootstrap

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?

enter image description here

Upvotes: 3

Views: 14422

Answers (2)

Jammar
Jammar

Reputation: 446

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)

Upvotes: 0

ManavM
ManavM

Reputation: 3098

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.

Upvotes: 3

Related Questions