Full Width Modal Not Rendering Properly

Question

Can you please take a look at THIS LINK and let me know why the full width modal are not placing in the center of the page?

Here is the Code I am using:

<div class="container">
<div class="well ">
<button class="btn" data-toggle="modal" href="#dim">Launch Demo</button>
<div id="dim" class="modal container hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Full Width</h3>
</div>
<div class="modal-body">
<p>This modal will resize itself to the same dimensions as the container class.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

The width of the modal dialog is set in bootstrap's CSS. If you change the `width`, you also need to set `margin-left` to an appropriate value. Check this question for more details: [http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box](http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box) — Sunil D., Jul 27 '13 at 20:18

score 4 · Accepted Answer · answered Jul 27 '13 at 20:26

'Full width' in this case would be the full width of the parent container which is a max of 1170px, less at narrower viewports..

If you look at the styling for .modal in http://www.promap.ca/Slider/css/bootstrap.min.css you will see that it has

.modal{
position:fixed;
top:10%;
left:50%;
z-index:1050;
width:560px;
margin-left:-280px;

...

}

I think the left, width and margin-left values are causing the problem.

Try writing the following custom CSS to override the default, and load it after the main stylesheet.

.modal{
left:0;
width:auto; /* or 100% */
margin-left:0;  
}

Hope this helps!

Good answer, here's a nice fiddle of that working. http://jsfiddle.net/sulfureous/6hYPZ/ — sulfureous, Jul 27 '13 at 21:01

score 1 · Answer 2 · answered Jul 27 '13 at 20:25

1

I suggest you use the latest version of bootstrap but in this case you have to overwrite some styles:

.modal{
    margin-left:auto;
    right:0;
    left:0;
}

answered Jul 27 '13 at 20:25

codedme

616
3
12

Thanks Codeme the only issue with you comment is the size of modal change to small when windows re-size to small portview – Mona Coder Jul 27 '13 at 21:00

Full Width Modal Not Rendering Properly

2 Answers2