How to install bootstrap in react?

How to bootstrap install with react, install jquery with react and install popper.js?

Reactjs work with command line then we use "npm install bootstrap" where your folder. After installing bootstrap we can check in configuration file "package.json" you will find "bootstrap": "^4.3.1" now you have confirmed that bootstrap installed.

How to install jquery in react?
you will use this command "npm install jquery" then you will check same as you have checked bootstrap in "package.json". Nowadays also required "popper.js" with the latest bootstrap so use this command "npm install popper.js". You can install all with one command "npm install bootstrap jquery popper.js".

After then go to "index.js" file and you will use the path as given below:

    import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
    import '../node_modules/jquery/dist/jquery.min.js';
    import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
    import '../node_modules/popper.js/dist/popper.min.js';

in the bootstrap 5.3.0 version we need to add only:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

 And also you can use only bootstrap css if required only css then go to "index.css" as in below example:

    @import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

Then you can use "className" instead of "class" in your component and also you can see with the screenshot below:

1 comment:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.