diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less
index 5a4aad26c07..15d05d2ad51 100644
--- a/theme/bootstrapbase/less/moodle/bs4-compat.less
+++ b/theme/bootstrapbase/less/moodle/bs4-compat.less
@@ -4,9 +4,26 @@
 
 // Add support for card. We map it to well.
 // This is not meant to be perfect - but at least applies some styles to a bs4 card.
-.card:extend(.well) {
+.card {
+    position: relative;
+    display: block;
+    margin-bottom: .75rem;
+    background-color: #fff;
+    border: 1px solid @wellBorder;
+    border-radius: 0;
 }
 
+.card-header {
+    padding: .75rem 1.25rem;
+    background-color: @wellBackground;
+    border-bottom: 1px solid @wellBorder;
+}
+
+.card-block {
+    padding: 1.25rem;
+}
+
+
 // Due to lessphp limitations, the following classes must be declared statically without use of a loop.
 .p-l-1 {
     padding-left: 1 * @baseFontSize !important;
diff --git a/theme/bootstrapbase/less/moodle/calendar.less b/theme/bootstrapbase/less/moodle/calendar.less
index cbb29dc26fe..12cff339691 100644
--- a/theme/bootstrapbase/less/moodle/calendar.less
+++ b/theme/bootstrapbase/less/moodle/calendar.less
@@ -191,7 +191,6 @@
                 }
                 .description {
                     background-color: @white;
-                    padding: 5px;
                     clear: both;
                 }
                 .commands {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 066dc473b30..cc971f8fe65 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -5708,7 +5708,6 @@ img.iconsmall {
 }
 .path-calendar .maincalendar .eventlist .event .description {
   background-color: #fff;
-  padding: 5px;
   clear: both;
 }
 .path-calendar .maincalendar .eventlist .event .commands a {
@@ -12929,8 +12928,7 @@ table th[class*="span"],
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.well,
-.card {
+.well {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
@@ -15631,8 +15629,7 @@ legend {
 .breadcrumb {
   background-color: #f5f5f5;
 }
-.well,
-.card {
+.well {
   border-color: #e3e3e3;
 }
 sup {
@@ -21614,6 +21611,22 @@ ul.indented-list {
   margin-left: 20px;
 }
 /* stylelint-disable declaration-no-important, block-no-empty */
+.card {
+  position: relative;
+  display: block;
+  margin-bottom: .75rem;
+  background-color: #fff;
+  border: 1px solid #e3e3e3;
+  border-radius: 0;
+}
+.card-header {
+  padding: .75rem 1.25rem;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e3e3e3;
+}
+.card-block {
+  padding: 1.25rem;
+}
 .p-l-1 {
   padding-left: 14px !important;
 }