Popup
React Bootstrap 5 Popups
Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.
Modal popups
Click the button to launch the popup. If you are looking for more popups like this check out our main Modal docs.
import React, { useState } from "react"; import { MDBBtn, MDBModal, MDBModalDialog, MDBModalContent, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter, } from "mdb-react-ui-kit"; export default function Modal() { 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> </> ); } Alert popups
Click the buttons to launch the alert popups. If you are looking for more popups like these check out our main Alerts docs.
Note: This component requires MDBootstrap Pro package.
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
import React, { useRef } from 'react'; import { MDBBtn, MDBAlert } from 'mdb-react-ui-kit'; export default function App() { const triggerItem = useRef(null); const triggerItem2 = useRef(null); const triggerItem3 = useRef(null); const triggerItem4 = useRef(null); const triggerItem5 = useRef(null); const triggerItem6 = useRef(null); const triggerItem7 = useRef(null); return ( <> <MDBBtn className='m-1' ref={triggerItem}> Primary </MDBBtn> <MDBBtn color='secondary' className='m-1' ref={triggerItem2}> Secondary </MDBBtn> <MDBBtn color='success' className='m-1' ref={triggerItem3}> Success </MDBBtn> <MDBBtn color='danger' className='m-1' ref={triggerItem4}> Danger </MDBBtn> <MDBBtn color='warning' className='m-1' ref={triggerItem5}> Warning </MDBBtn> <MDBBtn color='light' className='m-1' ref={triggerItem6}> Light </MDBBtn> <MDBBtn color='dark' className='m-1' ref={triggerItem7}> Dark </MDBBtn> <MDBAlert color='primary' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem} > A simple primary alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='secondary' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem2} > A simple secondary alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='success' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem3} > A simple success alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='danger' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem4} > A simple danger alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='warning' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem5} > A simple warning alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='light' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem6} > A simple light alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> <MDBAlert color='dark' autohide width={800} position='top-right' offset={50} delay={2000} appendToBody triggerRef={triggerItem7} > A simple dark alert with <a href='#' className='alert-link'> an example link </a> . Give it a click if you like. </MDBAlert> </> ); } Notification message popups
Click the buttons to launch the notification message popups. If you are looking for more popups like these check out our main Toasts docs.
Note: This component requires MDBootstrap Pro package.
MDBootstrap 11 mins ago
Primary Basic Example
MDBootstrap 11 mins ago
Secondary Basic Example
MDBootstrap 11 mins ago
Success Basic Example
MDBootstrap 11 mins ago
Danger Basic Example
MDBootstrap 11 mins ago
Warning Basic Example
MDBootstrap 11 mins ago
Info Basic Example
MDBootstrap 11 mins ago
Light Basic Example
MDBootstrap 11 mins ago
Dark Basic Example
import React, { useRef } from 'react'; import { MDBToast, MDBBtn } from 'mdb-react-ui-kit'; export default function App() { const triggerItem = useRef(null); const triggerItem2 = useRef(null); const triggerItem3 = useRef(null); const triggerItem4 = useRef(null); const triggerItem5 = useRef(null); const triggerItem6 = useRef(null); const triggerItem7 = useRef(null); return ( <> <MDBBtn className='m-1' ref={triggerItem}> Primary </MDBBtn> <MDBBtn color='secondary' className='m-1' ref={triggerItem2}> Secondary </MDBBtn> <MDBBtn color='success' className='m-1' ref={triggerItem3}> Success </MDBBtn> <MDBBtn color='danger' className='m-1' ref={triggerItem4}> Danger </MDBBtn> <MDBBtn color='warning' className='m-1' ref={triggerItem5}> Warning </MDBBtn> <MDBBtn color='light' className='m-1' ref={triggerItem6}> Light </MDBBtn> <MDBBtn color='dark' className='m-1' ref={triggerItem7}> Dark </MDBBtn> <MDBToast color='primary' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Primary Basic Example' /> <MDBToast color='secondary' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem2} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Secondary Basic Example' /> <MDBToast color='success' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem3} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Success Basic Example' /> <MDBToast color='danger' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem4} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Danger Basic Example' /> <MDBToast color='warning' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem5} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Warning Basic Example' /> <MDBToast color='light' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem6} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Light Basic Example' /> <MDBToast color='dark' autohide position='top-right' delay={2000} appendToBody triggerRef={triggerItem7} headerContent={ <> <strong className='me-auto'>MDBootstrap</strong> <small>11 mins ago</small> </> } bodyContent='Dark Basic Example' /> </> ); } Lightbox gallery popup
Click the images to display a popup with image zoom. If you are looking for more popups like these check out our main Lightbox docs.
Note: This component requires MDBootstrap Pro package.
import React from 'react'; import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit'; export default function App() { return ( <MDBLightbox> <MDBRow> <MDBCol lg='4'> <MDBLightboxItem src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp' fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp' className='w-100' /> </MDBCol> <MDBCol lg='4'> <MDBLightboxItem src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp' fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp' className='w-100' /> </MDBCol> <MDBCol lg='4'> <MDBLightboxItem src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp' fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp' className='w-100' /> </MDBCol> </MDBRow> </MDBLightbox> ); }