[Tracking] Fix StackBlitz examples

[julien-deramond]

Some of the examples doesn't work when they are edited in StackBlitz due to specific CSS or JS.

This issue replaces https://github.com/twbs/bootstrap/pull/36091 and contains:

• the list of broken examples
• the list of tasks planned to fix those examples
• the references in PRs and issues already created

Step-by-step fix

• [x] Embed snippets.js (full or parts of it) in StackBlitz environment to fix examples that need specific JS. Tackled by https://github.com/twbs/bootstrap/pull/36127 or alternative https://github.com/twbs/bootstrap/pull/36352
• [x] Hide some Popover and Tooltip examples (see https://github.com/twbs/bootstrap/pull/36449)
• [x] Embed specific CSS in StackBlitz environment to fix examples that need specific CSS (see https://github.com/twbs/bootstrap/pull/36637)
• [ ] Some examples need assets/js/validate-forms.js (see https://twbs-bootstrap.netlify.app/docs/5.2/forms/validation/#custom-styles)
• [ ] Check https://github.com/twbs/bootstrap/issues/36364

References

PRs

• https://github.com/twbs/bootstrap/pull/36091
• https://github.com/twbs/bootstrap/pull/36127 or https://github.com/twbs/bootstrap/pull/36352
• https://github.com/twbs/bootstrap/pull/36449

Issues

• https://github.com/twbs/bootstrap/issues/36364

List of examples

• [x] Accordions (3 examples)
• [x] Alerts (7 examples)
• [x] Badge - 6 examples
• [x] Breadcrumb - 4 examples
• [x] Button Group - 9 examples
  • Sizing and Vertical variation could be examples
• [x] Buttons - 15 examples
• [x] Card - 30 examples
  • In all card examples, the image text is not centered nor with the good size
• [x] Carousel - 8 examples
• [x] Close Button - 3 examples
  • White variant: We could pass a parameter to define a background color (here black).
• [x] Collapse - 3 examples
• [x] Dropdowns - 21 examples
  • Colored dropdowns don't have their edit button
  • Split button doesn't have any edit button
  • Sizing doesn't have any edit button
  • Dropup doesn't have any edit button
  • Dropend doesn't have any edit button
  • Dropstart doesn't have any edit button
  • [x] Menu items 2 is not working because of the display: none of .dropdown-menu.
  • [x] Menu items > Active is not working because of the display: none of .dropdown-menu.
  • [x] Menu items > Disabled is not working because of the display: none of .dropdown-menu.
  • [x] Menu Content - Headers is not working because of the display: none of .dropdown-menu.
  • [x] Menu Content - Dividers is not working because of the display: none of .dropdown-menu.
  • [x] Menu Content - Text is not working because of the display: none of .dropdown-menu.
  • [x] Menu Content - Forms both examples are not working because of the display: none of .dropdown-menu.
• [x] List Group - 15 examples
• [x] Modal - 2 examples
  • Maybe some other examples could be edited
• [x] Navbar - 26 examples
  • [ ] Image and Image and text are not working because of the image relative path. Could be modified in the shortcode?
  • Toggler Don't see the toggler but I suppose this is because of a difference between 5.1 and 5.2
• [x] Nav Tabs - 15 examples
• [x] Offcanvas - 8 examples
  • [x] Offcanvas components is not working
  • Check https://github.com/twbs/bootstrap/pull/36151
• [x] Pagination - 8 examples
• [x] Placeholders - 5 examples
• [x] Popovers - 5 examples
  • [x] None of the examples are working - see https://github.com/twbs/bootstrap/pull/36127
• [x] Progress - 8 examples
• [x] Spinners - 13 examples
• [x] Toasts - 10 examples
  • Funny but good to know. If you click on the cross in the doc and then click on the "Try it" button, the environment won't display the toast.
  • [x] Placement: changing toast placement doesn't move the toast. The second example is not working as well
• [x] Tooltips - 2 examples
  • [x] Custom example is displayed but not in color
• [x] Figures - 2 examples
  • [x] "400x300" are not centered correctly as in the cards and carousels
• [x] Images - 5 examples
  • [x] Same observation as for the Figures
• [x] Reboot - 8 examples
• [x] Tables - 2 examples
• [x] Typography - 12 examples
• [x] Forms > Check Radios - 17 examples
  • [x] Indetermediate doesn't seem to work
• [x] Forms > Floating Labels - 8 examples
• [x] Forms > Form Control - 9 examples
• [x] Forms > Input Group - 11 examples
• [x] Forms > Layout - 10 examples
• [x] Forms > Overview - 4 examples
• [x] Forms > Range - 4 examples
• [x] Forms > Select - 5 examples
• [x] Forms > Validation - 6 examples
  • [ ] Custom validation doesn't work because of the missing JS explained just after
  • [ ] Tooltips doesn't work (see Tooltips section probably)
• [x] Helpers > Clearfix - 1 example
• [x] Helpers > Colored links - 1 example
• [x] Helpers > Ratio - 4 examples
  • [x] Aspect ratios and Custom ratios are not working because of the specific CSS for .bd-example-ratios .ratio
• [x] Helpers > Stacks - 6 examples
• [x] Helpers > Stretched Link - 4 examples
• [x] Helpers > Text Truncation - 1 example
• [x] Helpers > Vertical rule - 3 examples
• [x] Helpers > Visually hidden - 1 example
• [x] Layout > Columns - 13 examples
  • [x] Issues with the rendering because of .bd-example-row-flex-cols .row rules
• [x] Layout > CSS Grid - 15 examples
  • [x] Issues with the rendering because of .bd-example-cssgrid .grid > *
• [x] Layout > Grid - 15 examples
  • [x] Issues with the rendering because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
• [x] Layout > Gutters - 6 examples
  • [x] Some issues with the rendering of some examples because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
• [x] Utilities > Background - 3 examples
• [x] Utilities > Borders - 8 examples
  • [x] Issues with rendering because of .bd-example-border-utils [class^="border"] specific rule
• [x] Utilities > Colors - 3 examples
• [x] Utilities > Display - 4 examples
• [x] Utilities > Flex - 12 examples
  • [x] Some issues with the rendering because of .bd-example specific rule
• [x] Utilities > Float - 2 examples
• [x] Utilities > Interactions - 2 examples
• [x] Utilities > Position - 5 examples
  • [x] Issues with rendering because of .bd-example-position-utils .position-absolute specific rule
• [x] Utilities > Shadow - 1 example
• [x] Utilities > Sizing - 4 examples
• [x] Utilities > Spacing - 1 example
• [x] Utilities > Text - 11 examples
  • [x] Text wrapping and overflow: the 2nd example doesn't work because of .bd-highlight coming from the docs CSS
• [x] Utilities > Vertical Align - 2 examples

[WinterSilence]

also, need normalize examples:

• remove classes with bd- prefix
• replace svg image placeholders to image tags: <img src="/placeholder.svg">