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?

You can use react-bootstrap not bootstrap. react-bootstrap.github.io/getting-started/introduction — salman.zare
– salman.zare, Commented Mar 5, 2018 at 6:13

abhishake · Accepted Answer · 2018-03-05 09:42:23Z

4

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

answered Mar 5, 2018 at 9:42

abhishake

7719 silver badges16 bronze badges

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

Comments

Yahya Ahmed · Accepted Answer · 2018-03-05 06:35:57Z

3

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.

answered Mar 5, 2018 at 6:35

Yahya Ahmed

3471 silver badge15 bronze badges

Comments

Amit Maurya · Accepted Answer · 2020-04-27 19:10:14Z

2

In app.js or index.js import this line import 'bootstrap/dist/css/bootstrap.min.css';

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

answered Apr 27, 2020 at 19:10

Amit Maurya

911 silver badge6 bronze badges

Comments

G_S · Accepted Answer · 2018-03-05 06:19:29Z

1

If you have installed a package for bootstrap, you should probably import it in the page you need like

if you have installed a package named 'react-bootstrap', below will be the import statement for it

import * as BootstrapComponents from 'react-bootstrap'

You can import all using * or you can only take required components that you need from it like

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

edited Mar 5, 2018 at 6:19

answered Mar 5, 2018 at 6:11

G_S

7,1302 gold badges27 silver badges54 bronze badges

Comments

Vivekanand Panda · Accepted Answer · 2020-01-20 07:16:25Z

at first you need install bootstrap package this command:

npm install --save react-bootstrap bootstrap@3

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

if you need require react-bootstrap component so you need to import within src/App.js file :

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

after if you need use react-bootstrap package then need this command:

npm install --save react-bootstrap

when complete download then need to import this line src/index.js file.

import 'react-bootstrap/dist/react-bootstrap';

if you need grid and column just use your componen this link:

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

Yossi · Accepted Answer · 2018-03-05 06:34:32Z

0

Note that the javascript stuff done by the bootstrap library that modify the DOM is in conflict with the virtual DOM of React.

My advice is to use reactstrap that supports bootstrap v4, or React-Bootstrap that supports bootstrap v3. I tried both (started with React-Bootstrap since it is more popular) and liked reactstrap better.

answered Mar 5, 2018 at 6:34

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Collectives™ on Stack Overflow

how to use bootstrap in react.js?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related