diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index 27150d294f42..90e6483336a2 100644
--- a/docs/4.0/components/dropdowns.md
+++ b/docs/4.0/components/dropdowns.md
@@ -489,29 +489,30 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
     </div>
   </div>
 
-  <div class="btn-group dropleft">
+  <div class="btn-group">
+    <div class="btn-group dropleft" role="group">
+      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="sr-only">Toggle Dropleft</span>
+      </button>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
+    </div>
     <button type="button" class="btn btn-secondary">
       Split dropleft
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="sr-only">Toggle Dropleft</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
   </div>
 </div>
 
 {% highlight html %}
 <!-- Default dropleft button -->
 <div class="btn-group dropleft">
-  <button type="button" class="btn btn-secondary">Dropleft</button>
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="sr-only">Toggle Dropleft</span>
+    Dropleft
   </button>
   <div class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -519,19 +520,22 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
 </div>
 
 <!-- Split dropleft button -->
-<div class="btn-group dropleft">
+<div class="btn-group">
+  <div class="btn-group dropleft" role="group">
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="sr-only">Toggle Dropleft</span>
+    </button>
+    <div class="dropdown-menu">
+      <!-- Dropdown menu links -->
+    </div>
+  </div>
   <button type="button" class="btn btn-secondary">
     Split dropleft
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="sr-only">Toggle Dropleft</span>
-  </button>
-  <div class="dropdown-menu">
-    <!-- Dropdown menu links -->
-  </div>
 </div>
 {% endhighlight %}
 
+
 ## Menu items
 
 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index cc8b07207942..4b14454a4a00 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -66,7 +66,7 @@
 
   .dropdown-toggle {
     @include caret(left);
-    &::after {
+    &::before {
       vertical-align: 0;
     }
   }
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index ec47b7766aca..10e1f66fec68 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -26,20 +26,32 @@
 
 @mixin caret($direction: down) {
   @if $enable-caret {
-    &::after {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-left: $caret-width * .85;
-      vertical-align: $caret-width * .85;
-      content: "";
-      @if $direction == down {
-        @include caret-down;
-      } @else if $direction == up {
-        @include caret-up;
-      } @else if $direction == right {
-        @include caret-right;
-      } @else if $direction == left {
+    @if $direction != left {
+      &::after {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-left: $caret-width * .85;
+        vertical-align: $caret-width * .85;
+        content: "";
+        @if $direction == down {
+          @include caret-down;
+        } @else if $direction == up {
+          @include caret-up;
+        } @else if $direction == right {
+          @include caret-right;
+        }
+      }
+    }
+
+    @if $direction == left {
+      &::before {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-right: $caret-width * .85;
+        vertical-align: $caret-width * .85;
+        content: "";
         @include caret-left;
       }
     }