How to display Bootstrap button group in RTL pages?

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

I am trying to use the Bootstrap button group on an right to left (RTL) page.

However, the buttons are flipped. The curved edges are not in the outer edges of the group, but next to the middle button.

I am using the code referenced here: Buttons Group. Basic Example.

the result is this:

I added an inline style to the main div tag in the bootstrap code, but it did not change anything:

<div class="btn-group btn-group-justified" style="direction:rtl;" role="group" aria-label="...">

So my question is: how to style the buttons in a way that shows correctly on RTL pages?

Thanks in advance.

EDIT:

It seems that all Bootstrap buttons have problem with RTL for me. I tried a different type :Split button dropdowns using the code in this page and this is the result:

Although it is showing like this in the Bootstrap Documentation:

I tried adding direction:rtl, but again, it did not make any difference.

Answer 1

I had this problem. I changed three bootstrap classes; first:

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left; // => right
}

second:

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0; //change right to left
          border-bottom-right-radius: 0; //change right to left
}

and last:

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0; // change left to right
  border-bottom-left-radius: 0; // change left to right
}