Bootstrap rtl (right to left) input groups

Question

I'm developing a page in an rtl language and Bootstrap's input-group looks like this:

Obviously the border-radius is on the wrong side and I can fix it with CSS but I'm wondering if Bootstrap has a native way to deal with it.

Here is my code:

<div class="input-group" lang="fa" dir="rtl">
            <input type="text"
                   lang="fa" dir="rtl"
                   class="form-control"/>
            <span class="input-group-btn">
                <button ng-click="editor.removeQuestion(question)"
                        title="Remove question"
                        class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </span>
</div>

Answer 1

You have all the components there, just in the wrong order :)

You want your span to come before your input element if you want it on the left side of the input. Also, you don't need the dir="rtl" attribute on the input-group element (the outer div), only on the input element itself.

So you would just need to change your code to the following:

<div class="input-group">
    <span class="input-group-btn">
        <button ng-click="editor.removeQuestion(question)"
                title="Remove question"
                class="btn btn-danger">
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </span>
    <input type="text" lang="fa" dir="rtl" class="form-control"/>
</div>

Answer 2

here is a working solution :

 .input-group {
   direction:rtl !important;
}

.input-group-btn:last-child >.btn {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;
   border-right-width:0px !important;
   border-left-width:1px !important;

}

.input-group .form-control:first-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;

 }

Answer 3

Another working solution that did work for me, but this one is for Bootstrap 4. And there's no need to change any css.

<div class="input-group w-100" dir="ltr">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" style="background-color: #fff;">
                <i class="fa fa-search"></i>
              </button>
            </div>
            <input type="text" class="form-control border-dark" placeholder="گەڕان" />

          </div>