CODEWITHSUNDEEP
twitter-bootstrapreactstrap
user7229669
user7229669

Reputation: 153

How to change column width based on the number of columns present?

Take the following reactstrap example:

       <Container fluid>
        <Row>
          <Col md={4}>
            <TodoAdd />
          </Col>
          <Col md={8}>
            <TodoList />
          </Col>
        </Row>
      </Container>

At times, the second column is not present in the DOM. When this occurs, I would like for the 'md' property on the first column to be {12}.

Another way to put it, I would like for columns to be fluid, i.e. take up the full width of the row when sibling columns aren't present.

Upvotes: 0

Views: 1403

Answers (1)

Robert Purcea
Robert Purcea

Reputation: 281

You can do it like this: 

  <Container fluid>
    <Row>
      <Col>
        <TodoAdd />
      </Col>
      <Col md={8}>
        <TodoList />
      </Col>
    </Row>
  </Container>

The first column will take up whatever amount of space is left by the others columns who do have their size mentioned (via md, sm etc.)

Upvotes: 2

Related Questions