How to Add Bootstrap to React App

Author:
In this tutorial, we will learn how to add bootstrap 4 to the existing React application.
In this tutorial, I show you two ways to integrate Bootstrap CSS library in React application:
  1. Importing Bootstrap from a CDN
  2. Adding Bootstrap in React Using NPM

1. Importing Bootstrap from a CDN

This approach is the easiest one since you only need to add a tag pointing to a Bootstrap CDN in the public/index.html file of your React application.
Open public/index.html file and add the following bootstrap CDN link in the section:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
If you need to use Bootstrap components that depend on JavaScript/jQuery in your React application, you also need to include jQuery, Popper.js, and Bootstrap.js in your document.

Add the following imports before the closing <body> tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"

public/index.html

Here is the complete code for index.html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
    crossorigin="anonymous"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
    crossorigin="anonymous"></script>
  </body>
</html>

2. Adding Bootstrap in React Using NPM

Open a new terminal window, navigate to your project's folder, and run the following command:
$ npm install bootstrap --save
After installing the bootstrap package, you will need to import it in your React app entry file.
If you generated your project using the create-react-app tool then open the src/index.js file and add the following code:
import 'bootstrap/dist/css/bootstrap.min.css';

src/index.js

Here is the complete code for index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Install JQuery with following npm command:
$ npm install jquery
Next, go to the src/index.js file and add the following import for JQuery:
import $ from 'jquery';

Using Bootstrap CSS Classes

Now, let's see how to use bootstrap CSS classes in the react component.
Let's create a BookComponent.js file and add the following code to it.
import React from 'react'
import APIService from '../service/APIService'

export default class BookComponent extends React.Component {

    render() {
        return (
            <div className = "container">
                <h2 className="text-center">Book Details</h2>
                <table className="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Book Id</th>
                            <th>Book Name</th>
                        </tr>
                    </thead>
                    <tbody>
                              <tr key=1>
                                    <td>1</td>
                                    <td>Core Java</td>
                              </tr>
                              <tr key=2>
                                    <td>2</td>
                                    <td>Effective Java</td>
                              </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}
Note that we have used a few bootstrap CSS classes like "container", "text-center" and "table table-striped table-bordered". 
That's it. You can now use the full power of Bootstrap and JQuery in your React application.

Conclusion

In this tutorial, we've seen two ways to integrate Bootstrap 4 with React to build responsive user interfaces.

Comments

Post a Comment

Leave Comment