diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less
index 937b4349df1..fb8802ab672 100644
--- a/theme/bootstrapbase/less/moodle/bs4-compat.less
+++ b/theme/bootstrapbase/less/moodle/bs4-compat.less
@@ -176,6 +176,170 @@
     margin: 3 * @baseFontSize !important;
 }
 
+
+// Bootstrap 4 stable utilities
+.p-1 {
+    padding: @baseFontSize / 4 !important;
+}
+.p-2 {
+    padding: @baseFontSize / 2 !important;
+}
+.p-3 {
+    padding: @baseFontSize !important;
+}
+.p-4 {
+    padding: @baseFontSize * 1.5 !important;
+}
+
+.pl-1,
+.px-1 {
+    padding-left: @baseFontSize / 4 !important;
+}
+.pl-2,
+.px-2 {
+    padding-left: @baseFontSize / 2 !important;
+}
+.pl-3,
+.px-3 {
+    padding-left: @baseFontSize !important;
+}
+.pl-4,
+.px-4 {
+    padding-left: @baseFontSize * 1.5 !important;
+}
+.pr-1,
+.px-1 {
+    padding-right: @baseFontSize / 4 !important;
+}
+.pr-2,
+.px-2 {
+    padding-right: @baseFontSize / 2 !important;
+}
+.pr-3,
+.px-3 {
+    padding-right: @baseFontSize !important;
+}
+.pr-4,
+.px-4 {
+    padding-right: @baseFontSize * 1.5 !important;
+}
+.pt-1,
+.py-1 {
+    padding-top: @baseFontSize / 4 !important;
+}
+.pt-2,
+.py-2 {
+    padding-top: @baseFontSize / 2 !important;
+}
+.pt-3,
+.py-3 {
+    padding-top: @baseFontSize !important;
+}
+.pt-4,
+.py-4 {
+    padding-top: @baseFontSize * 1.5 !important;
+}
+.pb-1,
+.py-1 {
+    padding-bottom: @baseFontSize / 4 !important;
+}
+.pb-2,
+.py-2 {
+    padding-bottom: @baseFontSize / 2 !important;
+}
+.pb-3,
+.py-3 {
+    padding-bottom: @baseFontSize !important;
+}
+.pb-4,
+.py-4 {
+    padding-bottom: @baseFontSize * 1.5 !important;
+}
+
+
+.ml-1,
+.mx-1 {
+    margin-left: @baseFontSize / 4 !important;
+}
+.ml-2,
+.mx-2 {
+    margin-left: @baseFontSize / 2 !important;
+}
+.ml-3,
+.mx-3 {
+    margin-left: @baseFontSize !important;
+}
+.ml-4,
+.mx-4 {
+    margin-left: @baseFontSize * 1.5 !important;
+}
+.mr-1,
+.mx-1 {
+    margin-right: @baseFontSize / 4 !important;
+}
+.mr-2,
+.mx-2 {
+    margin-right: @baseFontSize / 2 !important;
+}
+.mr-3,
+.mx-3 {
+    margin-right: @baseFontSize !important;
+}
+.mr-4,
+.mx-4 {
+    margin-right: @baseFontSize * 1.5 !important;
+}
+.mb-1,
+.my-1 {
+    margin-bottom: @baseFontSize / 4 !important;
+}
+.mb-2,
+.my-2 {
+    margin-bottom: @baseFontSize / 2 !important;
+}
+.mb-3,
+.my-3 {
+    margin-bottom: @baseFontSize !important;
+}
+.mb-4,
+.my-4 {
+    margin-bottom: @baseFontSize * 1.5 !important;
+}
+.mt-1,
+.my-1 {
+    margin-top: @baseFontSize / 4 !important;
+}
+.mt-2,
+.my-2 {
+    margin-top: @baseFontSize / 2 !important;
+}
+.mt-3,
+.my-3 {
+    margin-top: @baseFontSize !important;
+}
+.mt-4,
+.my-4 {
+    margin-top: @baseFontSize * 1.5 !important;
+}
+
+
+.ml-auto,
+.mx-auto {
+    margin-left: auto !important;
+}
+.mr-auto,
+.mx-auto {
+    margin-right: auto !important;
+}
+.mt-auto,
+.my-auto {
+    margin-top: auto !important;
+}
+.mb-auto,
+.my-auto {
+    margin-bottom: auto !important;
+}
+
 .d-inline {
     display: inline !important;
 }
@@ -303,10 +467,46 @@
     &-primary[href] {
         background-color: darken(@blue, 10%);
     }
+    &-faded,
+    &-light {
+        background-color: #f8f9fa !important;
+    }
+    &-white {
+        background-color: @white !important;
+    }
+    &-secondary {
+        background-color: #e9ecef !important;
+    }
 }
 
-.bg-faded {
-    background-color: @grayLighter;
+.border-left {
+    border-left: 1px solid #dee2e6 !important;
+}
+.border-right {
+    border-right: 1px solid #dee2e6 !important;
+}
+.border-top {
+    border-top: 1px solid #dee2e6 !important;
+}
+.border-bottom {
+    border-bottom: 1px solid #dee2e6 !important;
+}
+
+
+.border-0 {
+    border: 0 !important;
+}
+.border-top-0 {
+    border-top: 0 !important;
+}
+.border-right-0 {
+    border-right: 0 !important;
+}
+.border-bottom-0 {
+    border-bottom: 0 !important;
+}
+.border-left-0 {
+    border-left: 0 !important;
 }
 
 .w-100 {
@@ -332,11 +532,6 @@
 .flex-column {
     flex-direction: column !important;
 }
-
-.align-self-stretch {
-    align-self: stretch;
-}
-
 .align-items-start {
     align-items: flex-start !important;
 }
@@ -344,29 +539,80 @@
 .align-items-center {
     align-items: center !important;
 }
-
-.ml-auto {
-    margin-left: auto;
+.h-100 {
+    height: 100% !important;
+}
+.position-absolute {
+    position: absolute !important;
+}
+.position-relative {
+    position: relative !important;
+}
+.align-self-center {
+    align-self: center !important;
+}
+.align-items-center {
+    align-items: center !important;
+}
+.align-self-stretch {
+    align-self: stretch !important;
+}
+.justify-content-around {
+    justify-content: space-around !important;
+}
+.flex-grow {
+    flex-grow: 1;
+}
+.flex-shrink {
+    flex-shrink: 1;
 }
 
-.mr-auto {
-    margin-right: auto;
+.rounded-circle {
+    .border-radius(50%);
+}
+.rounded {
+    .border-radius(4px);
+}
+.small {
+    font-size: 75%;
 }
 
-.mt-auto {
-    margin-top: auto;
+.box-initial {
+    box-sizing: initial;
+    & * {
+        box-sizing: initial;
+    }
 }
-
-.mr-2 {
-    margin-right: @baseFontSize / 2 !important;
+.box-border {
+    box-sizing: border-box;
+    & * {
+        box-sizing: border-box;
+    }
+}
+.list-group-item {
+    background-color: @white;
+}
+.list-group-item-action {
+    &:hover,
+    &:focus {
+        background-color: #f8f9fa;
+        text-decoration: none;
+    }
 }
-
 .icon-size-3 {
     height: 36px !important;
     width: 36px !important;
     img {
         height: 16px !important;
         width: 16px !important;
-        padding-right: 0;
     }
 }
+.icon-size-4 {
+    height: 44px !important;
+    width: 44px !important;
+    img {
+        height: 24px !important;
+        width: 24px !important;
+    }
+}
+
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 868a53c3c72..64d8d3c99f1 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -21805,6 +21805,162 @@ ul.indented-list {
 .m-a-3 {
   margin: 42px !important;
 }
+.p-1 {
+  padding: 3.5px !important;
+}
+.p-2 {
+  padding: 7px !important;
+}
+.p-3 {
+  padding: 14px !important;
+}
+.p-4 {
+  padding: 21px !important;
+}
+.pl-1,
+.px-1 {
+  padding-left: 3.5px !important;
+}
+.pl-2,
+.px-2 {
+  padding-left: 7px !important;
+}
+.pl-3,
+.px-3 {
+  padding-left: 14px !important;
+}
+.pl-4,
+.px-4 {
+  padding-left: 21px !important;
+}
+.pr-1,
+.px-1 {
+  padding-right: 3.5px !important;
+}
+.pr-2,
+.px-2 {
+  padding-right: 7px !important;
+}
+.pr-3,
+.px-3 {
+  padding-right: 14px !important;
+}
+.pr-4,
+.px-4 {
+  padding-right: 21px !important;
+}
+.pt-1,
+.py-1 {
+  padding-top: 3.5px !important;
+}
+.pt-2,
+.py-2 {
+  padding-top: 7px !important;
+}
+.pt-3,
+.py-3 {
+  padding-top: 14px !important;
+}
+.pt-4,
+.py-4 {
+  padding-top: 21px !important;
+}
+.pb-1,
+.py-1 {
+  padding-bottom: 3.5px !important;
+}
+.pb-2,
+.py-2 {
+  padding-bottom: 7px !important;
+}
+.pb-3,
+.py-3 {
+  padding-bottom: 14px !important;
+}
+.pb-4,
+.py-4 {
+  padding-bottom: 21px !important;
+}
+.ml-1,
+.mx-1 {
+  margin-left: 3.5px !important;
+}
+.ml-2,
+.mx-2 {
+  margin-left: 7px !important;
+}
+.ml-3,
+.mx-3 {
+  margin-left: 14px !important;
+}
+.ml-4,
+.mx-4 {
+  margin-left: 21px !important;
+}
+.mr-1,
+.mx-1 {
+  margin-right: 3.5px !important;
+}
+.mr-2,
+.mx-2 {
+  margin-right: 7px !important;
+}
+.mr-3,
+.mx-3 {
+  margin-right: 14px !important;
+}
+.mr-4,
+.mx-4 {
+  margin-right: 21px !important;
+}
+.mb-1,
+.my-1 {
+  margin-bottom: 3.5px !important;
+}
+.mb-2,
+.my-2 {
+  margin-bottom: 7px !important;
+}
+.mb-3,
+.my-3 {
+  margin-bottom: 14px !important;
+}
+.mb-4,
+.my-4 {
+  margin-bottom: 21px !important;
+}
+.mt-1,
+.my-1 {
+  margin-top: 3.5px !important;
+}
+.mt-2,
+.my-2 {
+  margin-top: 7px !important;
+}
+.mt-3,
+.my-3 {
+  margin-top: 14px !important;
+}
+.mt-4,
+.my-4 {
+  margin-top: 21px !important;
+}
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+.mt-auto,
+.my-auto {
+  margin-top: auto !important;
+}
+.mb-auto,
+.my-auto {
+  margin-bottom: auto !important;
+}
 .d-inline {
   display: inline !important;
 }
@@ -21894,8 +22050,42 @@ ul.indented-list {
 .bg-primary[href] {
   background-color: #0378a9;
 }
-.bg-faded {
-  background-color: #eee;
+.bg-faded,
+.bg-light {
+  background-color: #f8f9fa !important;
+}
+.bg-white {
+  background-color: #fff !important;
+}
+.bg-secondary {
+  background-color: #e9ecef !important;
+}
+.border-left {
+  border-left: 1px solid #dee2e6 !important;
+}
+.border-right {
+  border-right: 1px solid #dee2e6 !important;
+}
+.border-top {
+  border-top: 1px solid #dee2e6 !important;
+}
+.border-bottom {
+  border-bottom: 1px solid #dee2e6 !important;
+}
+.border-0 {
+  border: 0 !important;
+}
+.border-top-0 {
+  border-top: 0 !important;
+}
+.border-right-0 {
+  border-right: 0 !important;
+}
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+.border-left-0 {
+  border-left: 0 !important;
 }
 .w-100 {
   width: 100%;
@@ -21915,26 +22105,71 @@ ul.indented-list {
 .flex-column {
   flex-direction: column !important;
 }
-.align-self-stretch {
-  align-self: stretch;
-}
 .align-items-start {
   align-items: flex-start !important;
 }
 .align-items-center {
   align-items: center !important;
 }
-.ml-auto {
-  margin-left: auto;
+.h-100 {
+  height: 100% !important;
 }
-.mr-auto {
-  margin-right: auto;
+.position-absolute {
+  position: absolute !important;
 }
-.mt-auto {
-  margin-top: auto;
+.position-relative {
+  position: relative !important;
 }
-.mr-2 {
-  margin-right: 7px !important;
+.align-self-center {
+  align-self: center !important;
+}
+.align-items-center {
+  align-items: center !important;
+}
+.align-self-stretch {
+  align-self: stretch !important;
+}
+.justify-content-around {
+  justify-content: space-around !important;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.flex-shrink {
+  flex-shrink: 1;
+}
+.rounded-circle {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.rounded {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.small {
+  font-size: 75%;
+}
+.box-initial {
+  box-sizing: initial;
+}
+.box-initial * {
+  box-sizing: initial;
+}
+.box-border {
+  box-sizing: border-box;
+}
+.box-border * {
+  box-sizing: border-box;
+}
+.list-group-item {
+  background-color: #fff;
+}
+.list-group-item-action:hover,
+.list-group-item-action:focus {
+  background-color: #f8f9fa;
+  text-decoration: none;
 }
 .icon-size-3 {
   height: 36px !important;
@@ -21943,5 +22178,12 @@ ul.indented-list {
 .icon-size-3 img {
   height: 16px !important;
   width: 16px !important;
-  padding-right: 0;
+}
+.icon-size-4 {
+  height: 44px !important;
+  width: 44px !important;
+}
+.icon-size-4 img {
+  height: 24px !important;
+  width: 24px !important;
 }