CODEWITHSUNDEEP
reactjsnpmbootstrap-4
sakirow
sakirow

Reputation: 229

how to use bootstrap in react.js?

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?

Upvotes: 2

Views: 11377

Answers (6)

Amit Maurya
Amit Maurya

Reputation: 91

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

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

Upvotes: 2

saddamwp
saddamwp

Reputation: 27

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

Upvotes: 1

abhishake
abhishake

Reputation: 771

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

Upvotes: 4

Yahya Ahmed
Yahya Ahmed

Reputation: 347

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.

Upvotes: 3

Yossi
Yossi

Reputation: 6027

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.

Upvotes: 0

G_S
G_S

Reputation: 7110

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'

Upvotes: 1

Related Questions