2

Is there any way to use Bootstrap to create a modal that expands to the width of the viewport? I've seen lots of suggestions (most of which involve changing .modal-dialog { width:auto} to .modal-dialog { width:600px } or some other value, but I'm not seeing any results with this.

I have a modal-body and modal-header inside of a modal-content inside of a modal-dialogue inside of a modal fade.

<div class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Header Text </div> <div class="modal-body"> body text </div> </div> </div> </div>

Am I not updating the right modal class? Or is there some other secret to increasing the width of the viewport?

ale10ander
  • 942
  • 5
  • 22
  • 42
  • 1
    here the suggestion is about the modal class http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box. Changing it to width:100% should do – cs04iz1 Jun 04 '15 at 21:18
  • This worked perfectly! Thank you! – ale10ander Jun 04 '15 at 22:04

2 Answers2

0

I don't have enough reputation for comment, sorry for that. I've just tested this and works fine with me just by changing .modal-dialog { width:600px; } in my main .css file. Did you close the closing brecket for the css rule as I can see you didn't here, first. Second, can you look with Inspect element or Firebug does your rule is applied to the class or div? Is it overwritten?

worldwildwebdev
  • 374
  • 4
  • 17
0

I found that the issue here was updating .modal.fade .modal-dialogue, rather than just .modal-dialogue. While other answers allowed for a workaround, this was the source of my particular problem.

Hopefully this helps someone in the future.

ale10ander
  • 942
  • 5
  • 22
  • 42