Using Bootstrap with React enhances the styling of React applications with minimal effort. Here’s how to integrate Bootstrap into a React project:
Steps:
1. Install Bootstrap:
Use npm or yarn to install Bootstrap.
bash
npm install bootstrap
or
bash
yarn add bootstrap
2. Import Bootstrap:
In your src/index.js or App.js, import Bootstrap’s CSS file:
javascript
import ‘bootstrap/dist/css/bootstrap.min.css’;
3. Use Bootstrap Classes:
Add Bootstrap classes to your React components just like in HTML.
javascript
function App() {
return (
<div className=”container”>
<h1 className=”text-center”>Welcome to React with Bootstrap</h1>
<button className=”btn btn-primary”>Click Me</button>
</div>
);
}
4. Optional – React-Bootstrap:
For a more React-friendly approach, use React-Bootstrap, a library providing Bootstrap components as React components.
bash
npm install react-bootstrap
Using Bootstrap with React ensures responsive and visually appealing UIs.