How to Use Bootstrap in React: Importing CSS and JavaScript Bundles

Install the bootstrap npm package and import bootstrap/dist/css/bootstrap.min.css and bootstrap/dist/js/bootstrap.bundle.min.js in your React entry file to load Bootstrap's compiled styles and interactive components.

The twbs/bootstrap repository distributes production-ready assets in the dist/ folder. Integrating Bootstrap into a React application requires importing these pre-compiled bundles into your module bundler pipeline, allowing you to use the grid system, utility classes, and vanilla JavaScript plugins without external CDN dependencies.

Install the Bootstrap npm Package

Add the official package to your project using your preferred package manager. As of the latest source in package.json, this installs version 5.3.8 along with the compiled distribution files.

npm install bootstrap

# or

yarn add bootstrap

After installation, the package exposes the compiled assets that mirror the repository structure:

• CSS: dist/css/bootstrap.min.css — Contains the reboot, grid system, and all component styles.
• JS Bundle: dist/js/bootstrap.bundle.min.js — Includes every interactive plugin plus Popper (required for dropdowns, tooltips, and popovers).

Import Bootstrap CSS and JS in Your Entry File

Import both files once at the top of your application’s entry point—typically src/index.js (Create React App) or src/main.jsx (Vite)—so they are processed before any component renders.

// src/index.js or src/main.jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The CSS import injects all Bootstrap utility classes and layout systems into your build. The bundled JS import automatically registers global listeners for data-attributes like data-bs-toggle and data-bs-target, enabling interactive components without additional initialization code.

Writing Bootstrap Markup in JSX

Bootstrap components rely on HTML classes and data attributes rather than JavaScript instantiation, so you write standard markup using React’s className attribute. The imported JavaScript bundle handles the DOM manipulation automatically.

Here is a responsive navbar component using Bootstrap’s class-based API:

// src/components/Navbar.jsx
export default function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">MyApp</a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item"><a className="nav-link active" href="#">Home</a></li>
            <li className="nav-item"><a className="nav-link" href="#">Features</a></li>
            <li className="nav-item"><a className="nav-link" href="#">Pricing</a></li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

Because bootstrap.bundle.min.js is loaded, the toggle button works immediately via the data-bs-toggle and data-bs-target attributes—no React state management is required for basic interactions.

Optimizing Bundle Size with Selective Imports

If bundle size is critical, you can import only the JavaScript components you need instead of the full bundle. The source files in bootstrap/js/dist/ expose individual plugins as ES modules.

To load only the dropdown functionality:

// src/index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/js/dist/dropdown';

For CSS customization, compile a subset using the Sass source files. The entry point scss/bootstrap.scss imports all component styles—you can build a custom version by importing only specific files from the scss/ directory (such as scss/_grid.scss or scss/_variables.scss) into your own Sass pipeline.

React Integration Warnings and Alternatives

According to the official documentation in site/src/content/docs/getting-started/javascript.mdx, Bootstrap’s vanilla JavaScript directly manipulates the DOM. This can conflict with React’s virtual DOM reconciliation when components unmount or when state changes affect the DOM structure that Bootstrap manages.

For simple toggles, modals, and dropdowns controlled entirely via data attributes, the bundled script works reliably. However, for complex applications requiring tight integration with React state or dynamic rendering, consider React-Bootstrap. This separate library re-implements Bootstrap components as native React elements, eliminating direct DOM manipulation and providing props-based APIs for onHide, onShow, and controlled visibility states.

Summary

• Install the bootstrap package via npm to access dist/css/bootstrap.min.css and dist/js/bootstrap.bundle.min.js.
• Import both files in your entry file (src/index.js or src/main.jsx) to make utilities and plugins available globally.
• Write standard Bootstrap markup using className and data attributes (data-bs-toggle, data-bs-target); the imported JS handles initialization.
• Tree-shake by importing individual plugins from bootstrap/js/dist/ or customize styles via scss/bootstrap.scss for smaller bundles.
• Consider React-Bootstrap when you need React-native component APIs instead of vanilla DOM manipulation.

Frequently Asked Questions

Do I need React-Bootstrap to use Bootstrap in React?

No. You can use Bootstrap’s standard CSS and JavaScript by importing the npm package bundles. React-Bootstrap is an optional abstraction that converts Bootstrap markup into native React components, which is only necessary when you want to avoid direct DOM manipulation or manage component state through React props.

What is the difference between bootstrap.min.js and bootstrap.bundle.min.js?

The bootstrap.bundle.min.js file includes Popper.js (required for dropdown positioning, tooltips, and popovers), while bootstrap.min.js does not. Unless you are loading Popper separately, always import the bundle to ensure interactive components position correctly.

Can I import only specific Bootstrap JavaScript plugins to reduce bundle size?

Yes. Instead of importing the full bundle, import individual components from the bootstrap/js/dist/ directory. For example, use import 'bootstrap/js/dist/modal' to load only the modal plugin and its dependencies, leaving out unused code like carousels or tooltips.

Why does Bootstrap warn against using its JavaScript with React?

Bootstrap’s vanilla JS manipulates the real DOM (adding classes, toggling visibility, and managing focus), which can become desynchronized with React’s virtual DOM. This causes issues when React unmounts a component that Bootstrap modified, or when React state conflicts with DOM attributes managed by Bootstrap plugins. Use the standard bundles for simple static interactions, but switch to React-Bootstrap for complex, state-driven UIs.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}