Add BS5 info

Dennis Suitters · Dennis Suitters · commit 80cd7e5d0c54 · 2022-03-13T15:43:02.000+11:00
Add home page BS5 Support information.
Add bs5.html example page on Getting Started Page.
diff --git a/00-getting-started.md b/00-getting-started.md
@@ -118,7 +118,7 @@ You can also test running example. Save below code as `index.html` and open it w
 
 {% include ad-doc.html %}
 
-### For bootstrap 4
+### For Bootstrap 4
 
 You can also use Summernote with Bootstrap 4 using `summernote-bs4.js` and `summernote-bs4.css`.
 
@@ -135,7 +135,24 @@ bs4_frame.innerHTML = '';
 {% include bs4.html %}
 {% endhighlight %}
 
-### Without Bootstrap
+### For bootstrap 5
+
+You can also use Summernote with Bootstrap 5 using `summernote-bs5.js` and `summernote-bs5.css`.
+
+<iframe id="bs5-frame" width="100%" height="200" frameborder="0">
+{% include bs5.html %}
+</iframe>
+<script>
+var bs5_frame = document.querySelector('#bs5-frame');
+bs4_frame.contentDocument.write(bs4_frame.innerHTML);
+bs4_frame.innerHTML = '';
+</script>
+
+{% highlight html %}
+{% include bs5.html %}
+{% endhighlight %}
+
+### Without Bootstrap (lite)
 
 You can use Summernote without Bootstrap using `summernote-lite.js` and `summernote-lite.css`.
 
diff --git a/_includes/bs5.html b/_includes/bs5.html
@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Summernote with Bootstrap 5</title>
+    <!-- include libraries(jQuery, bootstrap) -->
+    <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
+    <script type="text/javascript" src="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- include summernote css/js-->
+    <link href="summernote-bs5.css" rel="stylesheet">
+    <script src="summernote-bs5.js"></script>
+
+  </head>
+  <body>
+    <div id="summernote"></div>
+    <script>
+      $('#summernote').summernote({
+        placeholder: 'Hello Bootstrap 5',
+        tabsize: 2,
+        height: 100
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -71,7 +71,7 @@ <h3 class="card-title">Integration</h3>
       <div class="col-sm-5 summary-section">
         <h3>Features</h3>
         <ul style="list-style:none;padding:0;">
-          <li>Supports Bootstrap 3.x.x to 4.x.x</li>
+          <li>Supports Bootstrap 3.x.x to 5.x.x</li>
           <li>Lightweight (js+css: 100Kb)</li>
           <li>Smart User Interaction</li>
           <li>Works in all Major Browsers:
