[docs] Devdocs Bootstrap badges refactor

docs/devupdate.md

@@ -7,7 +7,7 @@ tags:
 
 <!-- markdownlint-disable no-inline-html -->
 
-import { Since } from '@site/src/components';
+import { Since, ValidExample, InvalidExample } from '@site/src/components';
 
 This page highlights the important changes that are coming in Moodle 4.4 for developers.
 
@@ -40,6 +40,31 @@ will only update the second enrol instance.
 
 A new method `enrol_plugin:find_instance()` is added to the enrol plugin interface to allow plugins to find an existing instance of the same type in the course. If you want your enrolment method to be supported in CSV course upload, you need to implement this [method](./apis/plugintypes/enrol#enrol_pluginfind_instance-stdclass)
 
+## Bootstrap preparations for version 5
+
+<Since version="4.4" issueNumber="MDL-71979" />
+
+Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5. To prepare for this, some of the current Bootstrap 4 classes usages have been replaced with version 5 compatible classes. This will help us to upgrade to Bootstrap 5 in the future.
+
+- Badge colour class helpers `.badge-*` have been replaced with background utilities (use `.bg-primary` instead of `.badge-primary`) combined with the corresponding text colour classes (`.text-dark` or `.text-white`) to meet accessibility contrast.
+- The `.badge-pill` class has been replaced with `.rounded-pill`
+
+<InvalidExample title="Don't">
+
+```html
+<span class="badge badge-danger badge-pill">Error badge</span>
+```
+
+</InvalidExample>
+
+<ValidExample title="Do">
+
+```html
+<span class="badge bg-danger text-white rounded-pill">Error badge</span>
+```
+
+</ValidExample>
+
 ## Previous versions
 
 - [Moodle 4.3 developer update](./4.3/devupdate)