1

I am using the default bootstrap3 css files.

I noticed that the default css width of the modal-dialog is 600px.

However I need the width to be 1000px for my screen.

If the screen is larger than 1000px the modal width still needs to be 1000px. 

<style>
    .modal-dialog { width: 1000px; }
</style>

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.

I tried set 

<style>
    .modal-dialog { width: auto; }
</style>

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;

I tried combinations of the answers in the other stackoverflow question which deals with setting the modal dialog width but couldn't get a solution to work.

Community
  • 1
  • 1
dfmetro
  • 4,462
  • 8
  • 39
  • 65

3 Answers3

2

Just use @media rule

The @media rule is used to define different style rules for different media types/devices.

@media (min-width: 1000px)/* The minimum width of the display area, such as a browser window*/
{
  .modal-dialog {
      width: 1000px;
  }
}
manukn
  • 2,608
  • 1
  • 13
  • 17
  • I went into the default boostrap css and found a modal-lg example that does exactly this. Thanks – dfmetro Feb 16 '16 at 10:17
1

You should be able to do this by simply adding the following CSS properties to your .modal-dialog element.

width: 100%;
max-width:1000px;

This will make the modal be full width of the screen up until it reaches 1000px at which point it will stay at 1000px as the screen gets wider.

Scott Harrison
  • 393
  • 4
  • 17
1

use this

<style>
    .modal-dialog { 
        width: 1000px; 
        max-width: 100%; 
    }
</style>
prava
  • 3,916
  • 2
  • 24
  • 35
Abhinav
  • 156
  • 2