This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
Bootstrap **is a powerful, open-source **front-end framework designed to streamline the development of responsive and mobile-first web projects. Developed by Twitter, it offers a collection of pre-styled HTML, CSS, and JavaScript components, making it easier for developers to create clean, modern interfaces quickly.
Step 1: Create a React Application
If you don’t already have a React application, you can create one using Create React App. Open your terminal and run the following command:
npx create-react-app myapp
cd myapp
Step 2: Install Bootstrap
There are two main ways to install Bootstrap in a React project: using npm (Node Package Manager) or including it via a CDN (Content Delivery Network). We’ll cover both methods.
npm install bootstrap
Step 3: Import Bootstrap CSS file in your src/App.js:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import 'bootstrap/dist/js/bootstrap.bundle.min'; // Import Bootstrap JS
const App = () => {
return (
<div className="container">
<h1 className="my-4">Hello, Sudhanshu..!</h1>
<button className="btn btn-primary">Click Me</button>
</div>
);
};
export default App;
Step 4: Use Bootstrap Components in Your React App
Now that Bootstrap is installed, you can start using its components in your React app. Here’s an example of how to use a Bootstrap button:
import React from 'react';
const Home= () => {
return (
<div className="container">
<h1 className="my-4">This is a Home Page ...!</h1>
<button className="btn btn-primary">Home Page</button>
</div>
);
};
export default Home;
Step 5: Run your React application:
Start your React app by running:
npm start
This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
Sudhanshu Gaikwad | Sciencx (2024-07-03T16:53:49+00:00) How to Install Bootstrap in React JS A Step-by-Step Guide.. Retrieved from https://www.scien.cx/2024/07/03/how-to-install-bootstrap-in-react-js-a-step-by-step-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.