Live examples for documentation

Created by: EricSimons

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

As users browse Bootstrap's various components, it would be helpful to have a link to a live environment where they can instantly try it out and fiddle around. This accelerates learning, encourages prototyping, and ultimately helps developers adopt bootstrap.

Because nearly all the examples in the docs include the relevant HTML in the corresponding code block this can be integrated very easily with existing online playgrounds like StackBlitz (of which I'm the co-creator and has been recommended by the Bootstrap maintainers for bug repros, etc).

With the StackBlitz JS SDK you can spawn playgrounds on-demand using the codeblock's contents when the user clicks an example. This ensures the docs themselves are the "source of truth" for all live examples contents and doesn't require additional maintenance.

I spent a few hours creating a PoC of how this could work and it seems to be pretty lightweight (here's the code diff, very WIP/not cleaned up yet). Also have included a GIF below of it in action:

Motivation and context

This would be a boon for developers interacting with the Bootstrap docs whether for learning, prototyping, or for bug repros. For these reasons other popular OSS libraries often have similar integrations- for example, ReactJS.org uses Codepen, Angular.io uses StackBlitz, etc etc.

Would this be something the Bootstrap team/community would be open to accepting PRs for? If so, would love to discuss any additional details and then I can work on making an official PR. (I would've already created a PR but the contributing guide asks that folks file an issue before opening up PRs for new functionality, hence the creation of this issue :)