title: React - Fullscreen Modal with Bootstrap
body: <p>I am using Modal component from bootstrap for React from <a href="https://react-bootstrap.github.io/components.html#modals" rel="nofollow noreferrer">here</a>, I can easily achieve Modal using the following code,</p>
  
  <pre><code>import React, {Component} from 'react';
  import {BaseComponent} from 'BaseComponent';
  import { Modal, Button } from 'react-bootstrap';
  
  class InteractiveMap extends BaseComponent {
    constructor(props) {
      super(props);
      this.open = this.open.bind(this);
      this.close = this.close.bind(this);
      this.state = {showModal: false};
    }
  
    open() {
      this.setState({showModal: true});
    }
  
    close() {
      this.setState({showModal: false});
    }
  
    onFormSubmit(values){
      const data = {...values};
  
    }
  
    render() {
  
      return(
        &lt;div&gt;
          &lt;div className="map-menuitem" onClick={this.open}&gt;Interactive Map&lt;/div&gt;
          &lt;div&gt;
            &lt;Modal className="modal-container"
            show={this.state.showModal}
            onHide={this.close}
            animation={true}
            dialogClassName="custom-map-modal"
            &gt;
              &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title&gt;Interactive Map&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
  
              &lt;Modal.Body&gt;
                The body
              &lt;/Modal.Body&gt;
              &lt;Modal.Footer&gt;
                &lt;Button className="button-theme" onClick={this.close}&gt;Close&lt;/Button&gt;
                &lt;Button className="button-theme button-theme-blue" type="submit"&gt;Save changes&lt;/Button&gt;
              &lt;/Modal.Footer&gt;
  
            &lt;/Modal&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default InteractiveMap;
  </code></pre>
  
  <p>In the doc it is written that I can supply my custom css for the Modal, so I did <code>dialogClassName="custom-map-modal"</code> where</p>
  
  <pre><code>.custom-map-modal{
     width:100%;
  }
  </code></pre>
  
  <p>The above don't work either.</p>
  
  <p>I want to achieve full screen Modal here, how can I achieve using the above approach, or if any other approach there to do, but I want to use Bootstrap only.</p>