CODEWITHSUNDEEP
javascriptreactjsbootstrap-4react-bootstrap
jateen
jateen

Reputation: 794

React bootstrap layout issue

I was wrapping my head around the layout for React-bootstrap. Tried the basic layout using Container, Row and Col. You can access the sandbox here.

What I understood from the react-bootstrap docs is the columns should have been put horizontally rather being stacked on top of each other. What I am trying to achieve is get those columns stacked horitzontally.

Upvotes: 0

Views: 397

Answers (1)

Shamar Yarde
Shamar Yarde

Reputation: 761

You have to import the bootstrap CSS file, bootstrap/dist/css/bootstrap.min.css. Try the following:

    import "./styles.css";
    import { Container, Row, Col } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
    
    export default function App() {
      return (
        <div className="App">
          <Container>
            <Row>
              <Col>Col 1 of 4</Col>
              <Col>Col 2 of 4</Col>
              <Col>Col 3 of 4</Col>
              <Col>Col 4 of 4</Col>
            </Row>
          </Container>
        </div>
      );
    }

References:

StackOverflow. Container, Row, Col - in React-Bootstrap not working. https://stackoverflow.com/a/60673785/8121551. (Accessed 22 August, 2021).

Upvotes: 2

Related Questions