📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
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:
- Importing Bootstrap from a CDN
- 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:
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