Make modal-dialog fixed width but when screen re-sizes smaller then it, it must re-size responsive
<p>I am using the default bootstrap3 css files.</p>

<p>I noticed that the default css width of the modal-dialog is 600px.</p>

<p>However I need the width to be 1000px for my screen.</p>

<p>If the screen is larger than 1000px the modal width still needs to be 1000px. </p>

<pre><code>&lt;style&gt;
    .modal-dialog { width: 1000px; }
&lt;/style&gt;
</code></pre>

<p>This works correctly, however if I resize the window smaller than 1000px the dialog needs to resize responsively with the window width e.g. be the same as the window width.
When you resize the windows larger than 1000px it must stay the same width of 1000px.</p>

<p>I tried set </p>

<pre><code>&lt;style&gt;
    .modal-dialog { width: auto; }
&lt;/style&gt;
</code></pre>

<p>but the behavior matches the default boostrap and the size is still the default 600px and if you resize that smaller than 600px it is adaptive. I basically want the same behaviour as default bootstrap css but for the size 1000px;</p>

<p>I tried combinations of the answers in the <a href="https://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box">other stackoverflow question</a> which deals with setting the modal dialog width but couldn't get a solution to work. </p>