How to Use Bootstrap with React: Simple Guide

To use Bootstrap with React, install Bootstrap via npm and import its CSS in your React entry file. Then, use Bootstrap classes in your JSX elements to style components easily.

Syntax

First, install Bootstrap using npm with npm install bootstrap. Then, import Bootstrap CSS in your src/index.js or src/App.js file using import 'bootstrap/dist/css/bootstrap.min.css';. Finally, add Bootstrap class names to your JSX elements to apply styles.

javascript

npm install bootstrap

// In src/index.js or src/App.js
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <button className="btn btn-primary">Click me</button>
  );
}

export default App;

Output

A blue button labeled 'Click me' styled with Bootstrap's primary button style.

Example

This example shows a simple React component using Bootstrap classes for layout and styling. It includes a responsive container, a heading, and a styled button.

javascript

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function Example() {
  return (
    <div className="container mt-5">
      <h1 className="text-center mb-4">Welcome to Bootstrap with React</h1>
      <button className="btn btn-success">Get Started</button>
    </div>
  );
}

export default Example;

Output

A centered heading 'Welcome to Bootstrap with React' with a green 'Get Started' button below it inside a container with margin.

Common Pitfalls

• Forgetting to import Bootstrap CSS will result in no styles applied.
• Using class instead of className in JSX causes errors.
• Not installing Bootstrap via npm or CDN means styles won't load.
• Trying to use Bootstrap JavaScript components without proper React wrappers can cause issues.

javascript

/* Wrong: Using class instead of className */
function Wrong() {
  return <button className="btn btn-primary">Wrong Button</button>;
}

/* Right: Use className */
function Right() {
  return <button className="btn btn-primary">Right Button</button>;
}

Output

The 'Wrong' component will cause a React warning or error; the 'Right' component renders a blue Bootstrap button correctly.

Quick Reference

• Install Bootstrap: npm install bootstrap
• Import CSS: import 'bootstrap/dist/css/bootstrap.min.css';
• Use Bootstrap classes in JSX with className
• For interactive components, consider React Bootstrap library

Key Takeaways

Always import Bootstrap CSS in your React app to apply styles.

Use className instead of class in JSX for Bootstrap classes.

Install Bootstrap via npm for easy management and updates.

For Bootstrap JavaScript features, use React-specific libraries like React Bootstrap.

Bootstrap classes work seamlessly in React JSX for quick styling.