Any plans for BS5 support?

[dleffler]

Since Bootstrap v5 is about to go beta (last breaking changes implemented), are there plan to make bootbox BS5 friendly?

[tiesont]

Plans? Not really, at least not for this repo. This is covered, more or less, in #756.

BS5 will still have jQuery support (they added a helper library that will hook into jQuery if it's present), so aside from any markup changes in the modal, I'd suspect the current version of Bootbox should continue to work.

I'll try to take a look once BS5 goes beta, but no one except Nick (@makeusabrew) has admin rights on the repo, so not sure how much longer I'm going to maintain this version.

[tiesont]

I just pulled down beta1 and ran the Bootbox docs with it (which uses our 5.5.2 release) and it seems to work as expected. The markup for a modal seems 99% the same, so aside from tweaking some data attributes, I think you're good-to-go, assuming you don't remove jQuery. If you want a jQuery-less version of Bootbox, that will probably not happen here.

Bootprompt is a derivative of Bootbox (changed enough that it's pretty much a new library) written in TypeScript, and I think it doesn't have a jQuery dependency. You might want to check that out.

[gpetrov]

Bootstrap 5 is now official in beta and it looks pretty solid. All docs are also officially online and changes are clear. There aren't many big changes so Bootbox will probably work our of the box.

But still Bootstrap 5 compatibility would be really nice to have, Having it also jQuery less will be really nice.

Bootprompt still requires jQuery.

[tiesont]

As I noted, I tested the current version of Bootbox against the Beta1 of Bootstrap and it worked. So, caveat emptor, but it's usable.

Not going to remove jQuery at this point. That would require a major version bump (due to a bunch of required rework), which I'm not really keen on, moving forward. If @tarlepp wants to put the effort in, maybe you'll see official BS5 support, but don't get your hopes up.

[dadokkio]

Testing right now with BT5 beta 1 and the only fix required is in closeButton template. I'm actually using: <button type="button" class="bootbox-close-button btn-close" aria-hidden="true"></button> Instead of: <button type="button" class="bootbox-close-button close" aria-hidden="true">&times;</button> and everything seems working fine.

[Joshdw]

Testing right now with BT5 beta 1 and the only fix required is in closeButton template. I'm actually using: <button type="button" class="bootbox-close-button btn-close" aria-hidden="true"></button> Instead of: <button type="button" class="bootbox-close-button close" aria-hidden="true">&times;</button> and everything seems working fine.

Just to add to this, add float-end to make it perfect :)

<button type="button" class="bootbox-close-button btn-close float-end" aria-hidden="true"></button>

[tiesont]

I'd prefer not to go that route - our modals should work the same as if a dev built the modal themselves (at it's core, Bootbox is just a dynamic Bootstrap modal generator). So, unless Bootstrap's modals themselves require any of the -end classes, I wouldn't go down that path.

If Bootstrap 5 does advance to a release-candidate level sometime soon, I might make an effort to push an update with BS5 support, but... probably not. I'd prefer to spend what time I have working on a TypeScript rewrite, which will not happen in this repo. I'd recommend forking the repo and making whatever changes you find useful.

[Joshdw]

I'd prefer not to go that route - our modals should work the same as if a dev built the modal themselves (at it's core, Bootbox is just a dynamic Bootstrap modal generator). So, unless Bootstrap's modals themselves require any of the -end classes, I wouldn't go down that path.

If Bootstrap 5 does advance to a release-candidate level sometime soon, I might make an effort to push an update with BS5 support, but... probably not. I'd prefer to spend what time I have working on a TypeScript rewrite, which will not happen in this repo. I'd recommend forking the repo and making whatever changes you find useful.

Then you'd need to change the way the component is created, because right now, it's making the header using "modal-body" parent class, which is wrong, and should be 'modal-header'. So for that reason, the very simple and easy fix (until an official update comes out) is to just replace the closeButton template as mentioned above.

[Joshdw]

Example of bootbox generated html:

<div class="bootbox modal fade bootbox-confirm show" tabindex="-1" role="dialog" style="padding-right: 17px; display: block;" aria-modal="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="bootbox-close-button btn-close float-end" aria-hidden="true"></button>
        <div class="bootbox-body">HEADER</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-default bootbox-cancel">Cancel</button>
        <button type="button" class="btn btn-primary bootbox-accept">OK</button>
      </div>
    </div>
  </div>
</div>

How a modal should be

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

[tiesont]

At it's simplest, yes, that's the markup you get (although the style attribute is actually added by Popper.js). If the title and the message options are both specified, you get a standard Bootstrap modal.

The "close button in the body" markup is how the first version of Bootbox was created, and we've left it like that to avoid breaking any custom code or CSS which a dev may have written to target that button. I don't disagree that it probably should always exist in a modal-header, but... it is what it is.

Like I said, forking the repo is probably a good idea, if you want any of the changes suggested here.

[ray73864]

Would love for a vanilla js of bootbox, am using BS5 right now and have made a design decision to not include jQuery.

By taking jQuery out of the equation, page loads have gone from 700ms to approx 300ms for me (with some under that).

I've found that jQuery just takes a long time to load after the DOM is ready.

I would do it with just native bootstrap, but unlike bootbox, Bootstrap doesn't support multiple modals being displayed at the same time properly.

With bootbox, I can open 1 modal, then open another on top of it, then if I close the topmost one, the modal behind it stays open.

With bootstrap, if I open 1 modal, then another, then close the topmost one, both modals close :(

[noctivityinc]

@tiesont I was able to get BB working with BS5 using the following:

jQuery(document).ready(function($) {
    $.fn.modal = bootstrap.Modal.jQueryInterface
    $.fn.modal.Constructor = bootstrap.Modal    
});

There are minor style issues, such as with the close button, but that can be controlled via CSS.

Hope this helps someone else.

[tiesont]

@noctivityinc You shouldn't need to do that - Bootstrap already includes jQuery support.

[noctivityinc]

@tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

[Joshdw]

@tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

Hmm strange, I didn't have to do that. Simply make sure jquery is included before you call bootstrap's js include and you're good to go.

Been using 5.4 bootbox with BS5 beta 1 through 3 without any issues so far (apart from the minor style issues and fixes I mentioned above)

[noctivityinc]

Yeah - take a look at the new docs:

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

On Sat, Apr 3, 2021 at 3:28 PM Joshua Weller @.***> wrote:

@tiesont https://github.com/tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

Hmm strange, I didn't have to do that. Simply make sure jquery is included before you call bootstrap's js include and you're good to go.

Been using 5.4 bootbox with BS5 beta 1 through 3 without any issues so far (apart from the minor style issues and fixes I mentioned above)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/makeusabrew/bootbox/issues/777#issuecomment-812914456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATIARTPMUSXRXVORK5GEDTG5T6BANCNFSM4UQZTZ7A .

[Joshdw]

Yeah - take a look at the new docs: https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

You're missing the point, Those docs are for native bs5, but bs5 still has optional jQuery support: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

Again, just make sure jQuery is called before BS5 and you're good to go. No need to add any events to initialize bootbox.

[noctivityinc]

Interesting. I'm using jQuery but through Rails 6, so maybe it's not being set globally.

All I know is my hack works for now.

On Sat, Apr 3, 2021 at 3:34 PM Joshua Weller @.***> wrote:

Yeah - take a look at the new docs: https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

You're missing the point, Those docs are for native bs5, but bs5 still has optional jQuery support: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/makeusabrew/bootbox/issues/777#issuecomment-812915005, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATIAS2AYV64HSPCS5V273TG5USRANCNFSM4UQZTZ7A .

[TK11703]

Been using your component for many years. It's been a life saver. I was hoping it would work fine with Bootstrap 5. I'm just starting to move to version 5. I am still using jQuery, but this little close dialog is a bugger.... .bootbox-close-button {display:none!important;} fixes it but feels wrong.

[KonnectSalon]

Would be great to have this updated with those changes

[Elvis254]

The only required update is the change of the close button. Or is there any setting of not displaying it at all?

[Notum]

BS5 is officially released on August 5. Any chance we'll see updated Bootbox supported BS5?

[tiesont]

Probably not.

To properly support Bootstrap 5 we would need to remove our jQuery dependency, which is not a small task. It's not just a matter of changing a button style - Bootstrap updated things like which data- attributes are used, among other changes.

I also still want to support at least Bootstrap 4 and (if possible) Bootstrap 3. Despite what some may think, there are plenty of sites out there still using 3.x and 4.x, so we can't just jump on the new hotness and forget the rest.

I do plan to do the work at some point, but probably not here (unless @makeusabrew pops in and lets us know he wants to keep supporting this project). There's a backlog of things that need to be done on this repo which can't be done without the correct permissions, and Nick is the only one with said permissions.

Not sure if that answered your question or not. Sorry.

[tomsommer]

Removing jQuery is hardly a requirement, you can just make it a dependency of Bootbox. This project is dead if BS5 support is not going to be added.

[tiesont]

Removing jQuery is hardly a requirement

To you, sure. For me, given that Bootstrap doesn't use it and that there seems to be a trend towards not using jQuery if possible, I'm not going to force a somewhat heavy dependency on an external library if it's not already being used. Even going the route of jQuery Slim or Zepto still adds an overhead that I'd rather avoid if we don't need it.

This project is dead if BS5 support is not going to be added.

Sure. Send flowers. I'll make sure Nick gets them.

[tomsommer]

If it's so easy then go remove jQuery yourself and share the work with others on here.

I never said removing jQuery was easy? I said the opposite?

[VictorioBerra]

Throwing a +1 here for BS5 support. It seems to me like a quick upgrade to officially support it, and later reafactoring to remove undesired dependencies and the like would be the best option. Just to get a working library in peoples hands from NPM/Unpkg/CDNJS.

[tarlepp]

So what about just creating real pull requests to fix this then? This task isn't trivial one - imho (but I might be wrong and if that is the use case everyone wins) - And for me it's just fine just doing this separated steps, like first just add basic support for BS5 with JQuery and next step remove that JQuery - which is BC change.

Also we should look - https://github.com/twbs/release - which shows that 4.x has +1 year support still - so we cannot forget that. But really supporting multiple versions could be really pain in the *ss, so really if you're using this library - we need your help to provide proper support for each active bootstrap versions.

So I would recommend you to start to create pull requests to fix this issue.

[tiesont]

I'll second what @tarlepp said - I'm glad people are still using this, and want to keep using it with Bootstrap 5. I don't think it's as easy an upgrade as some have suggested, unless things have changed from the last beta I was testing against. There are changes under the hood to Bootstrap that would require some refactoring on our end, and I'm not keen on starting that anytime soon.

There's also the persistent "halp, npm says this is an insecure package" requests we get, so IF we were to add BS5 support, we'd have to address that, somehow, too, and, well, I don't have that kind of time for a repo where the owner is mostly AWOL. Yes, I'm poking you, @makeusabrew - this is me officially asking for the repo to be handed over.

[VictorioBerra]

Spitballing here, but what about just creating an entirely new library for BS5 and leaving this one to stand on its own?

[KonnectSalon]

I would be happy to allocate time to a project if one was started.

[tiesont]

@VictorioBerra I actually have started an entirely separate repo (and organization to "own" it), but I have not had the time to do anything with it yet. The plan is to

• rewrite the project from scratch using Typescript, with hopefully the same API as this version offers (or very similar)
• add the ability to swap out the various dialog templates, if one so desires
• figure out if it's possible to start using the <dialog> element to make Bootbox behave much closer to how a native dialog works (spoiler alert: nope, not anytime soon)
• figure out how to correctly sanitize anything that may be used when building the dialog, since there's always going to be someone who runs this through an injection test and gets it flagged as "vulnerable"
• update Karma or switch to a better testing framework
• support both Bootstrap 5 and Bootstrap 4 (latest), since v4 is not going away anytime soon.

Until I have the means and motivation to start the above work, the only thing I really have time for is triaging the issue board and PRs here.

[kstan79]

i still use jquery in bootstrap 5.1, the bootbox work as it is with little glitches (the close button css need fix at css file). I think for those who need to use bootstrap 5.x may load jquery at the time being. i think it wont crash anything?

[Elvis254]

Yeah, its working fine even the close button. It depends on your bootstrap theme version. Or you can simply add it to your stylesheet and design it as you want.

[Elvis254]

@VictorioBerra I actually have started an entirely separate repo (and organization to "own" it), but I have not had the time to do anything with it yet. The plan is to

• rewrite the project from scratch using Typescript, with hopefully the same API as this version offers (or very similar)
• add the ability to swap out the various dialog templates, if one so desires
• figure out if it's possible to start using the <dialog> element to make Bootbox behave much closer to how a native dialog works (spoiler alert: nope, not anytime soon)
• figure out how to correctly sanitize anything that may be used when building the dialog, since there's always going to be someone who runs this through an injection test and gets it flagged as "vulnerable"
• update Karma or switch to a better testing framework
• support both Bootstrap 5 and Bootstrap 4 (latest), since v4 is not going away anytime soon.

Until I have the means and motivation to start the above work, the only thing I really have time for is triaging the issue board and PRs here.

This will be quite appreciated especially when it comes to using bootbox with other languages like angular etc.

[tiesont]

@Elvis254 Not to be pedantic (okay, maybe I am) but Angular is not a language, it's a framework. There's also two different versions: AngularJS (the original, built with JavaScript) and Angular (built with Typescript). There are versions of Bootbox that have been ported to integrate better with either one. I haven't kept up with them, but ng-bootbox works with AngularJS, if that's relevant.

I do get your point though, and that's the main driver behind my desire to rewrite Bootbox as a Typescript module.

[Elvis254]

@tiesont awesome do it just like bs5.

[tiesont]

FWIW, for anyone who's interested, I've put a smallish amount of work into updating Bootbox to better work with Bootstrap 5. You can find the work-in-progress on this branch: https://github.com/makeusabrew/bootbox/tree/v6-wip

Note that it's a work-in-progress - if you wind up using the current "dist" version from that branch, be sure to verify that it works as you expected.

[visavi]

Hi, can you change the dependencies so that you can install without --force

npm install "git@github.com:makeusabrew/bootbox.git#v6-wip" --save

npm WARN node_modules/bootstrap
npm WARN   bootstrap@"^5.2.0-beta1" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer bootstrap@"^4.4.0 || ^5.0.0" from bootbox@6.0.0-wip
npm WARN node_modules/bootbox
npm WARN   bootbox@"git+ssh://git@github.com:makeusabrew/bootbox.git#v6-wip" from the root project

By the way everything works fine with bootstrap 5.2 waiting for stable version

[tiesont]

Hi, can you change the dependencies so that you can install without --force

Can you elaborate? Don't recall having to force install anything. If possible, add a new issue, please?

By the way everything works fine with bootstrap 5.2 waiting for stable version

Thanks. The tests already were leading me to believe that, but it's nice to have some manual confirmation.

[visavi]

I didn’t install anything new, I decided to update the bootstrap, but I noticed that dependencies were added to the bootbox, I had to update it to v6-wip

the first screenshot is version 5.5.2 with the close button fixed via css

The second screenshot is version 6.0-wip It doesn't look good on the second stripe and for some reason localization stopped working

[visavi]

I forgot to add, in my project I use jquery I don't know how important it is https://github.com/visavi/rotor/blob/master/package.json

[tiesont]

@visavi One of the updates I've made in the v6 branch was to eliminate the bootbox.all.js file. If you need locales other than English, you'll need to add the bootbox.locales.js file or the specific locale file (from the locales folder) after bootbox.js. I might add it back in if I can figure out a decent way of aggregating the files automatically, but at this point I don't want to deal with syncing two separate files.

I am also always creating the modal with the .modal-header section, since that's been asked for a few times and brings Bootbox more inline with how Bootstrap modals normally work. If you disable the close button, the header will be omitted and you'll see the more compact modal from the first screenshot (minus the close button).

Again, I'd suggest creating new issues, if you're finding stuff like this with the v6 branch.

[nicmare]

i am late at the party but really vote for official BS5 support. I discovered bootbox yesterday and implemented it in my project and it works pretty good with bootstrap5. i only had to adjust the close button in the corner. bootbox is still the best lib for easy confirm dialogs made by bootstrap. really would like to keep it. thank you @tiesont !

[FedericoValeri]

Is there a way to make the close button in the corner look like the original bootstrap 5 styling? Beside this everything seems to work fine!

[tiesont]

Is there a way to make the close button in the corner look like the original bootstrap 5 styling? Beside this everything seems to work fine!

One of the changes between Bootstrap 5 and earlier versions is the close button, which is created purely in CSS for BS5. We don't have any custom CSS/Less/Sass files for Bootbox, nor do I plan to add any. So, you'll have to adjust that yourself.

There are other differences between BS5 and earlier versions. If you haven't yet, I suggest reviewing the previous comments on this and related issues.

[nicmare]

what i did in scss:

.bootbox-close-button {
  @extend .btn-close;
  text-indent: -9999px;
}

[tiesont]

For anyone still following this issue, I'm considering pushing my v6/BS5 branch to master. I'd appreciate any effort anyone can make to try out the https://github.com/makeusabrew/bootbox/tree/v6-wip branch before I do that.

@tarlepp Any objections to me doing this at the end of September (or possibly sooner) if no one finds anything?

[barisusakli]

@tiesont I have been using your branch on BS5.2 for the past 3 weeks haven't noticed any issues.

[csiqueirasilva]

@tiesont I might have found an issue with the current BS5.2 branch, using the dist/bootbox.all.min.js file.

When using

bootbox.confirm({
    title: "Envio de certificado por e-mail",
    centerVertical: true,
    message: "Você quer mesmo enviar por e-mail?",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancel'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirm'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});

It generates the following HTML:

I fixed it by swapping a "prepend" call to "append" in the dist file. Don't know if it broke anything else.

After replacing:

Resulted in:

Using bootstrap with this CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>