I'm trying to create a "main Bootstrap row" that can house different React components in separate columns within that row, but since they are completely different React components, they want to render underneath each other. Im not sure if its a CSS, Bootstrap or React mistake I'm making.

Right now, I just need to render one component of col-1 and a different component of col-11 on the same Row, a simplified version of my code is as follows:

ReactApp.js:

Import React from "react";
Import {Container, Col, Row} from "react-bootstrap";
Import Comp1 from "./components/Comp1";
Import Comp2 from "./components/Comp2";

function App() {
 return (
  <Row>
   <Comp1 />
   <Comp2 />
  </Row>
 );
}
export default App;

Componenet1.js:

Import React from "react";
Import {Container, Col, Row} from "react-bootstrap";

const Comp1 = () => {
 return (
  <Col md={1}>
   <content>
  </Col>
 );
}
export default Comp1;

Componenet2.js:

Import React from "react";
Import {Container, Col, Row} from "react-bootstrap";

const Comp2 = () => {
 return (
  <Col md={11}>
   <content>
  </Col>
 );
}
export default Comp2;

Thanks in advance for any help.

CodePudding user response：

2 things:

1. Make sure you have installed both bootstrap and react-bootstrap using NPM: npm install bootstrap react-bootstrap

2. Make sure you import the main css file from bootstrap, so that it can apply the grid styles import 'bootstrap/dist/css/bootstrap.min.css';

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

export default function App() {
  return (
    <Container>
      <Row>
        <Comp1 />
        <Comp2 />
      </Row>
    </Container>
  );
}

const Comp1 = () => {
  return <Col md={1}>Hello world</Col>;
};

const Comp2 = () => {
  return <Col md={11}>Foobar</Col>;
};

Codesandox