diff --git a/src/addons/mod/data/data.scss b/src/addons/mod/data/data.scss
index 3bdf9069e..ad7144a13 100644
--- a/src/addons/mod/data/data.scss
+++ b/src/addons/mod/data/data.scss
@@ -25,7 +25,7 @@ $grid-column-paddings: (
::ng-deep {
@import "theme/components/moodle.scss";
- @import "theme/components/bootstrap/bootstrap_database.scss";
+ @import "theme/components/bootstrap/bootstrap.scss";
table {
display: block;
diff --git a/src/theme/components/bootstrap/_close.scss b/src/theme/components/bootstrap/_close.scss
new file mode 100644
index 000000000..82e9593ef
--- /dev/null
+++ b/src/theme/components/bootstrap/_close.scss
@@ -0,0 +1,40 @@
+.close {
+ float: right;
+ @include font-size($close-font-size);
+ font-weight: $close-font-weight;
+ line-height: 1;
+ color: $close-color;
+ text-shadow: $close-text-shadow;
+ opacity: .5;
+
+ // Override 's hover style
+ @include hover() {
+ color: $close-color;
+ text-decoration: none;
+ }
+
+ &:not(:disabled):not(.disabled) {
+ @include hover-focus() {
+ opacity: .75;
+ }
+ }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+ padding: 0;
+ background-color: transparent;
+ border: 0;
+}
+
+// Future-proof disabling of clicks on `` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+ pointer-events: none;
+}
diff --git a/src/theme/components/bootstrap/_utilities.scss b/src/theme/components/bootstrap/_utilities.scss
index cd93459f1..9a189087b 100644
--- a/src/theme/components/bootstrap/_utilities.scss
+++ b/src/theme/components/bootstrap/_utilities.scss
@@ -1,5 +1,7 @@
@import "utilities/align";
@import "utilities/borders";
@import "utilities/flex";
+@import "utilities/float";
+@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
diff --git a/src/theme/components/bootstrap/_variables.scss b/src/theme/components/bootstrap/_variables.scss
index 3459a0bcf..0defb792e 100644
--- a/src/theme/components/bootstrap/_variables.scss
+++ b/src/theme/components/bootstrap/_variables.scss
@@ -155,6 +155,10 @@ $grid-row-columns: 6;
//
// Font, line-height, and color for body text, headings, and more.
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg: $font-size-base * 1.25 !default;
+$font-size-sm: $font-size-base * .875 !default;
+
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
@@ -215,3 +219,10 @@ $badge-pill-padding-x: .6em;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem;
+
+// Close
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
diff --git a/src/theme/components/bootstrap/bootstrap.scss b/src/theme/components/bootstrap/bootstrap.scss
index 076a9867e..5a8de85bf 100644
--- a/src/theme/components/bootstrap/bootstrap.scss
+++ b/src/theme/components/bootstrap/bootstrap.scss
@@ -3,14 +3,28 @@
// Bootstrap 4 Styles
// -------------------------
-@import "reboot";
-@import "forms";
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "reboot";
+
+@import "grid";
+@import "forms";
@import "buttons";
+@import "card";
+@import "badge";
@import "alert";
@import "media";
+@import "close";
+
@import "utilities";
+// Bootstrap 5 Styles
+// -------------------------
+@import "bs5-bridge";
+
+
// Deprecated styles.
.label {
display: inline-block;
diff --git a/src/theme/components/bootstrap/bs5-bridge.scss b/src/theme/components/bootstrap/bs5-bridge.scss
new file mode 100644
index 000000000..00ff96074
--- /dev/null
+++ b/src/theme/components/bootstrap/bs5-bridge.scss
@@ -0,0 +1,109 @@
+/**
+ * This file should be in sync with: https://github.com/moodle/moodle/blob/main/theme/boost/scss/moodle/bs5-bridge.scss
+ * This is partially done as part of https://tracker.moodle.org/browse/MDL-71979.
+ */
+
+ /* Bootstrap 5 bridge classes */
+
+
+/*
+ * These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
+ * and will be located in __functions.scss in Bootstrap 5
+ */
+
+// Tint a color: mix a color with white based on the provided weight.
+@function tint-color($color, $weight) {
+ @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black.
+// This function darkens a given color with black based on the provided weight.
+@function shade-color($color, $weight) {
+ @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it.
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+
+/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
+/* This file should be removed as part of MDL-75669. */
+.g-0 {
+ @extend .no-gutters;
+}
+
+.btn-close {
+ @extend .close;
+}
+
+// Generate all spacer classes for all breakpoints for directions start and end.
+// ps-1 > pl-1, pe-1 > pr-1, me-sm-1 > ml-sm-1, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $prop, $abbrev in (margin: m, padding: p) {
+ @each $size, $length in $spacers {
+ .#{$abbrev}s#{$infix}-#{$size} {
+ @extend .#{$abbrev}l#{$infix}-#{$size};
+ }
+ .#{$abbrev}e#{$infix}-#{$size} {
+ @extend .#{$abbrev}r#{$infix}-#{$size};
+ }
+ }
+ }
+}
+
+// Generate all margin auto classes for all breakpoints for directions start and end.
+// ps-auto > pl-auto, pe-auto > pr-auto, me-sm-auto > ml-sm-auto, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ .ms#{$infix}-auto {
+ @extend .ml#{$infix}-auto;
+ }
+ .me#{$infix}-auto {
+ @extend .mr#{$infix}-auto;
+ }
+}
+
+// Generate all float classes for all breakpoints for directions start and end.
+// float-start > float-left, float-sm-end > float-sm-right, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ .float#{$infix}-start {
+ @extend .float#{$infix}-left;
+ }
+ .float#{$infix}-end {
+ @extend .float#{$infix}-right;
+ }
+}
+
+// Generate all text classes for all breakpoints for directions start and end.
+// text-start > text-left, text-sm-end > text-sm-right, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ .text#{$infix}-start {
+ @extend .text#{$infix}-left;
+ }
+ .text#{$infix}-end {
+ @extend .text#{$infix}-right;
+ }
+}
+
+.border-start {
+ @extend .border-left;
+}
+.border-end {
+ @extend .border-right;
+}
+.border-start-0 {
+ @extend .border-left-0;
+}
+.border-end-0 {
+ @extend .border-right-0;
+}
+.rounded-start {
+ @extend .rounded-left;
+}
+.rounded-end {
+ @extend .rounded-right;
+}
diff --git a/src/theme/components/bootstrap/utilities/_float.scss b/src/theme/components/bootstrap/utilities/_float.scss
new file mode 100644
index 000000000..54250844f
--- /dev/null
+++ b/src/theme/components/bootstrap/utilities/_float.scss
@@ -0,0 +1,11 @@
+// stylelint-disable declaration-no-important
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .float#{$infix}-left { float: left !important; }
+ .float#{$infix}-right { float: right !important; }
+ .float#{$infix}-none { float: none !important; }
+ }
+}
diff --git a/src/theme/components/bootstrap/utilities/_text.scss b/src/theme/components/bootstrap/utilities/_text.scss
index 79920db8e..7ab23156a 100644
--- a/src/theme/components/bootstrap/utilities/_text.scss
+++ b/src/theme/components/bootstrap/utilities/_text.scss
@@ -15,9 +15,15 @@
// Responsive alignment
-.text-left { text-align: left !important; }
-.text-right { text-align: right !important; }
-.text-center { text-align: center !important; }
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .text#{$infix}-left { text-align: left !important; }
+ .text#{$infix}-right { text-align: right !important; }
+ .text#{$infix}-center { text-align: center !important; }
+ }
+}
// Transformation