mdbootstrap / react-popup

Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.

Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.

Check out React Bootstrap Popup Documentation for detailed instructions & even more examples.

Modal popups

import React, { useState } from 'react';
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';

export default function App() {
  const [basicModal, setBasicModal] = useState(false);

  const toggleShow = () => setBasicModal(!basicModal);

  return (
    <>
      <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
      <MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>...</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={toggleShow}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

How to use?

1. Download MDB React - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

---

More extended Bootstrap documentation

• React Bootstrap Code
• React Bootstrap Gallery
• React Bootstrap Hamburger Menu
• React Bootstrap Jumbotron
• React Bootstrap Maps
• React Bootstrap Mega Menu
• React Bootstrap Media object
• React Bootstrap Multiselect
• React Bootstrap Masonry
• React Bootstrap Contact form
• React Bootstrap Gradients
• React Bootstrap Pagination
• React Bootstrap Panels
• React Bootstrap Social Media icons & buttons
• React Bootstrap Search
• React Bootstrap Table sort
• React Bootstrap Table responsive
• React Bootstrap Table scroll
• React Bootstrap Table search
• React Bootstrap Textarea
• React Bootstrap Sidebar
• React Bootstrap Profiles
• React Bootstrap Nested Dropdown
• React Bootstrap Address Form
• React Scroll Back to Top button
• React Product Cards
• React Avatar
• React Carousel Slider with Thumbnails
• React Chat
• React Comparison table
• React Comments
• React Drawer
• React FAQ component / section
• React Invoice
• React News feed
• React Offcanvas
• React Order details
• React Page transitions
• React Quotes
• React Payment forms
• React Select with custom Input
• React Square Buttons
• React Testimonial Slider
• React Testimonials / Reviews
• React Survey form
• React Timeline
• React To Do List
• React Padding
• React Modal Size
• React Modal Backdrop
• React CSS Text Animations
• React Video
• React Modal Show, Close, Hide & Toggle
• React Card deck
• React Table filter
• React Slider
• React Logo
• React Popup