Search code examples
reactjsreact-bootstrap

React Bootstrap is not rendering two columns in one row

I have installed these packages:

npm install react-bootstrap [email protected]

Then I created a new project using create-react-app

Then in index.html (which is inside the public folder), I added:

<head>
...
    <script
      src="https://unpkg.com/react/umd/react.production.min.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin
    ></script>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
...
</head>

After that, I created a Home.js file in src folder and added this code to it:

        <Container fluid>
            <Row>
                <Col>1 of 2</Col>
                <Col>2 of 2</Col>
            </Row>
        </Container>

When I do npm start it takes some time to load (assuming it's linking the files) and after that, it shows both the columns in a stack as shown below:

enter image description here

Solution

  • Check the imports, make sure bootstrap/dist/css/bootstrap.css is imported.

    import {Container,Row,Col} from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.css';