Bootstrap 5 with React — How to Use Bootstrap in a React Project

Bootstrap 5 works with React in several ways. Plain CSS import is the simplest. react-bootstrap wraps components in React. Here's how each works and which to use.

Option 1: Plain Bootstrap CSS (Simplest)

Install Bootstrap and import the CSS:

npm install bootstrap

// main.jsx or index.jsx
import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

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

Now use Bootstrap classes directly in JSX:

function App() {
  return (
    <div className="container mt-4">
      <div className="row g-3">
        <div className="col-md-4">
          <div className="card border-0 shadow-sm">
            <div className="card-body p-4">
              <h5 className="fw-bold mb-2">Marvel Dashboard</h5>
              <p className="text-muted small mb-3">
                Angular 21 + Bootstrap 5 admin template.
              </p>
              <a href="https://lettstartdesign.com"
                className="btn btn-sm text-white"
                style={{ background: '#fd4766' }}
                target="_blank" rel="noopener">
                Buy — Use FIRST30
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Note JSX uses className instead of class — everything else is identical to standard Bootstrap HTML.

Adding Bootstrap JS (for Modals, Dropdowns etc)

For interactive Bootstrap components, import the JS bundle:

// main.jsx
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

Then use Bootstrap's data attributes directly in JSX:

function ModalExample() {
  return (
    <>
      <button
        className="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#myModal"
      >
        Open Modal
      </button>

      <div className="modal fade" id="myModal" tabIndex="-1">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Modal Title</h5>
              <button className="btn-close" data-bs-dismiss="modal" />
            </div>
            <div className="modal-body">Modal content here.</div>
            <div className="modal-footer">
              <button className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button className="btn btn-primary">Save</button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

Programmatic Bootstrap JS in React

For React-controlled modals, use useEffect and Bootstrap's JS API:

import { useEffect, useRef } from 'react'

function ControlledModal({ isOpen, onClose }) {
  const modalRef = useRef(null)
  const modalInstance = useRef(null)

  useEffect(() => {
    // Import Bootstrap on client side
    import('bootstrap').then(({ Modal }) => {
      modalInstance.current = new Modal(modalRef.current, {
        backdrop: 'static'
      })

      // Listen for Bootstrap's hide event
      modalRef.current.addEventListener('hidden.bs.modal', onClose)
    })

    return () => {
      modalInstance.current?.dispose()
    }
  }, [])

  useEffect(() => {
    if (isOpen) {
      modalInstance.current?.show()
    } else {
      modalInstance.current?.hide()
    }
  }, [isOpen])

  return (
    <div className="modal fade" ref={modalRef} tabIndex="-1">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Controlled Modal</h5>
            <button className="btn-close" onClick={onClose} />
          </div>
          <div className="modal-body">
            This modal is controlled by React state.
          </div>
        </div>
      </div>
    </div>
  )
}

// Usage
function App() {
  const [modalOpen, setModalOpen] = useState(false)
  return (
    <>
      <button onClick={() => setModalOpen(true)} className="btn btn-primary">
        Open
      </button>
      <ControlledModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
    </>
  )
}

Option 2: react-bootstrap Library

Install the library (it handles Bootstrap JS internally — no bundle import needed):

npm install react-bootstrap bootstrap

// main.jsx — only CSS needed, not the JS bundle
import 'bootstrap/dist/css/bootstrap.min.css'

Then import and use React components:

import { Modal, Button, Card, Badge } from 'react-bootstrap'
import { useState } from 'react'

function TemplateCard({ title, price, framework }) {
  const [showModal, setShowModal] = useState(false)

  return (
    <>
      <Card className="border-0 shadow-sm h-100">
        <Card.Body className="p-4">
          <div className="d-flex justify-content-between mb-2">
            <Badge bg="danger">{framework}</Badge>
            <span className="fw-bold" style={{ color: '#fd4766' }}>{price}</span>
          </div>
          <Card.Title className="fw-bold">{title}</Card.Title>
          <Card.Text className="text-muted small">
            Angular 21 + Bootstrap 5 admin dashboard template.
          </Card.Text>
          <Button
            size="sm"
            style={{ background: '#fd4766', border: 'none' }}
            onClick={() => setShowModal(true)}
          >
            View Details
          </Button>
        </Card.Body>
      </Card>

      <Modal show={showModal} onHide={() => setShowModal(false)} centered>
        <Modal.Header closeButton>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Full details about the template here.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowModal(false)}>
            Close
          </Button>
          <Button style={{ background: '#fd4766', border: 'none' }}
            href="https://lettstartdesign.com" target="_blank" rel="noopener">
            Buy — Use FIRST30
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

react-bootstrap's Modal uses show prop and onHide callback — proper React state management without imperative JS API calls.

Option 3: Bootstrap CSS + Tailwind

Some teams want Bootstrap's grid but Tailwind's utilities. This works with some caution:

npm install bootstrap tailwindcss

// main.jsx — import both
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css' // contains Tailwind directives

// Use Bootstrap grid, Tailwind utilities
function Layout() {
  return (
    <div className="container">           {/* Bootstrap container */}
      <div className="row g-4">           {/* Bootstrap grid */}
        <div className="col-md-8">        {/* Bootstrap column */}
          <div className="rounded-2xl shadow-lg p-6 bg-white"> {/* Tailwind */}
            <h2 className="text-xl font-bold text-gray-900">Title</h2>
            <p className="text-gray-500 mt-2">Content</p>
          </div>
        </div>
      </div>
    </div>
  )
}

Conflicts to watch for: both frameworks define .container, .row, and utility prefixes. Set Tailwind's important: true or use a prefix in tailwind.config.js to avoid specificity battles.

Which Approach to Use

Honestly, for new React/Next.js projects in 2026 I'd default to Tailwind + shadcn/ui — it's the current community standard and integrates better with the React mental model. Bootstrap in React makes most sense when your team knows Bootstrap well or you're migrating an existing Bootstrap codebase.

Next.js Setup

// app/layout.tsx — App Router
import 'bootstrap/dist/css/bootstrap.min.css'
import type { Metadata } from 'next'

export const metadata: Metadata = { title: 'My App' }

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

For Bootstrap JS in Next.js App Router, import in a client component:

'use client'
import { useEffect } from 'react'

export function BootstrapLoader() {
  useEffect(() => {
    require('bootstrap/dist/js/bootstrap.bundle.min.js')
  }, [])
  return null
}

Add <BootstrapLoader /> to your root layout.