Any plans to provide Bootstrap 5 support?

[ajaypatelaj]

Hi there,

Thanks for creating a very helpful library.
I am wondering that do you have a plan/roadmap for Bootstrap 5 support?

[froilanmmedina]

Please, that´s very important.

[morrow95]

Here for this as well - need BS5 support.

[istvan-ujjmeszaros]

Hey folks, I will try to dedicate some time for it the next week. Feel free to bug me here if you don't see any update, this should be a very quick thing, I am just really busy with other things nowadays.

[morpolspc]

@istvan-ujjmeszaros That would be fantastic. I am also going to take a look a little deeper at it, hopefully this weekend, when I have some free time to do so. I agree, there shouldn't be too much to do at all.

[lramos-prolaser]

Hello there!
Any updates on Bootstrap 5 support ?
Thanks in advance!

[monab]

Any update on Bootstrap 5 support? @istvan-ujjmeszaros

[pichutan]

Hey there! Do you still have any plans to provide BS5 support? :)

[diesl]

Hey @istvan-ujjmeszaros, would be great if you could add BS5 support!

This should be a "very quick thing"!

[morrow95]

For my use case this is all that needed to be changed in the js file. I do not use vertical buttons so that might need to be changed too - never tested it.

          html = "\n            <div class=\"input-group ".concat(inputGroupSize, " bootstrap-touchspin bootstrap-touchspin-injected\">\n              <span class=\"input-group-addon input-group-prepend bootstrap-touchspin-prefix\">\n                <span class=\"input-group-text\">").concat(settings.prefix, "</span>\n              </span>\n              <span class=\"input-group-addon bootstrap-touchspin-postfix input-group-append\">\n                <span class=\"input-group-text\">").concat(settings.postfix, "</span>\n              </span>\n              ").concat(verticalbuttons_html, "\n            </div>\n          ");
        } else {
          //html = "\n            <div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\">\n              <span class=\"input-group-btn input-group-prepend\">\n                <button tabindex=\"-1\" class=\"".concat(settings.buttondown_class, " bootstrap-touchspin-down\" type=\"button\">").concat(settings.buttondown_txt, "</button>\n              </span>\n              <span class=\"input-group-addon bootstrap-touchspin-prefix input-group-prepend\">\n                <span class=\"input-group-text\">").concat(settings.prefix, "</span>\n              </span>\n              <span class=\"input-group-addon bootstrap-touchspin-postfix input-group-append\">\n                <span class=\"input-group-text\">").concat(settings.postfix, "</span>\n              </span>\n              <span class=\"input-group-btn input-group-append\">\n                <button tabindex=\"-1\" class=\"").concat(settings.buttonup_class, " bootstrap-touchspin-up\" type=\"button\">").concat(settings.buttonup_txt, "</button>\n              </span>\n            </div>");
		  //EDITED to support bootstrap 5
		  html = "\n            <div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\">\n              <button tabindex=\"-1\" class=\"".concat(settings.buttondown_class, " bootstrap-touchspin-down\" type=\"button\">").concat(settings.buttondown_txt, "</button>\n              <span class=\"input-group-addon bootstrap-touchspin-prefix input-group-prepend\">\n                <span class=\"input-group-text\">").concat(settings.prefix, "</span>\n              </span>\n              <span class=\"input-group-addon bootstrap-touchspin-postfix input-group-append\">\n                <span class=\"input-group-text\">").concat(settings.postfix, "</span>\n              </span>\n                <button tabindex=\"-1\" class=\"").concat(settings.buttonup_class, " bootstrap-touchspin-up\" type=\"button\">").concat(settings.buttonup_txt, "</button>\n            </div>");
        }

[istvan-ujjmeszaros]

Thanks @morrow95! I know it is a very quick thing @diesl, but I have never used Bootstrap 5 so it is not that quick for me, as I first need to look what have changed compared to Bootstrap 4. I wanted to update all my plugins and that may take a couple days, for no actual reward. Free plugins with GitHub sponsorship are not a sustainable model, unfortunately. And getting a laugh emoji on my comment "I will try to dedicate some time for it the next week" on the very first day I wrote it was not motivating either.
Any PR is welcome though.

[pichutan]

Hi @istvan-ujjmeszaros ,
thank you for your response. I can understand that "laughing smiley" is not motivating at all. Maybe we can use the changes for @morrow95 and try to find solutions for vertical buttons aswell. I can check if I can find time for myself to adjust it to BS5 - if I found a solution I will add a PR for sure.

[istvan-ujjmeszaros]

Thanks guys. I was also considering to create an individual repository for each bootstrap version. That would simplify the source code. The name could be bootstrap4-touchspin, bootstrap5-touchspin and so on. What do you guys think?

[ajaypatelaj]

Thanks guys. I was also considering to create an individual repository for each bootstrap version. That would simplify the source code. The name could be bootstrap4-touchspin, bootstrap5-touchspin and so on. What do you guys think?

That would be great or separate branch would be fine too.

[morrow95]

I just looked at my js file quick to see the notes of what I changed. Basically what happened is in BS5 they changed how input groups work as far as classes and formatting. https://getbootstrap.com/docs/5.3/forms/input-group/

Out of curiosity I just played around with this a bit more because I wasn't sure if the prefix/postfix stuff would work correctly since I never used them - they didn't.

Here is corrected code where the postfix/prefix settings work properly too :

html = "\n            <div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\">\n              <button tabindex=\"-1\" class=\"".concat(settings.buttondown_class, " bootstrap-touchspin-down\" type=\"button\">").concat(settings.buttondown_txt, "</button>\n              <span class=\"bootstrap-touchspin-prefix input-group-text\">").concat(settings.prefix, "</span>\n              <span class=\"bootstrap-touchspin-postfix input-group-text\">").concat(settings.postfix, "</span>\n                <button tabindex=\"-1\" class=\"").concat(settings.buttonup_class, " bootstrap-touchspin-up\" type=\"button\">").concat(settings.buttonup_txt, "</button>\n            </div>");

Here is an example of settings to set one up with a button, prefix, input, postfix, button :

		$("#sub-change-form #selectLicenses").TouchSpin({            
            buttonup_class: 'btn btn-input',
            buttondown_class: 'btn btn-input',
            buttonup_txt: '-',
	    buttondown_txt: '+',
            min: 1,
            max: 1000,
            stepinterval: 50,
            maxboostedstep: 10000000,
            prefix: '%',
            postfix: '%'
        });

Again, I never did anything with the vertical ones, but given the above horizontal/normal solution it should be really easy to figure out the correct formatting to use.

Feel free to do the vertical and make a fork, update, whatever. There may be other things that need changed for full functionality - I did not do extensive testing - just know it works for how I use the plugin.

[tmendesilva]

Hello @istvan-ujjmeszaros, thanks for the plugin, it's awesome.
I did a fork and made some changes following new bs5 structure for input-groups, but only for horizontal buttons, for vertical I think we will need more changes:
https://github.com/tmendesilva/bootstrap-touchspin