Why 'Col' is not working in React bootstrap?

Question

I am using react bootstrap with Container, Row, Col components. My code is not working, I am expecting columns but they are appearing one after the another like rows.

Code ->

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function Header() {
  return (
    <Container>
      <Row>
        <Col xs={4} md={4} lg={4} sm={4}>
          First
        </Col>
        <Col xs={4} md={4} lg={4} sm={4}>
          Second
        </Col>
        <Col xs={4} md={4} lg={4} sm={4}>
          Third
        </Col>
      </Row>
    </Container>
  );
}

export default Header;

import 'bootstrap/dist/css/bootstrap.min.css'; -codesandbox — Sarun UK
– Sarun UK, Commented Jun 21, 2021 at 14:46

sathishk2030 · Accepted Answer · 2021-06-21 15:13:15Z

2

Stylesheets#

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.

CSS#

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

Source: https://react-bootstrap.github.io/getting-started/introduction

Example provided by react-bootstrap: https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic?file=/src/App.js

edited Jun 21, 2021 at 15:13

answered Jun 21, 2021 at 14:47

sathishk2030

5965 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Why 'Col' is not working in React bootstrap?

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