React bootstrap Grid Columns displaying vertically

Question

I am using react bootstrap trying to display a simple 2x2 grid. This should work fairly simply, but both the columns and the rows display vertically on all screen sizes. It is supposed to look like this:

A B
A B

but instead looks like this:

A
B
A
B

Here is the code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './Home.js';
import * as serviceWorker from './serviceWorker';
import CustomNavBar from './CustomNavBar.js';

import { Col, Row, Grid, DropdownButton, Button} from 'react-bootstrap';

const grid = (<div style={{backgroundColor: '#801903', color: '#ffff'}}>
  <Grid>
    <Row sm={12}>
      <Col sm={6}>A</Col>
      <Col sm={6}>B</Col>
    </Row>
    <Row sm={12}>
      <Col sm={6}>A</Col>
      <Col sm={6}>B</Col>
    </Row>
  </Grid>

</div>);

ReactDOM.render(grid, document.getElementById('root'));

serviceWorker.unregister();

Output:

Lakshya Sharma · Accepted Answer · 2020-01-01 21:04:49Z

0

Did you import the css for react-bootstrap in you html page?

<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"
/>

answered Jan 1, 2020 at 21:04

Lakshya Sharma

1051 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

React bootstrap Grid Columns displaying vertically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related