CODEWITHSUNDEEP
twitter-bootstrap
Mona Coder
Mona Coder

Reputation: 6316

Full Width Modal Not Rendering Properly

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>

Upvotes: 0

Views: 1261

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

'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!

Upvotes: 4

codedme
codedme

Reputation: 615

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;
}

Upvotes: 1

Related Questions