diff --git a/.upgradenotes/MDL-81818-2024053109201607.yml b/.upgradenotes/MDL-81818-2024053109201607.yml
new file mode 100644
index 00000000000..9fedb9068cf
--- /dev/null
+++ b/.upgradenotes/MDL-81818-2024053109201607.yml
@@ -0,0 +1,5 @@
+issueNumber: MDL-81818
+notes:
+ theme_boost:
+ - message: 'Bootstrap .no-gutters class is no longer used, use .g-0 instead.'
+ type: changed
diff --git a/admin/tool/componentlibrary/content/bootstrap/components/card.md b/admin/tool/componentlibrary/content/bootstrap/components/card.md
index ea784dc9946..18645248cfc 100644
--- a/admin/tool/componentlibrary/content/bootstrap/components/card.md
+++ b/admin/tool/componentlibrary/content/bootstrap/components/card.md
@@ -392,11 +392,11 @@ Note that content should not be larger than the height of the image. If content
## Horizontal
-Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
{{< example >}}
<div class="card mb-3" style="max-width: 540px;">
- <div class="row no-gutters">
+ <div class="row g-0">
<div class="col-md-4">
{{< placeholder width="100%" height="250" class="" text="Image" >}}
</div>
diff --git a/admin/tool/componentlibrary/content/bootstrap/utilities/stretched-link.md b/admin/tool/componentlibrary/content/bootstrap/utilities/stretched-link.md
index db714cd7687..436318101cb 100644
--- a/admin/tool/componentlibrary/content/bootstrap/utilities/stretched-link.md
+++ b/admin/tool/componentlibrary/content/bootstrap/utilities/stretched-link.md
@@ -38,7 +38,7 @@ Media objects do not have `position: relative` by default, so we need to add the
Columns are `position: relative` by default, so clickable columns only require the `.stretched-link` class on a link. However, stretching a link over an entire `.row` requires `.position-static` on the column and `.position-relative` on the row.
{{< example >}}
-<div class="row no-gutters bg-light position-relative">
+<div class="row g-0 bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
{{< placeholder width="100%" height="200" class="w-100" text=" " title="Generic placeholder image" >}}
</div>
diff --git a/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html b/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
index 93c3b7c9938..27a96ef96b8 100644
--- a/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
+++ b/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
@@ -1,7 +1,7 @@
{{ partial "skippy" . }}
<div class="container-fluid p-0 bg-white" data-region="componentlibrary">
- <div class="row no-gutters flex-xl-nowrap">
+ <div class="row g-0 flex-xl-nowrap">
<div class="col-md-3 col-xl-2 sidebar">
<div class="controls d-flex justify-content-between">
<div class="simplesearchform w-100">
diff --git a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
index 6f89fb4dbbc..bb0012391f9 100644
--- a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
+++ b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
@@ -6,7 +6,7 @@
{{ range $.Site.Data.fontawesomeicons }}
<div class="card mb-2 mx-1 p-1 d-flex flex-column justify-content-around text-center" style="flex: 0 0 20%; height: 150px">
<div class="small text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{ .name }}">{{ .name }}</div>
- <div class="row no-gutters">
+ <div class="row g-0">
<div class="col-sm-6 d-flex align-items-center justify-content-center">
<i class="fa {{ .icon }} fa-2x"></i>
</div>
diff --git a/blocks/myoverview/templates/main.mustache b/blocks/myoverview/templates/main.mustache
index 1828a0efcfb..b333e92ae24 100644
--- a/blocks/myoverview/templates/main.mustache
+++ b/blocks/myoverview/templates/main.mustache
@@ -27,7 +27,7 @@
<hr class="mt-0"/>
<div role="search" data-region="filter" class="d-flex align-items-center my-2" aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
- <div class="row no-gutters">
+ <div class="row g-0">
{{> block_myoverview/nav-grouping-selector }}
{{> block_myoverview/nav-search-widget }}
diff --git a/blocks/timeline/templates/main.mustache b/blocks/timeline/templates/main.mustache
index b3f7ea87eb3..3f7a761a1af 100644
--- a/blocks/timeline/templates/main.mustache
+++ b/blocks/timeline/templates/main.mustache
@@ -25,7 +25,7 @@
<div id="block-timeline-{{uniqid}}-{{timelineinstanceid}}" class="block-timeline" data-region="timeline">
<div class="p-0 px-2">
- <div class="row no-gutters">
+ <div class="row g-0">
<div class="mr-2 mb-1">
{{> block_timeline/nav-day-filter }}
</div>
diff --git a/message/templates/message_index.mustache b/message/templates/message_index.mustache
index 8640609a554..361ca6b250d 100644
--- a/message/templates/message_index.mustache
+++ b/message/templates/message_index.mustache
@@ -42,7 +42,7 @@
role="region"
>
<div class="container-fluid">
- <div class="row h-100 no-gutters">
+ <div class="row h-100 g-0">
<div class="col-4 d-flex flex-column conversationcontainer">
<div class="border-right h-100">
<div class="panel-header-container" data-region="panel-header-container">
diff --git a/mod/quiz/templates/list_of_attempts.mustache b/mod/quiz/templates/list_of_attempts.mustache
index b29334ed68f..0f7c0a6080f 100644
--- a/mod/quiz/templates/list_of_attempts.mustache
+++ b/mod/quiz/templates/list_of_attempts.mustache
@@ -46,7 +46,7 @@
{{#hasattempts}}
<h3>{{# str}}summaryofattempts, quiz{{/str}}</h3>
-<ul class="list-unstyled row row-cols-1 row-cols-md-2 no-gutters">
+<ul class="list-unstyled row row-cols-1 row-cols-md-2 g-0">
{{#attempts}}
<li class="col pl-0 pr-2 mb-2">
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index a790a5f4ea1..98b66aae4e0 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -4,6 +4,9 @@ $breadcrumb-divider-rtl: "◀" !default;
// Specific overrides to make Bootstrap RTL.
@import "moodle/bootstrap-rtl";
+// Specific SCSS to make some Bootstrap 5 syntax work with Moodle.
+@import "moodle/bs5-bridge";
+
// Old Moodle stuff from base theme.
// Massive, needs broken up.
@import "moodle/variables";
diff --git a/theme/boost/scss/moodle/bs5-bridge.scss b/theme/boost/scss/moodle/bs5-bridge.scss
new file mode 100644
index 00000000000..02de1cc0d60
--- /dev/null
+++ b/theme/boost/scss/moodle/bs5-bridge.scss
@@ -0,0 +1,7 @@
+/* Bootstrap 5 bridge classes */
+
+/* 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;
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0478f46cc5a..2cfc30d5a9e 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -13898,12 +13898,13 @@ pre code {
margin-left: -15px;
}
-.no-gutters {
+.no-gutters, .g-0 {
margin-right: 0;
margin-left: 0;
}
-.no-gutters > .col,
-.no-gutters > [class*=col-] {
+.no-gutters > .col, .g-0 > .col,
+.no-gutters > [class*=col-],
+.g-0 > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
@@ -22964,6 +22965,9 @@ a.text-dark:hover, a.text-dark:focus {
right: calc(-0.5rem - 1px);
}
+/* Bootstrap 5 bridge classes */
+/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
+/* This file should be removed as part of MDL-75669. */
/**
* Moodle variables
*
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 8dcb8f29fe0..a5dd5fbb5eb 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -13898,12 +13898,13 @@ pre code {
margin-left: -15px;
}
-.no-gutters {
+.no-gutters, .g-0 {
margin-right: 0;
margin-left: 0;
}
-.no-gutters > .col,
-.no-gutters > [class*=col-] {
+.no-gutters > .col, .g-0 > .col,
+.no-gutters > [class*=col-],
+.g-0 > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
@@ -22964,6 +22965,9 @@ a.text-dark:hover, a.text-dark:focus {
right: calc(-0.5rem - 1px);
}
+/* Bootstrap 5 bridge classes */
+/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
+/* This file should be removed as part of MDL-75669. */
/**
* Moodle variables
*