Step 1: Install Bootstrap

              npm install react-bootstrap bootstrap
             

Step 2: Create a Bootstrap Modal using React

src/components/MyModal.tsx

              import React, { useState } from 'react';
              import 'bootstrap/dist/css/bootstrap.min.css';
              import { Modal, Button } from 'react-bootstrap';

              function MyModal() {
                const [show, setShow] = useState(false);

                const handleShow = () => setShow(true);
                const handleClose = () => setShow(false);

                return (
                  <div className="container mt-5">
                    <Button variant="primary" onClick={handleShow}>
                      Open Modal
                    </Button>

                    <Modal show={show} onHide={handleClose}>
                      <Modal.Header closeButton>
                        <Modal.Title>React Bootstrap Modal</Modal.Title>
                      </Modal.Header>
                      <Modal.Body>This is the modal content.</Modal.Body>
                      <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                          Close
                        </Button>
                        <Button variant="primary" onClick={() => alert("Submitted!")}>
                          Submit
                        </Button>
                      </Modal.Footer>
                    </Modal>
                  </div>
                );
              }

              export default MyModal;

              

Step 3: Use the Component in App

              import React from "react";
            import MyModal from './components/MyModal';


            class Header extends React.Component {
                render() {
                    return <h1>Header</h1>;
                }
            }


            class Footer extends React.Component {
                render() {
                    return <h1>Footer</h1>;
                }
            }


            class App extends React.Component {
                render() {
                    return (
                      <div>
                          <Header />
                          <MyModal />
                          <p>This is the main content.</p>
                          <Footer />
                      </div>
                  );
                }
            }

            export default App;