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 36dfa1fe71c..2afd03e6fb8 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 41a60b43906..a72eeb2aa43 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
  *