I know that RTL support will come later - from @cvrebert's comment:
There isn't one, but don't worry, given the number of times folks have asked for RTL, we won't soon forget about it. But we're not going to delay v4.0.0 for this. RTL will probably land in a later minor release (e.g. v4.2.0).
However, I had an task to make bootstrap RTL and had some issue with input groups - I just added dir="rtl" to the parent element and the result is:
Where you can see that the styles are messed up.
So, I've created a fix - it's not something special but it does the work. The CSS snippet:
[dir="rtl"] .input-group-addon:not(:last-child){
border-right: 1px solid rgba(0,0,0,.15);
border-left: 0;
}
[dir="rtl"] .input-group .form-control:not(:last-child),
[dir="rtl"] .input-group-addon:not(:last-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group-btn:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child),
[dir="rtl"] .input-group-addon:not(:first-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.dropdown-toggle,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn:not(:first-child){
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .25rem;
border-top-left-radius: .25rem;
}
[dir="rtl"] .form-control + .input-group-addon:not(:first-child){
border-left: 1px solid rgba(0,0,0,.15);
border-right: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child):not(:last-child),
[dir="rtl"] .input-group .input-group-addon:not(:first-child):not(:last-child){
border-radius: 0;
}
Preview:
Here's the full JSBin
Hope that it'll help someone with the same issue.
P.S. Love the new bootstrap - flexbox rules :) cheers
I know that RTL support will come later - from @cvrebert's comment:
However, I had an task to make bootstrap RTL and had some issue with
input groups- I just addeddir="rtl"to the parent element and the result is:Where you can see that the styles are messed up.
So, I've created a fix - it's not something special but it does the work. The CSS snippet:
Preview:
Here's the full JSBin
Hope that it'll help someone with the same issue.
P.S. Love the new bootstrap - flexbox rules :) cheers