bootstrap-select doesn't support RTL

[SamerX]

When using bootstrap-select with RTL websites it should render from right to left, RTL mainly is done using dir attribute on body, bootstrap select doesn't support RTL

[aagouda]

I am having the same issue with RTL I am using Bootstrap RTL support from here

https://github.com/morteza/bootstrap-rtl

The problem only with the button and cart, the text is always left and the cart right.

The problem I guess with this css:

.bootstrap-select.btn-group .btn .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: left; /* in RTL text-align: right; will fix it */
}
and for the cart, this css:
.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    top: 50%;
    right: 12px;  /* left: 12px; will fix it*/
    margin-top: -2px;
    vertical-align: middle;
}

I think you should restrict for using pull left and pull right classes of bootstarp.

Note for using bootstrap-rtl, the author refused to convert the pull-left and pull-right classes so you have to implement these yourself.
Just append these css classes to the end of bootstrap-rtl.css:

.pull-right {
    float: left !important;
}
.pull-left {
    float: right !important;
}
.text-right {
    text-align: left;
}
.text-left {
    text-align: right;
}

The fork with this modifications here:

https://github.com/mewsoft/bootstrap-rtl

[margani]

Thanks so much for this great answer.
For caret it's better this way:

.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    top: 50%;
    left: 12px;
    right:auto; /* this line should be added to override the default behavior */
    margin-top: -2px;
    vertical-align: middle;
}

Also for better style this should be added:

.bootstrap-select > .dropdown-toggle {
    padding-left: 25px;
    padding-right: 15px;
}

[ahmedam55]

thanks for the comment @margani
and thanks for the question @SamerX

[surenderpicnframes]

Thanks margani its really works

[yasharvc]

Hi, Try setting text-align:right in .filter-option class...

[mutazharara]

Hi,
Actually for better style this should be added:
.bootstrap-select.btn-group .dropdown-toggle .filter-option { text-align: right; }
.bootstrap-select>.dropdown-toggle { padding-left: 25px; padding-right: 12px; }
.bootstrap-select.btn-group .dropdown-toggle .caret { right: initial; left: 12px; }
.bootstrap-select.btn-group .dropdown-menu li a{ text-align: right; }
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{ margin-right: 0; margin-left: 34px; }
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark{ right: initial; left: 15px; }

[moharrum]

This worked for me:

.bootstrap-select.btn-group .btn .filter-option {
    display: inline-block !important;
    overflow: hidden !important;
    width: 100% !important;
    text-align: right !important; 
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    float: right;
}

[Farshadi73]

If you have problem with dropdown-toggle direction, try this, work for me

.dropdown-toggle::after {
  float: left;
  margin-top: 0.6em;
  vertical-align: 0.1em;
}

[iyadthayyil]

This worked for me with Bootstrap 4 and https://github.com/morteza/bootstrap-rtl

/*Bootstrap select RTL fix*/
.dropdown-toggle::after {
    float: left;
    margin-top: 0.6em;
    vertical-align: 0.1em;
}
.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right!important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner {
    padding-right: 0!important;
}

[mbsaberi]

.bootstrap-select .dropdown-toggle .caret {
    right: auto !important;
    left: 12px !important;
}

.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right !important;
    padding-right: 5px !important;
}

[meisamdev]

.bootstrap-select.form-control {
margin-right: 10px;
}

.bootstrap-select .dropdown-menu.inner {
text-align: right !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
text-align: right !important;
padding-left: 25px !important;
padding-right: 15px !important;
}

I'm using this.

[mohamadRaafatKamel]

this work with me

/Bootstrap select RTL fix/
.dropdown-toggle::after {
float: left;
margin-top: 0.6em;
vertical-align: 0.1em;
}
.bootstrap-select .dropdown-toggle .filter-option {
text-align: right!important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner {
padding-right: 0!important;
}
/* for menu */
.bootstrap-select .dropdown-menu .inner .dropdown-menu {
text-align: right!important;
}