Problems using boot modals: invalid string

Question

I create a login button on my website that opens a modal. B / c I need to load its contents via AJAX, I initialize it using bootbox. Then I put the contents 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 the Firefox development tools, it works . If I detach all the stylesheets but the bootstwatch theme, the same problem. Here is 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 can also see a working example: http://polar-wave-4072.herokuapp.com/

Answer 1

This horizontal line refers to the .modal-footer element. This is the upper bound applied to the footer element.

However, the problem is that you used the col-md-12 column directly inside the .bootbox-body element.

Columns by default move to the left (for width > 992px ). Therefore, you must clear the float at the end of the modal body by simply adding the 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>