1 files changed, 15 insertions, 8 deletions
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index 56513c7ff8..3378a230e9 100644
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -26,36 +26,43 @@
   document.querySelectorAll('.btn-edit').forEach(btn => {
     btn.addEventListener('click', event => {
       const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-      StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
+
+      // Get extra classes for this example
+      const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
+
+      const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
+      StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
     })
   })
 
-  StackBlitzSDK.openBootstrapSnippet = snippet => {
+  StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
     const markup = `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
+    <link href="https://getbootstrap.com/docs/{{ .Site.Params.docs_version }}/assets/css/docs.css" rel="stylesheet">
     <title>Bootstrap Example</title>
+    <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
   </head>
-  <body>
+  <body class="p-3 m-0 border-0 ${classes}">
 
     <!-- Example Code -->
-${snippet.replace(/^/gm, '    ')}
+${htmlSnippet.replace(/^/gm, '    ')}
     <!-- End Example Code -->
-
-    <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
   </body>
 </html>`
 
+    const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null
     const project = {
       files: {
-        'index.html': markup
+        'index.html': markup,
+        'index.js': jsSnippetContent
       },
       title: 'Bootstrap Example',
       description: `Official example from ${window.location.href}`,
-      template: 'html',
+      template: jsSnippet ? 'javascript' : 'html',
       tags: ['bootstrap']
     }