Modal
Dialogs for lightboxes, user notifications, or completely custom content.
Modal markup
import Modal from 'react-bootstrap/Modal'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalTitle from 'react-bootstrap/ModalTitle'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'
export default function ModalMarkupDemo() {
return (
<Modal aria-labelledby="modalLabel">
<ModalHeader closeButton>
<ModalTitle as="h5" id="modalLabel">Modal title</ModalTitle>
</ModalHeader>
<ModalBody>
<p>Modal body content goes here.</p>
</ModalBody>
<ModalFooter className="flex-column flex-sm-row align-items-stretch">
<Button variant="outline-secondary">Close</Button>
<Button>Save changes</Button>
</ModalFooter>
</Modal>
)
}Tabs and forms
Welcome back
Create an account
'use client'
import Image from 'next/image'
import PasswordInput from '@/components/forms/password-input'
import Col from 'react-bootstrap/Col'
import Modal from 'react-bootstrap/Modal'
import CloseButton from 'react-bootstrap/CloseButton'
import Nav from 'react-bootstrap/Nav'
import TabContainer from 'react-bootstrap/TabContainer'
import TabContent from 'react-bootstrap/TabContent'
import TabPane from 'react-bootstrap/TabPane'
import FormLabel from 'react-bootstrap/FormLabel'
import FormControl from 'react-bootstrap/FormControl'
import FormCheck from 'react-bootstrap/FormCheck'
import Button from 'react-bootstrap/Button'
export default function ModalTabsFormsDemo() {
return (
<Modal
size="lg"
contentClassName="row row-cols-1 row-cols-lg-2 flex-row g-0 overflow-hidden"
>
<Col className="order-lg-2">
<div className="position-relative d-flex align-items-end h-100 pt-4 px-4 px-sm-5 px-lg-0">
<CloseButton className="position-absolute top-0 end-0 z-2 mt-3 me-3" />
<Image
src="/img/account/cover.png"
className="position-relative z-1"
width={772}
height={770}
alt="Girl"
/>
<span
className="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
style={{ background: 'linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)' }}
></span>
<span
className="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
style={{ background: 'linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)' }}
></span>
</div>
</Col>
<Col className="d-flex flex-column order-lg-1">
<TabContainer defaultActiveKey="signin">
<Modal.Header className="d-block border-0 pt-sm-5 px-sm-5 pb-2">
<Nav variant="tabs" className="mt-sm-n2">
<Nav.Item>
<Nav.Link eventKey="signin">
<i className="ci-log-in fs-base opacity-75 ms-n1 me-2"/>
Sign in
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="signup">
<i className="ci-user fs-base opacity-75 ms-n1 me-2"/>
Sign up
</Nav.Link>
</Nav.Item>
</Nav>
</Modal.Header>
<Modal.Body as={TabContent} className="px-sm-5 pb-sm-5">
<TabPane eventKey="signin">
<h2 className="h5 mb-4">Welcome back</h2>
<form>
<FormControl type="email" className="mb-4" placeholder="Email" required />
<PasswordInput className="mb-4" placeholder="Password" required />
<FormCheck id="remember-30" label="Remember for 30 days" className="mb-4" />
<Button type="submit" className="w-100">
Sign In
</Button>
</form>
</TabPane>
<TabPane eventKey="signup">
<h2 className="h5 mb-4">Create an account</h2>
<form>
<FormLabel htmlFor="register-email">Email</FormLabel>
<FormControl type="email" className="mb-3" id="register-email" required />
<FormLabel htmlFor="register-password">Password</FormLabel>
<PasswordInput
className="mb-4"
id="register-password"
placeholder="Minimum 8 characters"
minLength={8}
required
/>
<FormCheck id="save-pass" label="Save the password" className="mb-4" />
<Button type="submit" className="w-100">
Create an account
</Button>
</form>
</TabPane>
</Modal.Body>
</TabContainer>
</Col>
</Modal>
)
}Live demo
'use client'
import { ModalProvider, useModal } from '@/contexts/modal-context'
import Modal, { type ModalProps } from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'
export default function ModalLiveDemo() {
interface ModalDemoProps extends ModalProps {
id: string
buttonLabel: string
modalContent: React.ReactNode
}
const modals: ModalDemoProps[] = [
{
id: 'modal-sm',
size: 'sm',
buttonLabel: 'Small modal',
modalContent: <p>...</p>,
},
{
id: 'modal-default',
buttonLabel: 'Default modal',
modalContent: <p>Modal body text goes here.</p>,
},
{
id: 'modal-lg',
size: 'lg',
buttonLabel: 'Large modal',
modalContent: <p>Modal body text goes here.</p>,
},
{
id: 'modal-xl',
size: 'xl',
buttonLabel: 'Extra large modal',
modalContent: <p>Modal body text goes here.</p>,
},
{
id: 'modal-long',
buttonLabel: 'Long modal',
modalContent: (
<>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</>
),
},
{
id: 'modal-scrollable',
buttonLabel: 'Scrolling content',
modalContent: (
<>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</>
),
scrollable: true,
},
{
id: 'modal-centered',
buttonLabel: 'Vertically centered modal',
modalContent: <p>Modal body text goes here.</p>,
centered: true,
},
{
id: 'modal-fullscreen',
buttonLabel: 'Full screen modal',
modalContent: <p>Modal body text goes here.</p>,
fullscreen: true,
},
]
const ModalDemo = ({ id, buttonLabel, modalContent, size, scrollable, centered, fullscreen }: ModalDemoProps) => {
const { openModal, closeModal, isShown } = useModal()
return (
<>
<Button variant="outline-secondary me-1 mb-1" onClick={() => openModal(id)}>
{buttonLabel}
</Button>
<Modal
show={isShown(id)}
onHide={() => closeModal(id)}
size={size}
scrollable={scrollable}
centered={centered}
fullscreen={fullscreen}
aria-labelledby={`label-${id}`}
>
<Modal.Header closeButton>
<Modal.Title as="h5" id={`label-${id}`}>
Modal title
</Modal.Title>
</Modal.Header>
<Modal.Body>{modalContent}</Modal.Body>
{size !== 'sm' && (
<Modal.Footer className="flex-column flex-sm-row align-items-stretch">
<Button variant="outline-secondary" onClick={() => closeModal(id)}>
Close
</Button>
<Button>Save changes</Button>
</Modal.Footer>
)}
</Modal>
</>
)
}
return (
<ModalProvider>
<Stack direction="horizontal" gap={2} className="flex-wrap">
{modals.map(({ id, buttonLabel, modalContent, size, scrollable, centered, fullscreen }) => (
<ModalDemo
key={id}
id={id}
buttonLabel={buttonLabel}
modalContent={modalContent}
size={size}
scrollable={scrollable}
centered={centered}
fullscreen={fullscreen}
/>
))}
</Stack>
</ModalProvider>
)
}