Bootstrap: Consider alternative method of styling toggle buttons (don't use data-toggle="buttons" for styling)

[pkozlowski-opensource]

Ref: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

As of today we need to add data-toggle="buttons" to get proper styling on check / radio buttons done with inputs + labels. While I totally see how it works perfectly with provided jQuery plugins, it is not very intuitive for people not using jQuery but rather using a framework like Angular or React.

Would you consider another method of styling toggle buttons, for example using a dedicated CSS class (eg. .toggle-buttons)?

---

I've opened similar issue in the past (#20359) but then closed it as a duplicate of #18874. #18874 in turn got closed as a duplicate of number of other issues without addressing the problem. Hence I'm opening a new issue to start with a "clean slate".

[mdo]

Yeah, this should be a class. I don't think anything else is done via data attributes?

[pkozlowski-opensource]

Yeah, this should be a class. I don't think anything else is done via data attributes?

Nope, I didn't bump into other cases where data-* is needed for pure styling purposes. So apart from this particular case we should be all good!

For the reference, the data-toggle="buttons" selector is used today in JS plugin (https://github.com/twbs/bootstrap/blob/78f29d2b3cb9bd888c927e8d50ee6962c2f9d407/js/src/button.js#L31-L32).

[mdo]

Using it in our JS is fine, but behavior should be detached from styles. That way you can drop our JS and use your own without styling issues.

[mdo]

24733 was merged, so closing.