On my page, I have a table. Inside one of the cells of that table is a link. I am performing jQuery scripts if that link is clicked. For instance if the link is clicked I want to show a Bootstrap Dialog. This can be done easily with Bootbox.js. However, bootbox is not updated with support of Bootstrap 4.

Originally, the bootbox wouldn't even show because in Bootstrap 3, the class name to show something was in, but in Bootstrap 4 it is show. I have fixed that, but here is how it looks currently.

The HTML that is generated by calling bootbox.js for this is:

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Test Title?</h4>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

The problem is that in the div where the class is modal-header, the button es before the h4 element. If those were switched, then this problem would be solved, but that is what I need help with. How would I do that via the bootbox syntax? I know I could just remove the title for now until bootbox bees updated to support bootstrap 4, but I'm curious if this can be done.

Here is what I have so far:

                bootbox.confirm({
                    className: "show", // where I had to manually add the class name
                    title: "Test Title?",
                    message: "Test Message",
                    buttons: {
                        cancel: {
                            label: "<i class='fa fa-times'></i> Cancel"
                        },
                        confirm: {
                            label: "<i class='fa fa-check'></i> Confirm"
                        }
                    },
                    callback: function (result) {
                        // my callback function
                    }
                });

On my page, I have a table. Inside one of the cells of that table is a link. I am performing jQuery scripts if that link is clicked. For instance if the link is clicked I want to show a Bootstrap Dialog. This can be done easily with Bootbox.js. However, bootbox is not updated with support of Bootstrap 4.

Originally, the bootbox wouldn't even show because in Bootstrap 3, the class name to show something was in, but in Bootstrap 4 it is show. I have fixed that, but here is how it looks currently.

The HTML that is generated by calling bootbox.js for this is:

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Test Title?</h4>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

The problem is that in the div where the class is modal-header, the button es before the h4 element. If those were switched, then this problem would be solved, but that is what I need help with. How would I do that via the bootbox syntax? I know I could just remove the title for now until bootbox bees updated to support bootstrap 4, but I'm curious if this can be done.

Here is what I have so far:

                bootbox.confirm({
                    className: "show", // where I had to manually add the class name
                    title: "Test Title?",
                    message: "Test Message",
                    buttons: {
                        cancel: {
                            label: "<i class='fa fa-times'></i> Cancel"
                        },
                        confirm: {
                            label: "<i class='fa fa-check'></i> Confirm"
                        }
                    },
                    callback: function (result) {
                        // my callback function
                    }
                });

• javascript
• jquery
• html
• css
• bootstrap-4

• i think, this code may help you , .bootbox-close-button { position: absolute; right: 1rem; top: 1rem; } you can arrange that by adding this css in your project – vaj90 Commented Aug 17, 2018 at 1:56

6 Answers 6

You can just resolve it by css:

.bootbox .modal-header{
display: block;
}

it can be fixed with:

.bootbox .modal-header {
    flex-direction: row-reverse;
}

To fix this, you just reverse the positions (in the HTML) of the headline and the x like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Test Title?</h4>
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

When searching for closeButton here: https://raw.githubusercontent./makeusabrew/bootbox/master/bootbox.js things do a little bit hard-coded to me.

However, if you change

dialog.find(".modal-header").prepend(closeButton);

to:

dialog.find(".modal-header").append(closeButton);

in that file, the problem should be fixed.

EDIT:

Actually, there's also dialog.find(".modal-title").html(options.title);

So, you need to append the closeButton to the title. Then it's gonna work as expected.

If people stumble upon this there is a now a version of bootbox 5 which supports bootstrap 4. You can find it here https://www.nuget/packages/Bootbox.JS/5.0.0-beta

Perhaps you can re-order the dom in the bootbox callback function, like:

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});

here is what i've done and it worked: go to your js file (mine is bootbox.min.js), find this line :

var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)

and change it for:

var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)

So you just need to change it for "append" and the closebutton should normally be on the right side.