Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Modal Components

Below is a static modal dialog (without the positioning) to demonstrate the look and feel of the Modal.

import React from 'react';
import { Modal } from 'react-bootstrap';

const ModalComponents = () => {
  return (
    <Modal.Dialog>
        <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>Modal body text goes here.</p>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary">Close</Button>
            <Button variant="primary">Save changes</Button>
        </Modal.Footer>
    </Modal.Dialog>
  );
}

export default ModalComponents;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Live demo

A modal with header, body, and set of actions in the footer. Use <Modal/> in combination with other components to show or hide your Modal. The <Modal/> Component comes with a few convenient "sub components": Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.

Preview

Jsx

Props

import React from 'react';
import { Button, Modal } from 'react-bootstrap';

const LiveDemo = () => {
  const [show, setShow] = useState(false)

  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}

export default LiveDemo;

props	Values	Default	Description
`show`	boolean	`false`	When `true` The modal will show itself.
`onHide`	function		A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Scrolling long content

When modals become too long for the user's viewport or device, they scroll independent of the page itself.

Preview

Jsx

import React from 'react';
import { Button, Modal } from 'react-bootstrap';

const ScrollableModalContents = () => {
  const [show, setShow] = useState(false)

  return (
    <>
        <Button variant="primary" onClick={() => setShow(true)}>
            Modal long scrolling content
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <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>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </>
  );
}

export default ScrollableModalContents;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vertically centered

You can vertically center a modal by passing the centered prop.

Preview

Jsx

Props

import React from 'react';
import { Button, Modal } from 'react-bootstrap';

const VerticallyCenteredModal = () => {
  const [show, setShow] = useState(false)

  return (
    <>
        <Button variant="primary" onClick={() => setShow(true)}>
            Vertically centered modal
        </Button>
        <Modal centered show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </>
  );
}

export default VerticallyCenteredModal;

props	Values	Default	Description
`centered`	boolean		vertically center the Dialog in the window

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Optional sizes

You can specify a Bootstrap large or small modal by using the size prop.

Preview

Jsx

Props

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

const ModalSizes = () => {
  const [smShow, setSmShow] = useState(false);
  const [lgShow, setLgShow] = useState(false);

  return (
    <>
        <Button onClick={() => setLgShow(true)}>Large modal</Button>
        <Button onClick={() => setSmShow(true)} className="me-2">Small modal</Button>

        // Small modal
        <Modal
            size="sm"
            show={smShow}
            onHide={() => setSmShow(false)}
            aria-labelledby="example-modal-sizes-title-sm"
        >
            <Modal.Header closeButton>
                <Modal.Title id="example-modal-sizes-title-sm">
                    Small Modal
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setSmShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setSmShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>

        // Large modal
        <Modal
            size="lg"
            show={lgShow}
            onHide={() => setLgShow(false)}
            aria-labelledby="example-modal-sizes-title-lg"
        >
            <Modal.Header closeButton>
                <Modal.Title id="example-modal-sizes-title-lg">
                    Large Modal
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setLgShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setLgShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </>
  );
}

export default ModalSizes;

props	Values	Description
size	`'sm'` \| `'lg'` \| `'xl'`	Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size.

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Modal with elements

Place a popover, a tooltip, forms, an editor or even a carousel within modals as needed.

Preview

Jsx

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

const ModalWithElements = () => {
  const [showPopover, setShowPopover] = useState(false);
  const [showForm, setShowForm] = useState(false);
  const [showCarousel, setShowCarousel] = useState(false);
  const [showScrollModal, setShowScrollModal] = useState(false);

    //Popover Container
    const popover = (
        <Popover id="popover-basic">
            <Popover.Header as="h3">Popover title</Popover.Header>
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );

  return (
    <>
        <Button variant="secondary" className="me-2" onClick={() => setShowPopover(true)} >
            Modal with Popover & Tooltip
        </Button>
        <Button variant="secondary" className="me-2" onClick={() => setShowForm(true)} >
            Modal with Form
        </Button>
         <Button variant="secondary" className="me-2" onClick={() => setshowEditor(true)} >
            Modal with Editor
        </Button>
        <Button variant="secondary" onClick={() => setShowCarousel(true)}>
            Modal with Carousel
        </Button>
        <Button variant="secondary" onClick={() => setShowScrollModal(!showScrollModal)}>
            Modal with Scroll
        </Button>
         Modal popovers
        <Modal show={showPopover} onHide={() => setShowPopover(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h5>Popover</h5>
                <p className="my-5">This
                    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
                        <Button variant="secondary" className="btn-xs mx-1" >Button</Button>
                    </OverlayTrigger>
                    triggers a popover on click.</p>
                <h5>Tooltips</h5>
                <p className="mt-3">
                    <NubraTooltip id="this-link" title="Tooltip">
                        <Link to="#"> This link </Link>
                    </NubraTooltip>
                    and
                    <NubraTooltip id="that-link" title="Tooltip">
                        <Link to="#"> that link </Link>
                    </NubraTooltip>
                    have tooltips on hover.
                </p>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShowPopover(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShowPopover(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>

         Modal form
        <Modal show={showForm} onHide={() => setShowForm(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal Title</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="email@example.com" />
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" placeholder="Password" />
                    </Form.Group>
                    <Form.Group className="mb-3" controlId="formBasicCheckbox">
                        <Form.Check type="checkbox" label="Remember me" defaultChecked />
                    </Form.Group>
                    <Button variant="primary" type="submit">
                        Sign In
                    </Button>
                </Form>
            </Modal.Body>
        </Modal>

         Modal Editor
        <div className="modal fade" id="exampleModalEditor" tabIndex={-1} role="dialog" aria-labelledby="exampleModalEditor" aria-hidden="true">
            <div className="modal-dialog modal-lg" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <h5 className="modal-title">Modal title</h5>
                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div className="modal-body">
                        <div className="demo-dfree">
                            <div className="dfree-body mce-content-body form-control h-auto" contentEditable="true" style={{ position: 'relative' }} spellCheck="false">
                                <p>
                                    And those use cases are just the start.
                                    TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project.
                                    If you haven’t experienced Tiny Cloud, get started today.
                                    You’ll even get a free trial of our premium plugins – no credit card required!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         Modal Carouse
        <Modal size="lg" show={showCarousel} onHide={() => setShowCarousel(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Carousel >
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={slide1}
                        alt="First slide"
                    />
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={slide1}
                        alt="Second slide"
                    />
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={slide1}
                        alt="Third slide"
                    />
                </Carousel.Item>
            </Carousel>
        </Modal>

         Modal with Scroll
        <Modal show={showScrollModal} onHide={() => setShowScrollModal(false)} >
            <Modal.Body className="p-0 h-400p" >
                <div data-simplebar className="nicescroll-bar">
                    <PerfectScrollbar>
                        <div className="p-5">
                            <p className="mb-5">Other than the content you own, under these Terms, Company Name and/or its licensors own all the intellectual property rights and materials contained in this Website.</p>
                            <p className="mb-5">Other than the content you own, under these Terms, Company Name and/or its licensors own all the intellectual property rights and materials contained in this Website.</p>
                            <p className="mb-5">Other than the content you own, under these Terms, Company Name and/or its licensors own all the intellectual property rights and materials contained in this Website.</p>
                            <p className="mb-5">Other than the content you own, under these Terms, Company Name and/or its licensors own all the intellectual property rights and materials contained in this Website.</p>
                            <p>Other than the content you own, under these Terms, Company Name and/or its licensors own all the intellectual property rights and materials contained in this Website.</p>
                        </div>
                    </PerfectScrollbar>
                </div>
            </Modal.Body>
        </Modal>
    </>
  );
}

export default ModalWithElements;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.