0

I have a single page application built with Twitter Bootstrap. My application has several modal dialogs, which normally take 70% of the page width and are centered horizontally. My page and modal setup is like this:

enter image description here

I have placed a row with columns inside the modal. When I resize the page, the columns take the col-sm-6 style really late, since the col-md-* and col-sm-* depend on the window size and not on the size of the surrounding container, as I understand it. So although my page is e.g. still 1200px wide, my modal is only 840px wide and therefore would require the columns to use the col-sm-* classes.

Is there a way to tell Bootstrap to apply the classes based on the size of the container rather than on the windows size?

Community
  • 1
  • 1
WeSt
  • 2,628
  • 5
  • 22
  • 37
  • Not sure what you mean here, `col-*-*` uses percentages which means they DO take on the size of the container, not the window. – DavidG Feb 03 '15 at 11:19
  • @DavidG the classes themselves use percentages, but which class is used is determined by the browser width. `col-sm-*` classes are used for devices having a width (≥768px), `col-md-*` for devices having a width (≥992px). I would need to change this behavior so that `col-sm-*` classes are used inside the modal although the page itself is still bigger than 992px. – WeSt Feb 03 '15 at 11:54

1 Answers1

0

which version of Bootstrap are you using? On Boostrap 3 you can force the modal dialog using:

.modal .modal-dialog { width: 900px; }

There is a related post here: how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box

Community
  • 1
  • 1
baymax
  • 151
  • 3
  • I am currently not using the out-of-the-box modal from `Bootstrap`. If that would fix my problem, I could switch though. I thought maybe there is a specific "responsive-container class" that I could use on my modal or some other trick – WeSt Feb 03 '15 at 10:27