react-bootstrap grid layout columns rendering as rows - react-bootstrap

Question

I have the following render method and I am expecting to have two columns in my layout but am getting two rows instead:
render() {
return (
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<Grid>
<Row>
<Col>
My Header
</Col>
</Row>
<Row>
<Col>test</Col><Col>test</Col>
</Row>
</Grid>
</div>
);
I'd expect things to render like this:
My header
Col One Col Two
but instead things are rendered like this:
My header
Col One
Col Two
What am I missing?

Answer 1

You are likely not importing the bootstrap css. Check out this issue on Github or the documentation on this page for React Bootstrap.
From React Bootstrap Website:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>

Answer 2

I had the same problem. I resolved it by adding xs- specifications. Not entirely sure why it fixed it, so can't really elaborate on that. Maybe someone more experienced can.
To clarify, here's a working example of your code:
render() {
return (
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<Grid>
<Row>
<Col>
My Header
</Col>
</Row>
<Row>
<Col xs = "5" >test</Col><Col xs = "5" >test</Col>
</Row>
</Grid>
</div>
);

Answer 3

TRY this code
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
For more info :
https://getbootstrap.com/docs/4.0/layout/grid/