[Tracking] Fix StackBlitz examples
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
-
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 -
Hide some Popover and Tooltip examples (see https://github.com/twbs/bootstrap/pull/36449) -
Embed specificCSS 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
List of examples
-
Accordions (3 examples) -
Alerts (7 examples) -
Badge - 6 examples -
Breadcrumb - 4 examples -
Button Group - 9 examples - Sizing and Vertical variation could be examples
-
Buttons - 15 examples -
Card - 30 examples - In all card examples, the image text is not centered nor with the good size
-
Carousel - 8 examples -
Close Button - 3 examples - White variant: We could pass a parameter to define a background color (here black).
-
Collapse - 3 examples -
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
-
Menu items 2 is not working because of the display: none
of.dropdown-menu
. -
Menu items > Active is not working because of the display: none
of.dropdown-menu
. -
Menu items > Disabled is not working because of the display: none
of.dropdown-menu
. -
Menu Content - Headers is not working because of the display: none
of.dropdown-menu
. -
Menu Content - Dividers is not working because of the display: none
of.dropdown-menu
. -
Menu Content - Text is not working because of the display: none
of.dropdown-menu
. -
Menu Content - Forms both examples are not working because of the display: none
of.dropdown-menu
.
-
List Group - 15 examples -
Modal - 2 examples - Maybe some other examples could be edited
-
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
-
-
Nav Tabs - 15 examples -
Offcanvas - 8 examples -
Offcanvas components is not working - Check https://github.com/twbs/bootstrap/pull/36151
-
-
Pagination - 8 examples -
Placeholders - 5 examples -
Popovers - 5 examples -
None of the examples are working - see https://github.com/twbs/bootstrap/pull/36127
-
-
Progress - 8 examples -
Spinners - 13 examples -
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.
-
Placement: changing toast placement doesn't move the toast. The second example is not working as well
-
Tooltips - 2 examples -
Custom example is displayed but not in color
-
-
Figures - 2 examples -
"400x300" are not centered correctly as in the cards and carousels
-
-
Images - 5 examples -
Same observation as for the Figures
-
-
Reboot - 8 examples -
Tables - 2 examples -
Typography - 12 examples -
Forms > Check Radios - 17 examples -
Indetermediate doesn't seem to work
-
-
Forms > Floating Labels - 8 examples -
Forms > Form Control - 9 examples -
Forms > Input Group - 11 examples -
Forms > Layout - 10 examples -
Forms > Overview - 4 examples -
Forms > Range - 4 examples -
Forms > Select - 5 examples -
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)
-
-
Helpers > Clearfix - 1 example -
Helpers > Colored links - 1 example -
Helpers > Ratio - 4 examples -
Aspect ratios and Custom ratios are not working because of the specific CSS for .bd-example-ratios .ratio
-
-
Helpers > Stacks - 6 examples -
Helpers > Stretched Link - 4 examples -
Helpers > Text Truncation - 1 example -
Helpers > Vertical rule - 3 examples -
Helpers > Visually hidden - 1 example -
Layout > Columns - 13 examples -
Issues with the rendering because of .bd-example-row-flex-cols .row
rules
-
-
Layout > CSS Grid - 15 examples -
Issues with the rendering because of .bd-example-cssgrid .grid > *
-
-
Layout > Grid - 15 examples -
Issues with the rendering because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
-
-
Layout > Gutters - 6 examples -
Some issues with the rendering of some examples because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
-
-
Utilities > Background - 3 examples -
Utilities > Borders - 8 examples -
Issues with rendering because of .bd-example-border-utils [class^="border"]
specific rule
-
-
Utilities > Colors - 3 examples -
Utilities > Display - 4 examples -
Utilities > Flex - 12 examples -
Some issues with the rendering because of .bd-example
specific rule
-
-
Utilities > Float - 2 examples -
Utilities > Interactions - 2 examples -
Utilities > Position - 5 examples -
Issues with rendering because of .bd-example-position-utils .position-absolute
specific rule
-
-
Utilities > Shadow - 1 example -
Utilities > Sizing - 4 examples -
Utilities > Spacing - 1 example -
Utilities > Text - 11 examples -
Text wrapping and overflow: the 2nd example doesn't work because of .bd-highlight
coming from the docs CSS
-
-
Utilities > Vertical Align - 2 examples