style div next to and on top of each others

Question

so i have divs created in react basically they are components and i want to style them using bootstrap like this:

div div div

div     div

div     div

so basically there are 5components,the top 3 should be small and stack next to each others with small margin. the middle two are bigger and they are under the right and left divs and the bottom ones the same as the middle divs.

i have tried doing like col-6 for the middle and col-4 for the top ones but they were all over the place and messy.

this is what i tried without using css just bootstrap:

<div className="container">
          <div className="row">
          <div className="col-lg-4">
          <Card />

          <ActualLineChart data={systolic}/>

          <ActualLineChart data={Diastolic}/>
          </div>
          </div>
          <div className="row">
            <div className="col-lg-6">
              <div>
          <ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
          </div>
          <ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
          </div>
          </div>
          <div className="row">
          <div className="col-lg-6">
          <DistributionChart/>

          <DistributionChart />
          </div>
          </div>
          </div>

how can i do this behavior?

Answer 1

I am guessing that if you are using react-bootstrap you probably have already installed it and included react component in your app.js file using this

import { Container, Row, Col } from 'React-Bootstrap';

Then you can simply use this for your desired output.

<Container>

  <Row>
    <Col xs="4">
     component 1
    </Col>
    <Col xs="4">
     component 2
    </Col>
    <Col xs="4">
     component 3
    </Col>
  </Row>

  <Row className="justify-content-between">
    <Col xs="4">
     component 4
    </Col>
    <Col xs="4">
     component 5
    </Col>
  </Row>

  <Row className="justify-content-between">
    <Col xs="4">
     component 6
    </Col>
    <Col xs="4">
     component 7
    </Col>
  </Row>

</Container>

Output will be look like this: