Problems using bootstrap modals : bad line

Question

I am creating in my website a login button which opens a modal. B/c i have to load its content via AJAX, I initialize one using bootbox. Then I put the content loaded in my modal. But the line which should be on the top of the footer is in the middle.

If I try to copy the final html using Firefox's development tools, it works. If I unlink all stylesheets but bootstwatch's theme, same problem. Here is the js :

 $('#login').click(function(event) {
        event.preventDefault();
        bootbox.dialog({
            message: '<img class="col-md-4 col-md-offset-4" src="/images/load/spinner-256.gif" />',
            title: "Please login",
            buttons: {
              'cancel':{
                  label: 'cancel',
                  className: 'btn-link'
              }
            }
        });
        $('.bootbox-body').addClass('loading-bb');
        $.ajax({
            url: '/api/ajax/login',
            success: function(data) {

                $('.bootbox-body').html(data)
                $('.bootbox-body').removeClass('loading-bb');
            }
        })
    })

You might also want to see the working example: http://polar-wave-4072.herokuapp.com/

Answer 1

That horizontal line belongs to the .modal-footer element. It is a top border applied to the footer element.

However, the issue is that you've used a column col-md-12 directly within the .bootbox-body element.

Columns are floated to left by default (for width > 992px). Hence you have to clear the float at the end of the modal body, simply by adding a row class to the .bootbox-body or .modal-body element, as follows:

<div class="bootbox-body row">
    <form class="form-horizontal col-md-12" method="post">
    ....
</div>