Update to Bootstrap 5

martincostello · martincostello · commit be218862d2f3 · 2025-04-26T09:45:09.000+01:00
Update to Bootstrap 5 and remove references to jQuery.
diff --git a/src/TodoApp/Pages/Home/Index.cshtml b/src/TodoApp/Pages/Home/Index.cshtml
@@ -10,7 +10,7 @@
 <h2>
     My List
     <div class="h6 spinner-border" id="loader" role="status">
-        <span class="sr-only">Loading...</span>
+        <span class="visually-hidden">Loading...</span>
     </div>
 </h2>
 
@@ -20,7 +20,7 @@
 
 <div>
     <table class="table d-none" id="item-table">
-        <thead class="thead-light">
+        <thead>
             <tr>
                 <th class="w-50" scope="col">Item</th>
                 <th class="w-25" scope="col">Last Updated</th>
@@ -48,18 +48,18 @@
 
 <h2>Add New Item</h2>
 
-<form id="add-form" class="form-inline" role="form">
-
-    <label class="sr-only" for="new-item-text">Thing to do</label>
-
-    <input autocomplete="off"
-           autofocus
-           class="form-control form-control-lg mr-sm-2 w-75"
-           id="new-item-text"
-           name="text"
-           placeholder="Buy eggs 🥚"
-           type="text">
-
-    <button class="btn btn-lg btn-primary" disabled id="add-new-item" type="submit">Add</button>
-
+<form id="add-form" class="row gx-3 gy-2 align-items-center" role="form">
+    <div class="col-auto col-md-11">
+        <label class="visually-hidden" for="new-item-text">Thing to do</label>
+        <input autocomplete="off"
+               autofocus
+               class="form-control form-control-lg"
+               id="new-item-text"
+               name="text"
+               placeholder="Buy eggs 🥚"
+               type="text">
+    </div>
+    <div class="col-auto">
+        <button class="btn btn-lg btn-primary" disabled id="add-new-item" type="submit">Add</button>
+    </div>
 </form>
diff --git a/src/TodoApp/Pages/Shared/_Layout.cshtml b/src/TodoApp/Pages/Shared/_Layout.cshtml
@@ -4,19 +4,19 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - TodoApp</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" asp-append-version="true" />
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container">
             <a class="navbar-brand" href="/">TodoApp</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-navbar" aria-controls="site-navbar" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#site-navbar" aria-controls="site-navbar" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="site-navbar">
-                <ul class="navbar-nav mr-auto">
+                <ul class="navbar-nav me-auto">
                     <li class="nav-item">
                         <a class="nav-link" href="~/" title="My Todo List">My List</a>
                     </li>
@@ -34,8 +34,7 @@
             <p>&copy; @(DateTimeOffset.UtcNow.Year) - Martin Costello</p>
         </footer>
     </main>
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="~/static/js/main.js"></script>
 </body>
 </html>
diff --git a/src/TodoApp/package-lock.json b/src/TodoApp/package-lock.json
diff --git a/src/TodoApp/package.json b/src/TodoApp/package.json
@@ -21,7 +21,6 @@
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@stylistic/eslint-plugin": "^4.2.0",
-    "@types/jquery": "^3.5.32",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "eslint": "^9.25.1",
