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

> Learn the best way to use Bootstrap in React. Import CSS and JS bundles efficiently to quickly add styles and components to your ReactJS app.

- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-13

---

**Install the `bootstrap` npm package and import [`bootstrap/dist/css/bootstrap.min.css`](https://github.com/twbs/bootstrap/blob/main/bootstrap/dist/css/bootstrap.min.css) and [`bootstrap/dist/js/bootstrap.bundle.min.js`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/package.json), this installs version `5.3.8` along with the compiled distribution files.

```bash
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`](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) — Contains the reboot, grid system, and all component styles.
- **JS Bundle**: [`dist/js/bootstrap.bundle.min.js`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/src/index.js) (Create React App) or [`src/main.jsx`](https://github.com/twbs/bootstrap/blob/main/src/main.jsx) (Vite)—so they are processed before any component renders.

```javascript
// 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:

```jsx
// 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`](https://github.com/twbs/bootstrap/blob/main/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:

```javascript
// 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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/scss/_grid.scss) or [`scss/_variables.scss`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) and [`dist/js/bootstrap.bundle.min.js`](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.bundle.min.js).
- **Import** both files in your entry file ([`src/index.js`](https://github.com/twbs/bootstrap/blob/main/src/index.js) or [`src/main.jsx`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/bootstrap.min.js) and [`bootstrap.bundle.min.js`](https://github.com/twbs/bootstrap/blob/main/bootstrap.bundle.min.js)?

The [`bootstrap.bundle.min.js`](https://github.com/twbs/bootstrap/blob/main/bootstrap.bundle.min.js) file includes Popper.js (required for dropdown positioning, tooltips, and popovers), while [`bootstrap.min.js`](https://github.com/twbs/bootstrap/blob/main/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.