How to include bootstrap css and js in reactjs app

0 votes

I want to incorporate bootstrap into my ReactJS app because I'm new to it.

Npm install bootstrap —save is how I installed Bootstrap.

In my React app, I now want to load the bootstrap CSS and JS.

I employ 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;

How do I include bootstrap CSS and JS in a ReactJS app from node modules? is my problem. How can I configure bootstrap such that it is included in my React app?

Jun 30, 2022 in CSS by Edureka
• 13,620 points
261 views

1 answer to this question.

0 votes

To begin, we will use npm to install the reactstrap library:

  1. 1npm install —save reactstrap@next. javascript. 
  2. 1import'reactstrap/dist/css/bootstrap.css'; 
  3. 1npm install —save reactstrap@next. javascript. 
  4. 1import'reactstrap/dist/css/bootstrap.css'; 

For more information, you can refer to our React Course today. 

answered Jul 4, 2022 by Edureka
• 320 points

Related Questions In CSS

0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
2,142 views
0 votes
1 answer

How to convert a web page(html,css,js) into android app?

I used Phonegap a lot for this, ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
1,193 views
0 votes
0 answers

How to combine bold and italic in CSS?

I learned how to make text bold ...READ MORE

Aug 23, 2022 in CSS by Edureka
• 13,620 points
1,483 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
764 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
349 views
0 votes
1 answer

How to add border in my clip-path: polygon(); CSS style

Using an SVG Dilation Filter to Add ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
6,296 views
0 votes
0 answers

Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0

Using the command: npx create-react-app I created ...READ MORE

May 19, 2022 in Others by Kichu
• 19,050 points
3,007 views
0 votes
1 answer

What is Webpack in react?

Webpack is a popular open-source JavaScript module ...READ MORE

answered Dec 22, 2023 in Web Development by Rahul
225 views
0 votes
1 answer

How can I remove a port from url for node app using nginx

If you run your node server on ...READ MORE

answered Apr 10, 2018 in DevOps on Cloud by ajs3033
• 7,300 points
3,665 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP