CODEWITHSUNDEEP
reactjsbootstrap-4
ashish Arora
ashish Arora

Reputation: 41

I am Trying to center the card but its not working

I am building a react application in which I am trying to center the blocks,by using justify content center but its not working. I have used the justify-content-center, center -block ,but still its not working

Please Help me out

function Trackers(props) {

  return (
    <>
      
      <h2 class="font-weight-bold text-center mt-4 mb-4" >COVID-19 TRACKER</h2>
      <Container>
        <Row >
        <Col xs={12} sm={12} md={4} className="center-block">
      
          <Card style={{ width: '15rem' }} className="justify-content-center text-center ml-1 mr-1 mt-1 mb-1" >
            <Card.Body>
              <h6>Infected</h6>
              <h5>{props.data["statewise"][0]["active"]}</h5>
              <br />
              <h6>No of Active Cases of Covid-19</h6>
              <Container className="bg-primary " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>

            </Card.Body>
          </Card></Col>

          
          <Col xs={12}  sm={12} md={4} className="justify-content-center ">
      
          <Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1" >
            <Card.Body>
              <h6>Recovered</h6>
              <h5>{props.data["statewise"][0]["recovered"]}</h5>
              <br />
              <h6>No of Recovered Cases of Covid-19</h6>
              <Container className="bg-success " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>

            </Card.Body>
          </Card></Col>
          <Col xs={12}  sm={12} md={4} className="justify-content-center ">
       
        <Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1">
            <Card.Body>
              <h6>Deaths</h6>
              <h5>{props.data["statewise"][0]["deaths"]}</h5>
              <br />
              <h6>No of Deaths Cases of Covid-19</h6>
              <Container className="bg-dark " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>
 
            </Card.Body>
          </Card>
         </Col>       
        </Row>
      </Container>
    </>
  );
}

https://i.sstatic.net/MqKYV.png

Upvotes: 0

Views: 70

Answers (2)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

The correct answer you already have with mx-auto. On top of that you can also introduce h-100 on the cards to make them align properly on all screens. With a .card-footer you can align the border layout as well.

DEMO with columns

To take it a little further, you can get rid of the columns and use a card-layout. A .card-deck seems the ideal approach.

DEMO with card-layout

Upvotes: 0

Arleigh Hix
Arleigh Hix

Reputation: 10877

You just need to add class p-0(zero padding) to your Col and then on your Card element replace classes ml-1 mr-1 with just mx-auto (sets the margins on the x-axis, left & right to auto)

https://jsfiddle.net/85nj7tz1/

FYI .justify-content-center is used on a row to center the columns within the row.

Upvotes: 2

Related Questions