From edfa10344440d0164167a04afbaa4f2d08cf88c5 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 19 Nov 2020 13:12:49 +0200
Subject: [PATCH] Adapt to the recent main branch changes

---
 .../docs/5.0/examples/album-rtl/index.html    |  2 +-
 .../docs/5.0/examples/carousel-rtl/index.html | 14 ++++-----
 .../docs/5.0/examples/checkout-rtl/index.html |  2 +-
 .../5.0/examples/dashboard-rtl/index.html     |  2 +-
 site/content/docs/5.0/getting-started/rtl.md  | 30 +++++++++++--------
 5 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.0/examples/album-rtl/index.html
index ec7bde888e..5142c4cec3 100644
--- a/site/content/docs/5.0/examples/album-rtl/index.html
+++ b/site/content/docs/5.0/examples/album-rtl/index.html
@@ -29,7 +29,7 @@ direction: rtl
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
         <strong>الألبوم</strong>
       </a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل">
         <span class="navbar-toggler-icon"></span>
       </button>
     </div>
diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html
index 6d5ce3ae19..89b470b996 100644
--- a/site/content/docs/5.0/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.0/examples/carousel-rtl/index.html
@@ -11,7 +11,7 @@ extra_css:
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">دائري</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
@@ -37,11 +37,11 @@ extra_css:
 
 <main>
 
-  <div id="myCarousel" class="carousel slide" data-ride="carousel">
+  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
     <ol class="carousel-indicators">
-      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-      <li data-target="#myCarousel" data-slide-to="1"></li>
-      <li data-target="#myCarousel" data-slide-to="2"></li>
+      <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
+      <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
+      <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
@@ -75,11 +75,11 @@ extra_css:
         </div>
       </div>
     </div>
-    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">السابق</span>
     </a>
-    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="visually-hidden">التالى</span>
     </a>
diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html
index 0c5fab9749..c4a60443dd 100644
--- a/site/content/docs/5.0/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.0/examples/checkout-rtl/index.html
@@ -216,7 +216,7 @@ body_class: "bg-light"
 
           <hr class="my-4">
 
-          <button class="btn btn-primary btn-lg btn-block" type="submit">الاستمرار في الخروج</button>
+          <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button>
         </form>
       </div>
     </div>
diff --git a/site/content/docs/5.0/examples/dashboard-rtl/index.html b/site/content/docs/5.0/examples/dashboard-rtl/index.html
index 5d33bdc720..cfd28a4514 100644
--- a/site/content/docs/5.0/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.0/examples/dashboard-rtl/index.html
@@ -15,7 +15,7 @@ extra_js:
 
 <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
   <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
+  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
     <span class="navbar-toggler-icon"></span>
   </button>
   <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.0/getting-started/rtl.md
index 00b1e37344..62287a3410 100644
--- a/site/content/docs/5.0/getting-started/rtl.md
+++ b/site/content/docs/5.0/getting-started/rtl.md
@@ -27,15 +27,15 @@ There are two strict requirements for enabling RTL in Bootstrap-powered pages.
 
 From there, you'll need to include an RTL version of our CSS. For example, here's the stylesheet for our compiled and minified CSS with RTL enabled:
 
-{{< highlight html >}}
+```html
 <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous">
-{{< /highlight >}}
+```
 
 ### Starter template
 
 You can see the above requirements reflected in this modified RTL starter template.
 
-{{< highlight html >}}
+```html
 <!doctype html>
 <html lang="ar" dir="rtl">
   <head>
@@ -51,13 +51,19 @@ You can see the above requirements reflected in this modified RTL starter templa
   <body>
     <h1>مرحبا بالعالم!</h1>
 
-    <!-- Optional JavaScript -->
-    <!-- Popper.js first, then Bootstrap JS -->
+    <!-- Optional JavaScript; choose one of the two! -->
+
+    <!-- Option 1: Bootstrap Bundle with Popper.js -->
+    <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
+
+    <!-- Option 2: Separate Popper.js and Bootstrap JS -->
+    <!--
     <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
     <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
+    -->
   </body>
 </html>
-{{< /highlight >}}
+```
 
 ### RTL examples
 
@@ -83,13 +89,13 @@ When it comes to [customization]({{< docsref "/customize/sass" >}}), the preferr
 
 Using [RTLCSS value directives](https://rtlcss.com/learn/usage-guide/value-directives/), you can make a variable output a different value for RTL. For example, to decrease the weight for `$font-weight-bold` throughout the codebase, you may use the `/*rtl: {value}*/` syntax:
 
-{{< highlight scss >}}
+```scss
 $font-weight-bold: 700 #{/* rtl:600 */} !default;
-{{< /highlight >}}
+```
 
 Which would ouput to the following for our default CSS and RTL CSS:
 
-{{< highlight css >}}
+```css
 /* bootstrap.css */
 dt {
   font-weight: 700 /* rtl:600 */;
@@ -99,7 +105,7 @@ dt {
 dt {
   font-weight: 600;
 }
-{{< /highlight >}}
+```
 
 ### Alternative font stack
 
@@ -107,7 +113,7 @@ In the case you're using a custom font, be aware that not all fonts support the
 
 For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue Arabic` for RTL, your Sass code look like this:
 
-{{< highlight scss >}}
+```scss
 $font-family-sans-serif:
   Helvetica Neue #{"/* rtl:insert:Arabic */"},
   // Safari for macOS and iOS (San Francisco)
@@ -126,7 +132,7 @@ $font-family-sans-serif:
   sans-serif,
   // Emoji fonts
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-{{< /highlight >}}
+```
 
 ## The breadcrumb case