Bootstrap modal sized incorrectly for content

Question

I am having trouble displaying a bootstrap modal on my site. The modal div is too tall and too narrow relative to the modal-dialog div.

This is where I am toggling the modal.

<footer>
    <div id="header-footer-content" class="container">
        <a href="mailto:[email protected]">Contact</a> |
        <a href="#" data-toggle="modal" data-target="#myModal">Privacy Policy</a>
    </div>
</footer>

And this is how I am defining the modal. (Note the modal is actually defined in a partial view in my rails project, but the html below is the result 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">&times;</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'm using the example modal from the bootstrap website, so I'm not sure why it's being displayed like this. Does anyone have any experience with this kind of graphical issue?

EDIT: I am using bootstrap v3.3.4. The site can be found here.

Answer 1

I think it might have something to do with the container div you have wrapped around your modal. Try removing that and maybe also try removing the empty row at the top of it too.