Adding Bootstrap in a React.js App
React apps normally use npm packages to install Bootstrap, but you can add Bootstrap using a CDN link (the classical way).
This can be useful when:
You want quick styling
You don't want to install extra node modules
You prefer a lightweight setup
Step 1: Open public/index.html
React uses public/index.html as the base HTML template.
Open it and add the Bootstrap CDN links inside the <head> section.
Step 2: Add Bootstrap CDN Links
Add CSS CDN:
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
Add JS Bundle CDN (for components like modal, dropdown, etc.)
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
Full Example (public/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div id="root"></div>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
import React from "react";
function App() {
return (
<div className="container mt-5">
<h1 className="text-center text-primary">Bootstrap in React! 🎉</h1>
<button className="btn btn-success mt-3">Click Me</button>
<div className="alert alert-warning mt-4">
This is a Bootstrap alert inside React.
</div>
</div>
);
}
export default App;
Step 2: Add Bootstrap CDN Links
Here’s an example App.js using Bootstrap classes:
import React from "react";
function App() {
return (
<div className="container mt-5">
<h1 className="text-center text-primary">Bootstrap in React! 🎉</h1>
<button className="btn btn-success mt-3">Click Me</button>
<div className="alert alert-warning mt-4">
This is a Bootstrap alert inside React.
</div>
</div>
);
}
export default App;