How to Add a Bootstrap Modal in React Without Breaking React – The CoreUI Way

Łukasz Holeczek Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Tuesday, June 17, 2025

#how-to #html

If you’re building a React application and want to use a Bootstrap-style modal, you have options. You can rely on Bootstrap’s vanilla JavaScript, use a third-party component, or—more idiomatically—you can integrate a modal the “React way”: declarative, controlled, and accessible.

In this guide, I’ll show you how to do it properly using CoreUI for React — a component library that’s 100% compatible with Bootstrap styling but built entirely for React.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

👤 Who is this for?

This tutorial is for you if:

• You’re using React with Bootstrap for an admin panel, dashboard, or web app.
• You want full control over modal state (open/close via useState).
• You care about accessibility, keyboard interaction, focus trap.
• You want to avoid using data-bs-* or new bootstrap.Modal(...).

⚠️ Why Bootstrap Modal (even in v5+) is not React-friendly

Although Bootstrap 5+ no longer requires jQuery (🎉), it still manages the DOM imperatively. That doesn’t play well with React’s declarative lifecycle.

✅ The Solution: CModal from CoreUI for React

CoreUI for React solves this by offering prebuilt, Bootstrap-compatible components with React-friendly APIs:

• Full control via visible, onClose, and other props.
• Bootstrap 5+ styling and classes out of the box.
• No jQuery, no DOM hacking.
• Built-in support for accessibility, keyboard controls, backdrop, centering, fullscreen, and more.

⚙️ Example: Modal with a user creation form

import React, { useState } from 'react'
import {
  CButton,
  CModal,
  CModalHeader,
  CModalTitle,
  CModalBody,
  CModalFooter,
  CFormInput
} from '@coreui/react'

const AddUserModal = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Add User
      </CButton>

      <CModal visible={visible} onClose={() => setVisible(false)}>
        <CModalHeader>
          <CModalTitle>Add New User</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <CFormInput type="text" label="Full Name" />
          <CFormInput type="email" label="Email" className="mt-2" />
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Cancel
          </CButton>
          <CButton color="primary">Save</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}

export default AddUserModal

✅ Modal behavior you get out of the box

🤔 When NOT to use CModal

You might prefer something else if:

• You’re using Headless UI or Framer Motion for custom UX.
• You need custom modal styling outside of Bootstrap.
• You’re building a fully animated SPA with no Bootstrap classes.

But if you want Bootstrap styling + React state control, this is your go-to option.

❓ Common questions

Can I use this in Next.js?

Yes — CoreUI components are SSR-compatible.

Does this rely on Bootstrap 5 styles?

Yes — all components follow Bootstrap 5+ classes and layout.

Do I need to install Bootstrap separately?

No — CoreUI includes all necessary CSS via its package.

🧠 Why it matters

Using CModal gives you:

• A predictable, declarative UI pattern.
• Seamless Bootstrap look without imperative code.
• Clean React integration that scales well.
• No hacks or workarounds for modal behavior.

➕ Next steps

• 📘 See CModal docs
• 🚀 Check out the CoreUI Open Source React Template
• 💬 Join the GitHub community

Build faster without reinventing Bootstrap in React. CoreUI for React gives you the components you need, with full Bootstrap compatibility and React power.

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.