how to use bootstrap in react.js?

Question

I downloaded bootstrap dependency under /node_modules/bootstrap using npm.

I added CDN link into index.html.

I cannot use some specific tags, I am not sure these tags are included into bootstrap or not.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

when i try to add some styles into my app, it turns exeption.

./src/App.js
  Line 16:  'Grid' is not defined  react/jsx-no-undef
  Line 17:  'Row' is not defined   react/jsx-no-undef
  Line 18:  'Col' is not defined   react/jsx-no-undef
  Line 21:  'Col' is not defined   react/jsx-no-undef
  Line 26:  'Row' is not defined   react/jsx-no-undef
  Line 27:  'Col' is not defined   react/jsx-no-undef
  Line 30:  'Col' is not defined   react/jsx-no-undef
  Line 33:  'Col' is not defined   react/jsx-no-undef
  Line 38:  'Row' is not defined   react/jsx-no-undef
  Line 39:  'Col' is not defined   react/jsx-no-undef
  Line 44:  'Row' is not defined   react/jsx-no-undef
  Line 45:  'Col' is not defined   react/jsx-no-undef
  Line 48:  'Col' is not defined   react/jsx-no-undef

Search for the keywords to learn more about each error.

here is my app.js file.

import React, { Component } from 'react';

class App extends Component {
render(){
    return (
        <Grid>
        <Row className="show-grid">
            <Col xs={12} md={8}>
                <code>&lt;{'Col xs={12} md={8}'} /&gt;</code>
            </Col>
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
            <Col xsHidden md={4}>
                <code>&lt;{'Col xsHidden md={4}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col xs={6} xsOffset={6}>
                <code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col md={6} mdPush={6}>
                <code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code>
            </Col>
            <Col md={6} mdPull={6}>
                <code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code>
            </Col>
        </Row>
    </Grid>
)
}
}

export default App;

why grid, row and col are undef? how can i use all bootstrap features?

Answer 1

Looks like react can't find the elements from the react-bootstrap module.

---

If you haven't installed react-bootstrap, then use this command to install it.

npm install --save react react-dom
npm install --save react-bootstrap

And then import the required components to your page like below.

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

Answer 2

Link your html page where you are rendering your DOM to the bootstrap file like

<link rel="stylesheet" href="/components/css/bootstrap.min.css">

and you can use the bootstrap classes in every component which renders inside that DOM.