React-Bootstrap not working on components

Question

I just began a new react app and wanted to implement react-bootstrap (did so by running npm install react-bootstrap bootstrap) The Column, Row and Button tags are not working, and the react-bootstrap folder exists in the node-modules folder.

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import {Button, Col} from 'react-bootstrap';

class App extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    return(
      <Container fluid>
        <Row>
          <Col>
          hi
          </Col>
          <Col>
          bye
          </Col>
        </Row>
        <Button variant='primary'>hi</Button>
      </Container>
    )
  }
}
export default App;

Just in case it is relevant, I am working on windows 10

Aarnav Shah
– Aarnav Shah

2020-07-09 01:25:29 +00:00
Commented Jul 9, 2020 at 1:25 — Aarnav Shah
– Aarnav Shah, Commented Jul 9, 2020 at 1:25

Wes · Accepted Answer · 2020-07-09 01:56:04Z

5

You need to import bootstrap.

Add the following to import bootstrap. Depending on your folder structure the relative path may be different.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Then bootstrap will be available to your App component and all it's child components.

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { Button, Col } from "react-bootstrap";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

class App extends React.Component {
  render() {
    return (
      <Container fluid>
        <Row>
          <Col>hi</Col>
          <Col>bye</Col>
        </Row>
        <Button variant="primary">hi</Button>
      </Container>
    );
  }
}

export default App;

Another option is to import bootstrap in your index.js and it will be available to all your components.

import React from "react";
import ReactDOM from "react-dom";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

edited Jul 9, 2020 at 1:56

answered Jul 9, 2020 at 1:43

Wes

3851 silver badge8 bronze badges

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

1 Comment

Aarnav Shah Over a year ago

Worked perfectly! Thanks a lot

Collectives™ on Stack Overflow

React-Bootstrap not working on components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related