I am experiencing difficulties with the appearance of a bootstrap modal on my website. Specifically, the modal div seems to be too tall and too narrow in comparison to the modal-dialog div.
Here is where I am triggering the modal.
<footer>
<div id="header-footer-content" class="container">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cf4f4f4ccf4f4f4a2efe3e1">[email protected]</a>">Contact</a> |
<a href="#" data-toggle="modal" data-target="#myModal">Privacy Policy</a>
</div>
</footer>
Below is how I have defined the modal. (Please note that the modal is actually defined in a partial view within my rails project, but the HTML provided below is post-rendering.)
<div class="container>
<div class="row">...</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>some text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
I am using the default modal example from the Bootstrap website, so I am unsure why it is displaying incorrectly. Has anyone encountered this issue before?
EDIT: My version of Bootstrap is v3.3.4. The site can be accessed here.