How to make I make Reactstrap Responsive?

Question

I am new to using reactstrap (not react-bootstrap) and am trying to wrap my head around how to render a "mobile" and a "desktop" view.

How would I make reactstrap render the page in one layout in "mobile" view and another way in "desktop" view?

I have done some work with media queries with plain CSS and had the page render based on the size in a different project.

How would I do this in reactstrap? Would I wrap everything in a <Container>, <Row>, and <Col> elements and set the breakpoints (sm, md, lg) to each container?

I was trying to make sense of the code in the docs but was having trouble understanding them.

Here is a snippet: https://reactstrap.github.io/?path=/docs/components-layout--layout

<Container>
...
<Row
    md="4"
    sm="2"
    xs="1"
  >
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
</Container>

I think the above means that when the screen is md but bigger than sm, render the columns for the row present in the block with four columns in the space (3 grid units per each for the total of 12). When the screen is sm but bigger than xs, display each column in two columns (6 grid units for each). When the screen is xs or smaller, display each column so it takes the whole 12 grid space.

Thank you for the help!

Answer 1

Yes, you're right, basically a breakpoint of 1 means you will have only 1 column (12 grid units), 2 columns 6 units of grid for each column, etc.

Using reactstrap you will add breakpoints for Row component, below there's an example:

<Container>
  // here you will have 2 columns when screen is xs, each column with 6 grid units
  <Row xs="2">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 3 columns when screen is xs, each column with 4 grid units
  <Row xs="3">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 4 columns when screen is xs, each column with 3 grid units
  <Row xs="4">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  <h6>
    xs=“4“
  </h6>
  <Row xs="4">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col
      className="bg-light border"
      xs="6"
    >
      xs=“6“
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 1 column when screen is xs, 2 column when is sm and 4 columns when is md
  <Row
    md="4"
    sm="2"
    xs="1"
  >
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
</Container>