Bootstrap no columns in grid layout

help
1

Hi,

I have created a simple 2x2 table, but I get a 4x1 result.

I have the latest meteor 1.3.2.4
I installed:
npm install bootstrap classnames --save
npm install react-bootstrap --save

I have modified the App.jsx in the meteor-react tutorial as follows:
//=======
’’'
import React, { Component } from ‘react’;
import {Grid, Row, Col} from ‘react-bootstrap’;

export default class App extends Component {

render() {
return (

  <Grid>

   <Row>
    <Col xs={12}>
     <p>
      HI
     </p>
    </Col>
    <Col xs={6}>
     <p>
      HI
     </p>
    </Col>
   </Row>

   <Row>
    <Col xs={12}>
     <p>
      HI
     </p>
    </Col>
    <Col xs={6}>
     <p>
      HI
     </p>
    </Col>
   </Row>
  </Grid>

);

}
}
’’’
//=======

The end result gives:
HI
HI
HI
HI

Any help will be greatly appreciated

2

We can’t read your code or templates. Please wrap in triple backticks, like this:

```
paste 
your
code
here
```
3

My bad
xs={12} forces the next col xs={6} to the next line because there is not enough space.