diff --git a/www/content/examples/modal-bootstrap.md b/www/content/examples/modal-bootstrap.md
index 50e1614e..b4138638 100644
--- a/www/content/examples/modal-bootstrap.md
+++ b/www/content/examples/modal-bootstrap.md
@@ -4,8 +4,7 @@ template = "demo.html"
 +++
 
 Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. 
-This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to 
-trigger its animation styles in Javascript.
+This example shows how to use HTMX alongside original JavaScript provided by Bootstrap.
 
 We start with a button that triggers the dialog, along with a DIV at the bottom of your 
 markup where the dialog will be loaded:
@@ -15,77 +14,59 @@ markup where the dialog will be loaded:
 	hx-get="/modal" 
 	hx-target="#modals-here" 
 	hx-trigger="click"
-	class="btn btn-primary"
-	_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
+    data-bs-toggle="modal"
+    data-bs-target="#modals-here"
+	class="btn btn-primary">Open Modal</button>
 
-<div id="modals-here"></div>
+<div id="modals-here"
+    class="modal modal-blur fade"
+    style="display: none"
+    aria-hidden="false"
+    tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+        <div class="modal-content"></div>
+    </div>
+</div>
 ```
 
 This button uses a `GET` request to `/modal` when this button is clicked.  The
 contents of this file will be added to the DOM underneath the `#modals-here` DIV.
 
-We're replacing Bootstrap's javascript widgets with a small bit of Hyperscript to provide
-smooth animations when the dialog opens and closes.
-
-Finally, the server responds with a slightly modified version of Bootstrap's standard modal
+The server responds with a slightly modified version of Bootstrap's standard modal
 
 ```html
-<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
-<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
-	<div class="modal-dialog modal-dialog-centered">
-	  <div class="modal-content">
-		<div class="modal-header">
-		  <h5 class="modal-title">Modal title</h5>
-		</div>
-		<div class="modal-body">
-		  <p>Modal body text goes here.</p>
-		</div>
-		<div class="modal-footer">
-		  <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
-		</div>
-	  </div>
-	</div>
+<div class="modal-dialog modal-dialog-centered">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Modal title</h5>
+    </div>
+    <div class="modal-body">
+      <p>Modal body text goes here.</p>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"">Close</button>
+    </div>
   </div>
+</div>
 ```
 
-We're replacing the standard Bootstrap Javascript library with a little bit of Javascript, 
-which triggers Bootstrap's smooth animations.
-
-```javascript
-function closeModal() {
-	var container = document.getElementById("modals-here")
-	var backdrop = document.getElementById("modal-backdrop")
-	var modal = document.getElementById("modal")
-
-	modal.classList.remove("show")
-	backdrop.classList.remove("show")
-
-	setTimeout(function() {
-		container.removeChild(backdrop)
-		container.removeChild(modal)
-	}, 200)
-}
-```
-
-<div id="modals-here"></div>
+<div id="modals-here"
+class="modal modal-blur fade"
+style="display: none"
+aria-hidden="false"
+tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+        <div class="modal-content"></div>
+    </div>
+</div>
 
 {{ demoenv() }}
 
-<script src="https://unpkg.com/hyperscript.org"></script>
-
 <style>
-	@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css";
+	@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css";
 </style>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 <script>
-	function closeModal() {
-		document.getElementById("modal").classList.remove("show")
-		document.getElementById("modal-backdrop").classList.remove("show")
-
-		setTimeout(function() {
-			document.getElementById("modals-here").innerHTML = ""
-		}, 200)
-	}
 
 	//=========================================================================
     // Fake Server Side Code
@@ -94,30 +75,27 @@ function closeModal() {
     // routes
     init("/demo", function(request, params) {
 		return `<button 
-			hx-get="/modal" 
-			hx-target="#modals-here" 
-			bx-trigger="click"
-			class="btn btn-primary"
-			_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
+	hx-get="/modal" 
+	hx-target="#modals-here" 
+	hx-trigger="click"
+    data-bs-toggle="modal"
+    data-bs-target="#modals-here"
+	class="btn btn-primary">Open Modal</button>
 	`})
 		
 	onGet("/modal", function(request, params){
-	  return `<div id="modal-backdrop" class="modal-backdrop fade" style="display:block;"></div>
-<div id="modal" class="modal fade" tabindex="-1" style="display:block;">
-	<div class="modal-dialog modal-dialog-centered">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title">Modal title</h5>
-			</div>
-			<div class="modal-body">
-				<p>Modal body text goes here.</p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
-			</div>
-		</div>
-	</div>
+	  return `<div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">Modal title</h5>
+        </div>
+        <div class="modal-body">
+            <p>Modal body text goes here.</p>
+        </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+    </div>
+    </div>
 </div>`
-
 });
 </script>