reactjs and bootstrap columns not lining up - html

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>

Answer 1

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>

Answer 2

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>