发表新帖
发表新帖

How to include bootstrap css and js in reactjs app?

后端 未结
关注
19 1025
既然无缘
既然无缘 2020-12-04 05:07

I am newb to reactjs, I want to include bootstrap in my react app

I have installed bootstrap by npm install bootstrap --save

Now, want to load b

相关标签:
19条回答
  • 走了就别回头了
    2020-12-04 05:39

    I just want to add that installing and importing bootstrap in your index.js file won't be enough for using bootstrap components. Every time you want to use a component you should import it, like: I need to use a container and a row

        <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

    You should import in your js file

    import {Container, Row, Col} from 'react-bootstrap';
    0 讨论(0)
  • 既然无缘
    2020-12-04 05:40

    Here is how to include latest bootstrap
    https://react-bootstrap.github.io/getting-started/introduction

    1.Install

    npm install react-bootstrap bootstrap

    1. then import to App.js import 'bootstrap/dist/css/bootstrap.min.css';

    2. Then you need to import the components that you use at your app, example If you use navbar, nav, button, form, formcontrol then import all of these like below:

    import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';
    0 讨论(0)
  • 甜味超标
    2020-12-04 05:42

    If you are new to React and using create-react-app cli setup, run the npm command below to include the latest version of bootstrap.

    npm install --save bootstrap

    or 

    npm install --save bootstrap@latest

    Then add the following import statement to index.js file. (https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css)

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

    or 

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

    don't forget to use className as attribute on target elements (react uses className as attribute instead of class).

    0 讨论(0)
  • 故里飘歌
    2020-12-04 05:42

    Please follow below link to use bootstrap with React. https://react-bootstrap.github.io/

    For installation :

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

    ------------------------------------OR-------------------------------------

    Put Bootstrap CDN for CSS in tag of index.html file in react and Bootstrap CDN for Js in tag of index.html file. Use className instead of class follow below index.html

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>
    0 讨论(0)
  • 囚心锁ツ
    2020-12-04 05:43 
    npm install --save bootstrap

    and add this import statement into your index.js file

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

    or You could simply add CDN in your index.html file.

    0 讨论(0)
  • 故里飘歌
    2020-12-04 05:46

    you can install it dirctly via 

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

    then import what you really need from the bootstrap like :

    import Button from 'react-bootstrap/lib/Button';

    // or

    import  Button  from 'react-bootstrap';

    and also you can install :

    npm install --save reactstrap@next react react-dom

    check this out click here .

    and for the CSS you can read this link also carfuly

    read here

    0 讨论(0)
 看不清?
提交回复
热议问题