CODEWITHSUNDEEP
javascriptcssreactjsbootstrap-4react-bootstrap
N Sharma
N Sharma

Reputation: 34497

Why 'Col' is not working in React bootstrap?

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;

enter image description here

Upvotes: 1

Views: 1461

Answers (1)

sathishk2030
sathishk2030

Reputation: 586

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

Upvotes: 2

Related Questions