Description

Initially in #36088, this PR proposes to hide or fix examples that doesn't work with StackBlitz.

This PR adds a new parameter {{< example show_edit_btn="false" >}} to hide the StackBlitz edit button for examples that cannot work easily: need extra HTML or JS code; for example the alert's live example.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• All new and existing tests passed

Related PR

#36088

Live previews

• Accordions (3 examples)
• Alerts (7 examples)
  • Live example: hidden for the moment to test the hidden feature. TODO: try to embed the JS.
• Badge - 6 examples
• Breadcrumb - 4 examples
• Button Group - TODO
  • 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: Not linked to this PR but 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 Update offcanvas example to include .show class #36151 created after this PR
• Pagination - 8 examples
• Placeholders - 5 examples
• Popovers - 5 examples
  • None of the examples are working - see Allow popovers examples to be tried on StackBlitz #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
  • None of the examples are working
• 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