Ah OK. So I have to make the content wider rather than the modal smaller.

Hi,

md="10" sets the width of the inner elements to 10 of 12 available, for this reason the rest 2 columns are empty and you see the blank space.

You can simply set property md of MDBCol to 12 or change MDBModal code from :

<MDBModal isOpen={modal} toggle={toggle}>
        <MDBRow>
          <MDBCol md='12'>
            <MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
            <MDBModalBody>
              <form>
                <MDBInput
                  label='Your email'
                  type='email'
                  className='form-control'
                />
              </form>
            </MDBModalBody>
            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={toggle}>
                Close
              </MDBBtn>
              <MDBBtn color='primary'>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBCol>
        </MDBRow>
      </MDBModal>

to :

   <MDBModal isOpen={modal} toggle={toggle}>
        <MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
        <MDBModalBody>
          <form>
            <MDBInput
              label='Your email'
              type='email'
              className='form-control'
              value='username'
            />
          </form>
        </MDBModalBody>
        <MDBModalFooter>
          <MDBBtn color='secondary' onClick={toggle}>
            Close
          </MDBBtn>
          <MDBBtn color='primary'>Save changes</MDBBtn>
        </MDBModalFooter>
      </MDBModal>

Hope I could help.

Best regards.

I finally got this working pretty well but I have a small problem with the alignment of the form contents within the modal. Can you advise on how I reduce the right margin of the modal to fit? Changing MDBCol md= simply reduces the size of the contents and not the modal size.

The code start and end looks like this: