The Complete Guide to React-Bootstrap Modal Width and Height

The React Bootstrap Modal can have its height and width customized by targeting the proper CSS classes. We can even create full screen modals, although we have to account for the margin Bootstrap adds to modals based on screen size. In this tutorial we will deeply explore the DOM and Bootstrap style sheets to create perfectly sized modals.

Here’s one of the modals that we will build in this tutorial:

The Resources section has full code for this tutorial.

React Bootstrap Modal Height

React Bootstrap Modals do not have a set or fixed height. There are no styling properties controlling height. Instead, the modal expands its height based on the total height of all of its children elements.

We can increase modal height by setting a height or min-height value on one of its children or on the Modal Content area (the div with class modal-content). We can also naturally increase the height by adding things like text or components to the children and having them naturally expand:

If I set a height on the modal-content area, the modal expands and also the modal-body expands. Here’s an example where I set min-height: 300px:

We can customize the size of many React Bootstrap components, like the Form Control.

React Bootstrap Modal Width

The modal content area (the div with modal-content class) is set to width: 100% by default. It is actually the Dialog component (the div with class modal-dialog) that is constraining the content width.

Here we can see the default styling on the modal dialog with a max-width that is set to the value --bs-modal-width, which is 500px by default in Bootstrap. Bootstrap also sets different max width values based on screen size, for example the width is 100% on screens smaller than 576px, which is smaller than the sm breakpoint.

I can change the React Bootstrap modal width by targeting the built-in modal-dialog class and setting a width value on it. I can also use Bootstrap media queries to change the modal width. Here is example code:

.modal-dialog {
  max-width: 80%;
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    max-width: 70%;
  }
}

This code makes the modal only take 80% of the available width on xs screens because the 70% width only starts at the sm trigger and up:

This is no longer centered because Bootstrap only applies centering margin for modals on screens larger than 576px.

React Bootstrap Modal Small and Large Size

In researching this tutorial I found that a lot of people are searching for how to make the React Bootstrap Modal “large size”. React Bootstrap included a prop called size for setting some default sizes of modals. Here’s the modal and sizing for size="lg".

We can see that the modal has different --bs-modal-width values getting set by the “lg” size.

In the sections above I provided examples of how to set a certain width or height. In case the four available sizes of the size prop are not sufficient, I will show how to make the modal a large percent of the total screen size.

If we want the modal height to be a large percentage of the total available screen height, we need to set both the modal content and modal header height to a percentage. If we fail to set either one of these, the modal will not be taller.

Here is example code:

.modal-dialog {
  height: 70%;
}

.modal-content {
  height: 100%;
}

As shown in the previous section, increasing the width as a percentage only requires targeting the modal-dialog. Using the width styling that we previously applied, our modal will now be as large as 70% of the total viewport height and 80% of the width:

We can also customize the backdrop color and opacity.

React Bootstrap Modal Full Screen

The React Bootstrap modal includes a handy prop for setting full screen size. A great feature is that it can set full screen only below certain breakpoints if desired:

I highly recommend using the above prop if you want a full screen modal.

If you want to create your full screen modal manually, the challenge is to account for margin. The right and left margin are auto by default, so they will go to zero if we set width to 100%. The top and bottom margin are set to a rem value, and this value changes based on which Bootstrap breakpoint is triggered.

The simplest solution is to remove margin top and bottom. Here is example code that creates a full screen modal with no margin:

.modal-dialog {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
}

However, it looks better to have some margin. Bootstrap applies margin with the bs-modal-margin class. However, this value is dynamically set based on screen size. Screenshots from dev tools are below:

If we dig deep through dev tools and into the Bootstrap styling sheets, we can find the margin variables for the different screen sizes:

We need to set height to 100% but account for this margin in order to make a full size modal. This means we need to have a height calc for each different breakpoint. Here’s the code that sets height for xs and sm breakpoints:

.modal-dialog {
  height: calc(100% - (2*$modal-dialog-margin));
  max-width: 100%;
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    height: calc(100% - (2*$modal-dialog-margin-y-sm-up));
  }
}

I didn’t encounter any new margin variables above the sm breakpoint, so the code above should be sufficient for creating full size modals that work well with Bootstrap’s margin variables.

Resources

If we dive deep into Bootstrap default styling we can learn how to customize the Modal, including the close button.

Here is full React and SCSS code for this demo:

//CustomSizeModal.tsx

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import "./CustomSizeModal.scss";

export default function CustomSizeModal() {
  const [show, setShow] = useState(false);

  const handleClose = () => { debugger; setShow(false); }
  const handleShow = () => setShow(true);
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header
          closeButton
        >
          <Modal.Title>Extra Large Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Large React-Bootstrap Modal<br />Testing Modal Height</Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

//CustomSizeModal.scss

@import "bootstrap/scss/bootstrap";

.modal-dialog {
  max-width: 80%;
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    max-width: 70%;
  }
}

.modal-content {
  min-height: 300px;
}

//more modal styling code, uncomment to test it
// .modal-dialog {
//   height: calc(100% - (2*$modal-dialog-margin));
//   max-width: 100%;
// }

// @include media-breakpoint-up(sm) {
//   .modal-dialog {
//     height: calc(100% - (2*$modal-dialog-margin-y-sm-up));
//   }
// }

// .modal-content {
//   height: 100%;
// }