is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .dropleft

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Preview

Action Another action

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _button-group.scss:85 */
.dropleft &::before {
  margin-right: 0;
}

/* _dropdown.scss:5 */
.dropleft {
  position: relative;
}

/* _dropdown.scss:73 */
.dropleft {
  .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(left);
    &::before {
      vertical-align: 0;
    }
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _button-group.scss:85 */


/* _dropdown.scss:5 */


/* _dropdown.scss:73 */
$dropdown-spacer

More in Bootstrap Dropdowns

Bootstrap 4 & 5