Removed space between spaces buttons in a bootstrap dialog

Question

I'm developing a web app with Bootstrap 3.3.7 and Bootstrap Confirmation 2.4.1. The confirmation works well, but when I press the button (Delete) that contains the Confirmation, it removes some space between the Delete and the Close button as you can see in the following images:

View without confirmation:

View after confirmation popped up:

This is the code of my dialog with the Confirmation button:

<a href="#divResults" data-toggle="modal" data-target="#divResults" class="btn btn-info btn-lg">
  <span class="glyphicon glyphicon-list-alt"></span> Table
</a>

<div class="modal fade" id="divResults" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <table class="table">
                        <caption>Meeting at 12/04/2018</caption>
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Role</th>
                                <th>Time</th>
                            <tr>
                        </thead>
                        <tbody id="tBodyResults"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="linkDownload"><span class="glyphicon glyphicon-download-alt"></span> <span>Export</span></button>
                    <button id="btnDelete" class="btn btn-danger"
                            data-btn-ok-label="Yes" data-toggle="confirmation"
                            data-btn-ok-class="btn-danger"
                            data-btn-cancel-label="No" data-btn-cancel-class="btn-default"
                            data-title="Are you sure you want to delete this agenda?">
                        <span class="glyphicon glyphicon-trash"></span> <span>Delete</span>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> <span>Close</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

Custom CSS for the Title of the Confirmation:

.popover-title {
    font-weight: bold;
}

The JS that I use to load the confirmation:

$(function () {
    $("[data-toggle=confirmation]").confirmation({
        rootSelector: "[data-toggle=confirmation]",
        onConfirm: function () {
        }
    });
});

Here is a Fiddle with an example:

https://jsfiddle.net/fanmixco/o2mre604/16/

I couldn't find any option in the official documentation of how to know when the Confirmation appears/closes and then I could add some jQuery code from my side like:

$("#btnDelete").prop("margin-right", "6px");

If anyone has any idea how to fix, it'll be highly appreciated. Thanks.

Answer 1

Found out the solution.

You need to add css as .btn{margin-left: 5px;}

Here is the Fiddle

Answer 2

Because Bootstrap Confirmation using popover, You can catch event follow popover structure

All events from Bootstrap Popover are available but suffixed with bs.confirmation.

$('#myPopover').on('show.bs.confirmation', function () {
  // do something…
})

See in document