diff --git a/etc/docs/assets/css/app.scss b/etc/docs/assets/css/app.scss
index 90cf37d006..b20d088422 100644
--- a/etc/docs/assets/css/app.scss
+++ b/etc/docs/assets/css/app.scss
@@ -1,5 +1,5 @@
 /* This file is for your main application css. */
-
+@import "../node_modules/bootstrap/scss/bootstrap";
 /* LiveView specific classes for your customizations */
 .phx-no-feedback.invalid-feedback,
 .phx-no-feedback .invalid-feedback {
diff --git a/etc/docs/assets/js/app.js b/etc/docs/assets/js/app.js
index d0664526be..058e9a3022 100644
--- a/etc/docs/assets/js/app.js
+++ b/etc/docs/assets/js/app.js
@@ -1,6 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
+import 'bootstrap';
 import "../css/app.scss"
 
 // webpack automatically bundles all modules in your
diff --git a/etc/docs/assets/package-lock.json b/etc/docs/assets/package-lock.json
index 438fe60899..949b02047a 100644
--- a/etc/docs/assets/package-lock.json
+++ b/etc/docs/assets/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "license": "MIT",
       "dependencies": {
+        "bootstrap": "^5.1.1",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -1561,6 +1562,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
+      "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -2180,6 +2191,18 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz",
+      "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10608,6 +10631,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
+      "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
+      "peer": true
+    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -11135,6 +11164,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz",
+      "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/etc/docs/assets/package.json b/etc/docs/assets/package.json
index 5c5cb2c0c5..8818126a87 100644
--- a/etc/docs/assets/package.json
+++ b/etc/docs/assets/package.json
@@ -7,6 +7,7 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "bootstrap": "^5.1.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -20,8 +21,8 @@
     "css-loader": "^3.4.2",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.9.0",
-    "sass": "^1.37.5",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass": "^1.37.5",
     "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "^4.41.5",
diff --git a/etc/docs/lib/docs_web/templates/layout/root.html.leex b/etc/docs/lib/docs_web/templates/layout/root.html.leex
index 0471f1868b..e65690e29b 100644
--- a/etc/docs/lib/docs_web/templates/layout/root.html.leex
+++ b/etc/docs/lib/docs_web/templates/layout/root.html.leex
@@ -7,11 +7,9 @@
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] || "Docs", suffix: " · Phoenix Framework" %>
     <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
-    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/bootstrap.min.css") %>"/>
     <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body>
     <%= @inner_content %>
-    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/bootstrap.bundle.min.js") %>"></script>
   </body>
 </html>