How to include bootstrap css and js in reactjs app

Question

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 bootstrap css and js in my react app   I am using webpack   webpack config js  var config         entry     src index        output            path                filename   index js              devServer            inline  true          port  8080          historyApiFallback  true          contentBase    src              module            loaders                                  test     js                     exclude   node modules                   loader   babel                    query                        presets    es2015    react                                                       module exports   config    My issue is  how to include bootstrap css and js in reactjs app from node modules   How to setup for bootstrap to include in my react app

User · Answer

Full answer to give you jquery and bootstrap since jquery is a requirement for bootstrap.js:

Install jquery and bootstrap into node_modules:

npm install bootstrap
npm install jquery

Import in your components using this exact filepath:

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

User · Answer

If you use CRA create-react-app  in your project  you can add this   npm install react-bootstrap bootstrap   If you use bootstrap in your app and if it s not working  then use this in index html     lt link   rel  stylesheet    href  https   maxcdn bootstrapcdn com bootstrap 4 2 1 css bootstrap min css    integrity  sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS    crossorigin  anonymous    gt    I did the above to solve similar problem  Hopefully this is useful to you  -

User · Answer

Somehow the accepted answer is only talking about including css file from bootstrap   But I think this question is related to the one here - Bootstrap Dropdown not working in React  There are couple of answers that can help -    https   stackoverflow com a 52251319 4266842 https   stackoverflow com a 54188034 4266842

User · Answer

You can t use Bootstrap Jquery based Javascript components in React app  as anything that tries to manipulate DOM outside React is considered bad practice  Here you can read more info about it    How to include Bootstrap in your React app   1  Recommended  You can include raw CSS files of Bootstrap as the other answers specify   2  Take a look at react-bootstrap library  It is exclusively written for React   3  For Bootstrap 4 there is reactstrap   Bonus  These days I generally avoid Bootstrap libraries which provide ready to use components  above-mentioned react-bootstrap or reactstrap and so on   As you are becoming dependent on the props they take  you can t add custom behavior inside them  and you lose control over DOM that these components produce    So either use only Bootstrap CSS or leave Bootstrap out  A general rule of thumb is  If are not sure whether you need it  you don t need it  I ve seen a lot of applications which include Bootstrap  but using the only small amount of CSS of it and sometimes the most of this CSS is overridden by custom styles

User · Answer

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

User · Answer

Here is how to include latest bootstrap https   react-bootstrap github io getting-started introduction  1 Install  npm install react-bootstrap bootstrap   then import to App js import  bootstrap dist css bootstrap min css   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

User · Answer

After installing bootstrap in your project  npm install --save bootstrap 3 3 7  you have to move to the index js file in the project SRC folder and import bootstrap from node module package       import  bootstrap dist css bootstrap min css     If you like you can get help from this video  sure it will help you a lot   Import Bootstrap In React Project

User · Answer

Simple Solution  2020  is as follows  -  npm install --save jquery popper js npm install --save bootstrap npm install --save style-loader css-loader update webpack config js  you ve to tell webpack how to handle the bootstrap CSS files hence you ve to add some rules as shown  -    Add some imports in the entry point of your React Application  usually it s index js   place them at the top make sure you don t change the order   import  quot bootstrap dist css bootstrap min css quot   import   from  quot jquery quot   import Popper from  quot popper js quot   import  quot bootstrap dist js bootstrap bundle min quot    These steps should help you out  please comment if there s some problem

User · Answer

Just in case if you can use yarn which is recommended for React apps   you can do   yarn add bootstrap 4 1 1    this is to add bootstrap with a specific  version   This will add the bootstrap as a dependency to your package json as well        name    my-app      version    0 1 0      private   true     dependencies          bootstrap    4 1 1      it will add an entry here      react     16 5 2        react-dom     16 5 2        react-scripts    1 1 5          scripts          start    react-scripts start        build    react-scripts build        test    react-scripts test --env jsdom        eject    react-scripts eject          After that just import bootstrap in your index js file   import  bootstrap dist css bootstrap css

User · Answer

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       lt Container gt           lt Row gt           lt Col sm  4  gt  Test  lt  Col gt           lt Col sm  8  gt  Test  lt  Col gt           lt  Row gt   lt  Container gt    You should import in your js file  import  Container  Row  Col  from  react-bootstrap

User · Answer

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

User · Answer

I too had a similar scenario  My setup was as indicated below  npm install create-react-app   This will provide you with a boiler-plate code setup to begin  Play around with the App js file for the main logic   Later you can use bootstrap CDN in index html created by the CLI tool  or  npm install bootstrap popper jquery   and then simply include this in the App js file   import  bootstrap dist css bootstrap css  import  bootstrap dist js bootstrap bundle    Few authors have mentioned using className attribute instead of class  but in my case  both were working like below  But if you use class and look at console in developer tools on browser  you will see error for using class So use className instead        lt div className  App  class    container  gt    dont use class attribute   And don t forget to remove the default CSS imports to avoid conflicts with bootstrap   Hope that helps  Happy coding

User · Answer

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   lt  doctype html gt   lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt       lt meta name  theme-color  content   000000  gt        lt link rel  manifest  href   PUBLIC URL  manifest json  gt       lt link rel  shortcut icon  href     src images dropbox logo svg  gt       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt         lt  head gt     lt body gt        lt div id  root  gt  lt  div gt         lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt        lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt       lt 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  gt  lt  script gt       lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta js bootstrap min js  integrity  sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1  crossorigin  anonymous  gt  lt  script gt      lt  body gt   lt  html gt

User · Answer

You can just import the css file wherever you want  Webpack will take care to bundle the css if you configured the loader as required   Something like   import  bootstrap dist css bootstrap css     And the webpack config like   loaders     test     css    loader   style-loader css-loader       Note  You have to add font loaders as well  else you would be getting error

User · Answer

Via npm  you would run the folowing npm install bootstrap jquery --save npm install css-loader style-loader --save-dev  If bootstrap 4  also add dependency popper js npm install popper js --save  Add the following  as a new object  to your webpack config loaders                test     css          loader   style-loader css-loader         Add the following to your index  or layout import  bootstrap dist css bootstrap css   import  bootstrap dist js bootstrap js

User · Answer

Hope this is helpful     Step 1  using NPM install this bellow command  npm install --save reactstrap next react react-dom   Step 2  example index js main script import bellow command  import  bootstrap dist css bootstrap min css     Step 3  UI components refer bellow website reactstrap github io

User · Answer

I try with instruction   npm install bootstrap npm install jquery popper js   then in src index js   import  bootstrap dist css bootstrap min css   import   from  jquery   import Popper from  popper js   import  bootstrap dist js bootstrap bundle min   import React from  react   import ReactDOM from  react-dom   import    index css   import App from    App   import registerServiceWorker from    registerServiceWorker    ReactDOM render  lt Dropdown   gt   document getElementById  root     registerServiceWorker

User · Answer

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

User · Answer

Since Bootstrap Reactstrap has released their latest version i e  Bootstrap 4 you can use this by following these steps   Navigate to your project  Open the terminal I assume npm is already installed and then type the following command  npm install --save reactstrap react react-dom      This will install Reactstrap as a dependency in your project    Here is the code for a button created using Reactstrap   x000D   x000D  import React from  react   x000D  import   Button   from  reactstrap   x000D   x000D  export default  props    gt    x000D    return   x000D       lt Button color  danger  gt Danger  lt  Button gt  x000D       x000D     x000D   x000D   x000D    You can check the Reactstrap by visiting their  offical page

[twitter-bootstrap] How to include bootstrap css and js in reactjs app?

Examples related to twitter-bootstrap

Examples related to reactjs

Examples related to webpack