[docs] Devdocs Bootstrap .close refactor

moodle · Jul 12, 2024 · 23716a3 · 23716a3
1 parent e20336b
commit 23716a3
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/docs/devupdate.md b/docs/devupdate.md
@@ -142,3 +142,11 @@ class core_renderer extends \core_renderer {
 </TabItem>
 
 </Tabs>
+
+### Refactoring BS4 features dropped in BS5 using a "bridge"
+
+<Since version="4.5" issueNumber="MDL-79917" />
+
+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 using a "bridge". This will help us to upgrade to Bootstrap 5 in the future.
+
+See more information in [Bootstrap 5 migration](./guides/bs5migration/index.md).
diff --git a/docs/guides/bs5migration/index.md b/docs/guides/bs5migration/index.md
@@ -248,3 +248,33 @@ The `.no-gutters` grid class has been replaced with `.g-0`.
 ```
 
 </ValidExample>
+
+### Close button
+
+The `.close` class has been replaced with `.btn-close`.
+
+<InvalidExample title="Don't">
+
+```html
+<div class="alert alert-warning alert-dismissible" role="alert">
+  I'm an alert.
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+```
+
+</InvalidExample>
+
+<ValidExample title="Do">
+
+```html
+<div class="alert alert-warning alert-dismissible" role="alert">
+  I'm an alert.
+  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+```
+
+</ValidExample>