React bootstrap layout issue

Question

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.

Shamar Yarde · Accepted Answer · 2021-08-22 21:29:18Z

2

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).

answered Aug 22, 2021 at 21:29

Shamar Yarde

7601 gold badge8 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

React bootstrap layout issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related