why react-bootstrap is not adding styles to my grid layout

Question

I am making promodoro clock .I wrote my code using react-bootstrap .it is working but the styles of default classes of bootstrap is not being added to the styles.it is just being stacked over one another.

 import React, { Component } from "react"; import "./App.css"; import Grid from "react-bootstrap/lib/Grid"; import Row from "react-bootstrap/lib/Row"; import Col from "react-bootstrap/lib/Col"; class App extends Component { render() { return ( <div className="App"> <Grid className="main-container"> <h1>Promodoro Clock</h1> <Row className="time-setters "> <Col className="Session-time text-center" sm={6}> <div>Session time</div> <a href="#">+</a> <span>25</span> <a href="#">-</a> </Col> <Col className="Break-time text-center" sm={6}> <div>Break time</div> <a href="#">+</a> <span>5</span> <a href="#">-</a> </Col> </Row> </Grid> </div> ); } } 

 .App { text-align: center; } html { height: 100%; } body { height: 100%; } .main-container { max-width: 800px; margin: 0 auto; } 

Answer 1

Because you didn't import the css file:

import 'bootstrap/dist/css/bootstrap.min.css'

Install bootstrap before npm install bootstrap --save

Answer 2

If you are going to import multiple things at once, you might want to use this:

import { Grid, Row, Col } from 'react-bootstrap';

Also, make sure you import the stylesheet somewhere on your page, like it says on the docs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">