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;
}

It does not add css automatically. It just provides HTML markup. To include css just install Bootstrap if you did not it npm install bootstrap --save and use it like import 'bootstrap/dist/css/bootstrap.min.css'; — webHasan
– webHasan, Commented Oct 21, 2018 at 2:04
It settms to me you are using bootstrap3 so you have to pull it form CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css I heighly recoment to use reactstrap instead of use React-Bootstrap. reactstrap provide bootstrap4 support but React-Bootstrap is bootstrap 3 — webHasan
– webHasan, Commented Oct 21, 2018 at 2:14
I just removed h1 tag after the grid tag and it worked seems like all the elements within grid tag must be rows — user10348019
– user10348019, Commented Oct 21, 2018 at 3:32

Abdennour TOUMI · Accepted Answer · 2018-10-21 02:58:23Z

1

Because you didn't import the css file:

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

Install bootstrap before npm install bootstrap --save

answered Oct 21, 2018 at 2:58

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

1 Comment

user10348019 Over a year ago

Thank you I have already included that the problem was actually h1 after the grid seems like grid should be nested with row tags only

oriont · Accepted Answer · 2018-10-21 03:04:29Z

1

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">

answered Oct 21, 2018 at 3:04

oriont

7823 gold badges11 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related