diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 84091d30..3dbbe3b7 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -431,6 +431,30 @@ The `where` and `value` values are used in the following query `where .Site.Regu
 
 <br/><br/><br/>
 
+## LTR/RTL 
+
+`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally.
+
+**Example:**
+
+```md
+- This is an markdown list.
+- Its per default a LTR direction
+{{% rtl %}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{% /rtl %}}
+```
+
+- This is an markdown list.
+- Its per default a LTR direction
+{{% rtl %}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{% /rtl %}}
+
+<br/><br/><br/>
+
 ## Mermaid
 
 `mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.
diff --git a/layouts/shortcodes/ltr.html b/layouts/shortcodes/ltr.html
index 40295160..d3c4a291 100644
--- a/layouts/shortcodes/ltr.html
+++ b/layouts/shortcodes/ltr.html
@@ -1,3 +1,3 @@
-<div dir="ltr" align="left">
+<div dir="ltr" class="text-left">
 {{ .Inner }}
 </div>
\ No newline at end of file
diff --git a/layouts/shortcodes/rtl.html b/layouts/shortcodes/rtl.html
index 51f9a69e..2947a9df 100644
--- a/layouts/shortcodes/rtl.html
+++ b/layouts/shortcodes/rtl.html
@@ -1,3 +1,3 @@
-<div dir="rtl" align="right">
+<div dir="rtl" class="text-right">
     {{ .Inner }}
 </div>
\ No newline at end of file