How to include bootstrap css and js in reactjs app?

When developing a ReactJS app, it is often necessary to include external libraries and frameworks to enhance the user interface and functionality. One popular choice is Bootstrap, a widely-used CSS and JavaScript framework that provides a set of pre-designed components and styles.

In this article, we will explore two different methods to include Bootstrap CSS and JS in a ReactJS app.

Method 1: Using a CDN

The easiest way to include Bootstrap in your ReactJS app is by using a Content Delivery Network (CDN). CDNs host files such as CSS and JavaScript and allow you to include them in your app by simply linking to their URLs.

To include Bootstrap CSS, add the following link tag inside the head section of your index.html file:

Make sure to replace the integrity attribute value with the actual integrity hash of the Bootstrap CSS file. This ensures that the file is not tampered with during transmission.

To include Bootstrap JS, add the following script tag just before the closing body tag of your index.html file:

Again, replace the integrity attribute value with the actual integrity hash of the Bootstrap JS file.

Method 2: Installing Bootstrap via npm

If you prefer to have more control over your project’s dependencies, you can install Bootstrap via npm (Node Package Manager) and import it into your React components.

First, open your terminal and navigate to your project’s root directory. Run the following command to install Bootstrap:

npm install bootstrap

Once the installation is complete, you can import the Bootstrap CSS and JS files in your React component files.

To import the Bootstrap CSS, add the following line at the top of your desired component file:

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

To import the Bootstrap JS, add the following line at the top of your desired component file:

import 'bootstrap/dist/js/bootstrap.bundle.min.js';

After importing the CSS and JS files, you can start using Bootstrap components and styles in your React components.

That’s it! You have now learned two different methods to include Bootstrap CSS and JS in your ReactJS app. Choose the method that best suits your project’s needs and start building beautiful and responsive user interfaces.

Happy coding!