title: How to display Bootstrap button group in RTL pages?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="btn-group" role="group" aria-label="..."&gt;
    &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to use the Bootstrap button group on an right to left (RTL) page.</p>
  
  <p>However, the buttons are flipped. The curved edges are not in the outer edges of the group, but next to the middle button.</p>
  
  <p>I am using the code referenced here: <a href="https://getbootstrap.com/docs/3.3/components/#btn-groups-single" rel="nofollow noreferrer">Buttons Group. Basic Example.</a></p>
  
  <p>the result is this:
  <a href="https://i.stack.imgur.com/Y1LO6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y1LO6.png" alt="enter image description here"></a></p>
  
  <p>I added an inline style to the main div tag in the bootstrap code, but it did not change anything:</p>
  
  <pre><code>&lt;div class="btn-group btn-group-justified" style="direction:rtl;" role="group" aria-label="..."&gt;
  </code></pre>
  
  <p>So my question is: how to style the buttons in a way that shows correctly on RTL pages?</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>It seems that all Bootstrap buttons have problem with RTL for me.
  I tried a different type :Split button dropdowns using the code <a href="https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-split" rel="nofollow noreferrer">in this page</a>
  and this is the result:
  <a href="https://i.stack.imgur.com/BKsjn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKsjn.png" alt="enter image description here"></a></p>
  
  <p>Although it is showing like this in the Bootstrap Documentation:
  <a href="https://i.stack.imgur.com/tyF9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tyF9e.png" alt="enter image description here"></a></p>
  
  <p>I tried adding <code>direction:rtl</code>, but again, it did not make any difference.</p>