Bootstrap: Collapse isn't compatible with HTML 5.0

Created on 10 Jun 2020  路  7Comments  路  Source: twbs/bootstrap

windows 10 Pro 1903
google chrome

link : https://mathiasbynens.be/notes/html5-id-class#:~:text=The%20HTML%204.01%20spec%20states,there%20is%20no%20such%20limitation.

Hello,
I have id's auto generated then, I note if id start with numbers collapse doesn't work, then event like show.bs.modal are never called. Perhaps is the same with other component like tabs.

Thank you.

awaiting-reply

Most helpful comment

bootstrap uses the standard javascript query selector functions (which rely on valid CSS selectors, which do NOT allow for identifiers to start with a number). for now, you'll need to manually escape any special characters and leading numbers https://mathiasbynens.be/notes/css-escapes

All 7 comments

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and Operating System details.

This is an automated reply

bootstrap uses the standard javascript query selector functions (which rely on valid CSS selectors, which do NOT allow for identifiers to start with a number). for now, you'll need to manually escape any special characters and leading numbers https://mathiasbynens.be/notes/css-escapes

Thank you, for your answer could you indicate in the documentation? I spend more than one day on this bug, thinking the error was due of my JS code. No warnings or errors are raised.

Thank you,
Paul

Does this need a docs mention? I feel like this it outside our wheelhouse.

I think, yes, because you can build collapse, tabs... only based on HTML.

We already have a mention but improvements are welcomed.

https://getbootstrap.com/docs/4.5/getting-started/javascript/#selectors

Closing per last comment then鈥攁lready have something to point folks to for now and can revisit if others find room for improvement here.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

cvrebert picture cvrebert  路  3Comments

bellwood picture bellwood  路  3Comments

ghost picture ghost  路  3Comments

eddywashere picture eddywashere  路  3Comments

iklementiev picture iklementiev  路  3Comments