diff --git a/src/_accordions.scss b/src/_accordions.scss
index 4c6968605..717e93d10 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -3,8 +3,12 @@
   input:checked ~,
   &[open] {
     & .accordion-header {
-      .icon {
-        transform: rotate(90deg);
+      .icon {        
+        @if $rtl == true {
+          transform: rotate(-90deg);
+        } @else {
+          transform: rotate(90deg);
+        }
       }
     }
 
diff --git a/src/_badges.scss b/src/_badges.scss
index d67f6d19a..965e97b72 100644
--- a/src/_badges.scss
+++ b/src/_badges.scss
@@ -42,8 +42,14 @@
     &::after {
       position: absolute;
       top: 0;
-      right: 0;
-      transform: translate(50%, -50%);
+      
+      @if $rtl == true {
+        left: 0;
+        transform: translate(-50%, -50%);
+      } @else {
+        right: 0;
+        transform: translate(50%, -50%);
+      }
     }
   }
 
diff --git a/src/_bars.scss b/src/_bars.scss
index 47e21c9a6..6ba9d3f3b 100644
--- a/src/_bars.scss
+++ b/src/_bars.scss
@@ -25,13 +25,27 @@
     width: 0;
 
     &:first-child {
-      border-bottom-left-radius: $border-radius;
-      border-top-left-radius: $border-radius;
+      
+      @if $rtl == true {
+        border-bottom-right-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      } @else {
+        border-bottom-left-radius: $border-radius;
+        border-top-left-radius: $border-radius;
+      }
+      
     }
     &:last-child {
-      border-bottom-right-radius: $border-radius;
-      border-top-right-radius: $border-radius;
       flex-shrink: 1;
+
+      @if $rtl == true {
+        border-bottom-left-radius: $border-radius;
+        border-top-left-radius: $border-radius;
+      } @else {
+        border-bottom-right-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+
     }
   }
 }
diff --git a/src/_breadcrumbs.scss b/src/_breadcrumbs.scss
index f2c9185a0..44590b8eb 100644
--- a/src/_breadcrumbs.scss
+++ b/src/_breadcrumbs.scss
@@ -22,7 +22,11 @@
       &::before {
         color: $gray-color-light;
         content: "/";
-        padding-right: $unit-2;
+        @if $rtl == true {
+          padding-left: $unit-2;
+        } @else {
+          padding-right: $unit-2;
+        }
       }
     }
   }
diff --git a/src/_buttons.scss b/src/_buttons.scss
index 7de387a81..006695fa3 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -136,13 +136,19 @@
     color: currentColor;
     height: $unit-4;
     line-height: $unit-4;
-    margin-left: $unit-1;
-    margin-right: -2px;
     opacity: 1;
     padding: 0;
     text-decoration: none;
     width: $unit-4;
 
+    @if $rtl == true {
+      margin-right: $unit-1;
+      margin-left: -2px;
+    } @else {
+      margin-left: $unit-1;
+      margin-right: -2px;
+    }
+
     &:hover {
       opacity: .95;
     }
@@ -161,17 +167,37 @@
   .btn {
     flex: 1 0 auto;
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      
+      @if $rtl == true {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      } @else {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -$border-width;
+      
+      @if $rtl == true {
+        margin-right: -$border-width;
+      } @else {
+        margin-left: -$border-width;
+      }
     }
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      margin-left: -$border-width;
+      
+      @if $rtl == true {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        margin-right: -$border-width;
+      } @else {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin-left: -$border-width;
+      }
+
     }
     &:focus,
     &:hover,
diff --git a/src/_calendars.scss b/src/_calendars.scss
index ff001451c..0269bc2ea 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -131,13 +131,21 @@
       transform: translateY(-50%);
     }
     &.range-start {
-      &::before {
-        left: 50%;
+      &::before {        
+        @if $rtl == true {
+          right: 50%;
+        } @else {
+          left: 50%;
+        }
       }
     }
     &.range-end {
       &::before {
-        right: 50%;
+        @if $rtl == true {
+          left: 50%;
+        } @else {
+          right: 50%;
+        }
       }
     }
 
@@ -189,14 +197,24 @@
         top: 19px;
       }
       &.range-start {
-        &::before {
-          left: auto;
+        &::before {          
           width: 19px;
+
+          @if $rtl == true {
+            right: auto;
+          } @else {
+            left: auto;
+          }
+
         }
       }
       &.range-end {
-        &::before {
-          right: 19px;
+        &::before {          
+          @if $rtl == true {
+            left: 19px;
+          } @else {
+            right: 19px;
+          }
         }
       }
     }
diff --git a/src/_chips.scss b/src/_chips.scss
index 1763567c0..4689e774a 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -20,8 +20,13 @@
   }
 
   .avatar {
-    margin-left: -$unit-2;
-    margin-right: $unit-1;
+    @if $rtl == true {
+      margin-right: -$unit-2;
+      margin-left: $unit-1;
+    } @else {
+      margin-left: -$unit-2;
+      margin-right: $unit-1;
+    }
   }
 
   .btn-clear {
diff --git a/src/_codes.scss b/src/_codes.scss
index 817452bde..5e13342e3 100644
--- a/src/_codes.scss
+++ b/src/_codes.scss
@@ -10,6 +10,10 @@ code {
   color: $body-font-color;
   position: relative;
 
+  @if $rtl == true {
+    direction: ltr;
+  }
+
   &::before {
     color: $gray-color;
     content: attr(data-lang);
diff --git a/src/_comparison-sliders.scss b/src/_comparison-sliders.scss
index 72bb25f82..2cfada799 100644
--- a/src/_comparison-sliders.scss
+++ b/src/_comparison-sliders.scss
@@ -7,6 +7,10 @@
   width: 100%;
   -webkit-overflow-scrolling: touch;
 
+  @if $rtl == true {
+    direction: ltr;
+  }
+
   .comparison-before,
   .comparison-after {
     height: 100%;
diff --git a/src/_forms.scss b/src/_forms.scss
index 8b53df9f3..612bab5fe 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -122,14 +122,21 @@ textarea.form-input {
   &[size],
   &[multiple] {
     height: auto;
-    
+
     option {
       padding: $unit-h $unit-1;
     }
   }
   &:not([multiple]):not([size]) {
-    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
-    padding-right: $control-icon-size + $control-padding-x;
+
+    @if $rtl == true {
+      background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat left .35rem center/.4rem .5rem;
+      padding-left: $control-icon-size + $control-padding-x;
+    } @else {
+      background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+      padding-right: $control-icon-size + $control-padding-x;
+    }
+
   }
   &:focus {
     @include control-shadow();
@@ -197,9 +204,14 @@ textarea.form-input {
   line-height: $line-height;
   margin: ($control-size - $control-size-sm) / 2 0;
   min-height: 1.2rem;
-  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 
+  @if $rtl == true {
+    padding: (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x) (($control-size-sm - $line-height) / 2) $control-padding-x;
+  } @else {
+    padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+  }
+
   input {
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -242,9 +254,14 @@ textarea.form-input {
   .form-icon {
     background: $bg-color-light;
     height: $control-icon-size;
-    left: 0;
     top: ($control-size-sm - $control-icon-size) / 2;
     width: $control-icon-size;
+
+    @if $rtl == true {
+      right: 0;
+    } @else {
+      left: 0;
+    }
   }
 
   input {
@@ -317,14 +334,17 @@ textarea.form-input {
 
 // Form element: Switch
 .form-switch {
-  padding-left: ($unit-8 + $control-padding-x);
+  @if $rtl == true {
+    padding-right: ($unit-8 + $control-padding-x);
+  } @else {
+    padding-left: ($unit-8 + $control-padding-x);
+  }
 
   .form-icon {
     background: $gray-color-light;
     background-clip: padding-box;
     border-radius: $unit-2 + $border-width;
     height: $unit-4 + $border-width * 2;
-    left: 0;
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
@@ -339,6 +359,13 @@ textarea.form-input {
       top: 0;
       width: $unit-4;
     }
+
+    @if $rtl == true {
+      right: 0;
+    } @else {
+      left: 0;
+    }
+
   }
 
   input {
@@ -393,17 +420,38 @@ textarea.form-input {
   .input-group-addon,
   .input-group-btn {
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+
+      @if $rtl == true {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      } @else {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -$border-width;
+
+      @if $rtl == true {
+        margin-right: -$border-width;
+      } @else {
+        margin-left: -$border-width;
+      }
+
     }
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      margin-left: -$border-width;
+
+      @if $rtl == true {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        margin-right: -$border-width;
+      } @else {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin-left: -$border-width;
+      }
+
     }
     &:focus {
       z-index: $zindex-0 + 1;
@@ -447,7 +495,7 @@ textarea.form-input {
     .form-icon {
       border-color: $error-color;
     }
-    
+
     input {
       &:checked + .form-icon {
         background: $error-color;
diff --git a/src/_menus.scss b/src/_menus.scss
index 5bc5ef82c..d0842a710 100644
--- a/src/_menus.scss
+++ b/src/_menus.scss
@@ -52,9 +52,14 @@
   }
 
   .menu-badge {
-    float: right;
     padding: $unit-1 0;
 
+    @if $rtl == true {
+      float: left;
+    } @else {
+      float: right;
+    }
+
     .btn {
       margin-top: -$unit-h;
     }
diff --git a/src/_modals.scss b/src/_modals.scss
index a7b3f10ec..065ddf67a 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -82,6 +82,11 @@
 
   .modal-footer {
     padding: $unit-4;
-    text-align: right;
+
+    @if $rtl == true {
+      text-align: left;
+    } @else {
+      text-align: right;
+    }
   }
 }
diff --git a/src/_navs.scss b/src/_navs.scss
index 4bedc27b6..fd37089b9 100644
--- a/src/_navs.scss
+++ b/src/_navs.scss
@@ -29,6 +29,12 @@
 
   & .nav {
     margin-bottom: $unit-2;
-    margin-left: $unit-4;
+
+    @if $rtl == true {
+      margin-right: $unit-4;
+    } @else {
+      margin-left: $unit-4;
+    }
+
   }
 }
diff --git a/src/_pagination.scss b/src/_pagination.scss
index 6efc7baef..274dda8bc 100644
--- a/src/_pagination.scss
+++ b/src/_pagination.scss
@@ -46,7 +46,11 @@
     }
 
     &.page-next {
-      text-align: right;
+      @if $rtl == true {
+        text-align: left;
+      } @else {
+        text-align: right;
+      }
     }
 
     .page-item-title {
diff --git a/src/_steps.scss b/src/_steps.scss
index d5ddc6e40..682c7818e 100644
--- a/src/_steps.scss
+++ b/src/_steps.scss
@@ -17,10 +17,16 @@
       background: $primary-color;
       content: "";
       height: 2px;
-      left: -50%;
       position: absolute;
       top: 9px;
       width: 100%;
+
+      @if $rtl == true {
+        right: -50%;
+      } @else {
+        left: -50%;
+      }
+
     }
 
     a {
diff --git a/src/_tabs.scss b/src/_tabs.scss
index 0dcbaf37a..a4f6afd22 100644
--- a/src/_tabs.scss
+++ b/src/_tabs.scss
@@ -30,7 +30,13 @@
 
     &.tab-action {
       flex: 1 0 auto;
-      text-align: right;
+
+      @if $rtl == true {
+        text-align: left;
+      } @else {
+        text-align: right;
+      }
+
     }
 
     .btn-clear {
@@ -50,9 +56,15 @@
       .badge {
         &[data-badge]::after {
           position: absolute;
-          right: $unit-h;
           top: $unit-h;
           transform: translate(0, 0);
+
+          @if $rtl == true {
+            left: $unit-h;
+          } @else {
+            right: $unit-h;
+          }
+
         }
       }
     }
diff --git a/src/_tiles.scss b/src/_tiles.scss
index 742bbaeb5..bf5491438 100644
--- a/src/_tiles.scss
+++ b/src/_tiles.scss
@@ -11,10 +11,22 @@
   .tile-content {
     flex: 1 1 auto;
     &:not(:first-child) {
-      padding-left: $unit-2;
+
+      @if $rtl == true {
+        padding-right: $unit-2;
+      } @else {
+        padding-left: $unit-2;
+      }
+
     }
     &:not(:last-child) {
-      padding-right: $unit-2;
+
+      @if $rtl == true {
+        padding-left: $unit-2;
+      } @else {
+        padding-right: $unit-2;
+      }
+
     }
   }
   .tile-title,
diff --git a/src/_timelines.scss b/src/_timelines.scss
index 67041a85e..3736a2bfb 100644
--- a/src/_timelines.scss
+++ b/src/_timelines.scss
@@ -8,10 +8,16 @@
       background: $border-color;
       content: "";
       height: 100%;
-      left: 11px;
       position: absolute;
       top: $unit-6;
       width: 2px;
+
+      @if $rtl == true {
+        right: 11px;
+      } @else {
+        left: 11px;
+      }
+
     }
 
     .timeline-left {
@@ -20,7 +26,13 @@
 
     .timeline-content {
       flex: 1 1 auto;
-      padding: 2px 0 2px $layout-spacing-lg;
+
+      @if $rtl == true {
+        padding: 2px $layout-spacing-lg 2px 0;
+      } @else {
+        padding: 2px 0 2px $layout-spacing-lg;
+      }
+
     }
 
     .timeline-icon {
diff --git a/src/_toasts.scss b/src/_toasts.scss
index 61e7c5f5a..74b652bec 100644
--- a/src/_toasts.scss
+++ b/src/_toasts.scss
@@ -37,6 +37,6 @@
   }
 
   .btn-clear {
-    margin: 4px -2px 4px 4px;
+    margin: 4px 4px 4px -2px;
   }
 }
diff --git a/src/_typography.scss b/src/_typography.scss
index d15d39e84..5c2a7f2af 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -77,10 +77,16 @@ mark {
 
 // Blockquote
 blockquote {
-  border-left: $border-width-lg solid $border-color;
-  margin-left: 0;
   padding: $unit-2 $unit-4;
 
+  @if $rtl == true {
+    border-right: $border-width-lg solid $border-color;
+    margin-right: 0;
+  } @else {
+    border-left: $border-width-lg solid $border-color;
+    margin-left: 0;
+  }
+
   p:last-child {
     margin-bottom: 0;
   }
@@ -89,12 +95,21 @@ blockquote {
 // Lists
 ul,
 ol {
-  margin: $unit-4 0 $unit-4 $unit-4;
   padding: 0;
 
+  @if $rtl == true {
+    margin: $unit-4 $unit-4 $unit-4 0;
+  } @else {
+    margin: $unit-4 0 $unit-4 $unit-4;
+  }
+
   ul,
   ol {
-    margin: $unit-4 0 $unit-4 $unit-4;
+    @if $rtl == true {
+      margin: $unit-4 $unit-4 $unit-4 0;
+    } @else {
+      margin: $unit-4 0 $unit-4 $unit-4;
+    }
   }
 
   li {