Update Bootstrap from v4 to v5

app/assets/stylesheets/base.css.scss

@@ -12,6 +12,15 @@ h1, h2, h3, h4, h5, h6 {
   color: rgba(70, 70, 70, 1);
 }
 
+a:not(.dropdown-item, .dropdown-toggle, .dropdown-link, .btn, .page-link), .btn-link {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+
+  }
+}
+
 i.fa-solid, i.fa-regular, i.fa-solid {
   margin-right: 0.5em;
 }
@@ -51,13 +60,17 @@ span.caret {
 .navbar {
   -webkit-font-smoothing: antialiased;
   font-weight: 500;
+  font-size: 0.85rem;
+  .dropdown-item {
+    padding: 1rem 1.5rem;
+  }
 }
 
 .attribute-row + .attribute-row {
   margin-top: 0.5em;
 }
 
-.badge-pill {
+.rounded-pill {
   font-size: 100%;
   font-weight: 500;
 }

app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss

@@ -29,11 +29,11 @@
   border-left-color: #ffffff;
 }
 
-.dropdown-submenu.float-left {
+.dropdown-submenu.float-start {
   float: none;
 }
 
-.dropdown-submenu.float-left > .dropdown-menu {
+.dropdown-submenu.float-start > .dropdown-menu {
   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;

app/assets/stylesheets/editor.css.scss

@@ -48,10 +48,6 @@ button i.fa-spin {
   vertical-align: bottom;
 }
 
-#development-environment {
-  display: none;
-}
-
 #dummy {
   display: none;
 }
@@ -203,8 +199,8 @@ button i.fa-spin {
   visibility: visible;
 }
 
-.enforce-big-top-margin {
-  margin-top: 15px !important;
+.enforce-big-bottom-margin {
+  margin-bottom: 15px !important;
 }
 
 .enforce-bottom-margin {

app/assets/stylesheets/exercises.css.scss

@@ -40,11 +40,11 @@ input[type='file'] {
   }
 }
 
-[data-toggle="collapse"] .fa-solid:before {
+[data-bs-toggle="collapse"] .fa-solid:before {
   content: "\f139";
 }
 
-[data-toggle="collapse"].collapsed .fa-solid:before {
+[data-bs-toggle="collapse"].collapsed .fa-solid:before {
   content: "\f13a";
 }
 

app/assets/stylesheets/forms.css.scss

@@ -23,12 +23,6 @@
     margin-bottom: 1em;
   }
 
-  .form-group {
-    &:not(:last-child) {
-      margin-right: 1em;
-    }
-  }
-
   input, select {
     min-width: 200px !important;
   }