reactjs and bootstrap columns not lining up

Question

Can someone please shed some light on this for me ... No matter what I do with the below code I always seem to have three columns but I just want two .. What I mean is the way the below shows on my page it is expecting another one to the right .. so it does not look like this

COL 1 ..... SPACE HERE........ COL 2

But instead

COL 1 COL 2

    <Row className="show-grid text-center">
      <Col xs={12} sm={4} className="person-wrapper">
        <Image src="assets/image.jpg" circle className="profile-pic"/>
        <h3></h3>
      <Link to="/place">
        <Button bsStyle="primary">click</Button>
      </Link>
      </Col>
      <Col xs={12} sm={4} className="person-wrapper">
        <Image src="assets/image1.jpg" circle className="profile-pic"/>
        <h3></h3>
      <Link to="/place">
        <Button bsStyle="primary">click</Button>
      </Link>
      </Col>
    </Row>

You've written I want COL1 COL2 But instead getting COL1 COL2 , okay so what's the difference? — Germa Vinsmoke
– Germa Vinsmoke, Commented Mar 20, 2019 at 8:41
Try sm={{ span: 4, offset: 4 }} on the second <Col>. Source : react-bootstrap.github.io/layout/grid/#responsive-grids Never used Bootstrap with ReactJS so I don't know if it'll work. Tell us if it works or not ! — Bambou
– Bambou, Commented Mar 20, 2019 at 10:43

knightburton · Accepted Answer · 2019-03-20 10:52:03Z

2

You should set an offset to each "resolution" you want to cover, in your case for sm:

<Row className="show-grid text-center">
  <Col xs={12} sm={4} className="person-wrapper">
    {/* your content goes here */}
  </Col>
  <Col xs={12} sm={{ span: 4, offset: 4 }} className="person-wrapper">
    {/* your content goes here */}
  </Col>
</Row>

answered Mar 20, 2019 at 10:52

knightburton

1,16411 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JensV · Accepted Answer · 2019-03-20 10:55:44Z

0

The grid contains 12 columns, not 8. Your two sm columns need to add up to 12. Use sm={6} instead of sm={4}

<Row className="show-grid text-center">
  <Col xs={12} sm={6} className="person-wrapper">
    <Image src="assets/image.jpg" circle className="profile-pic"/>
    <h3></h3>
  <Link to="/place">
    <Button bsStyle="primary">click</Button>
  </Link>
  </Col>
  <Col xs={12} sm={6} className="person-wrapper">
    <Image src="assets/image1.jpg" circle className="profile-pic"/>
    <h3></h3>
  <Link to="/place">
    <Button bsStyle="primary">click</Button>
  </Link>
  </Col>
</Row>

answered Mar 20, 2019 at 10:55

JensV

4,6692 gold badges22 silver badges50 bronze badges

Collectives™ on Stack Overflow

reactjs and bootstrap columns not lining up

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related