How can I change bootstrap form direction, text right textbox left?

Question

example of it at this link

 <form class="form-horizontal" role="form" action="#"> <div class="form-group"> <label class="col-sm-2 control-label">עיר</label> <div class="col-sm-10"> <input class="form-control" id="Text5" type="text"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">רחוב</label> <div class="col-sm-3"> <input class="form-control" id="Text6" type="text" /> </div> <label class="col-sm-2 control-label">מס'</label> <div class="col-sm-5"> <input class="form-control" type="text" /> </div> </div>

I want to change direction to be: right to left. text- right, textbox- left

Answer 1

just create a file call it bootstrap-ext-rtl.css || bootstrap-ext-rtl.module.css that contains:

.rtl { direction: rtl}
.ltr { direction: ltr}
.bidi-rtl{ direction: rtl; unicode-bidi: bidi-override }
/* with/without text-align or whatever you want :P */

Answer 2

您可以使用text-right类。

Answer 3

You can use direction: rtl; on your forms child elements

 .form-horizontal * { direction: rtl; }

 <form class="form-horizontal" role="form" action="#"> <div class="form-group"> <label class="col-sm-2 control-label">עיר</label> <div class="col-sm-10"> <input class="form-control" id="Text5" type="text"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">רחוב</label> <div class="col-sm-3"> <input class="form-control" id="Text6" type="text" /> </div> <label class="col-sm-2 control-label">מס'</label> <div class="col-sm-5"> <input class="form-control" type="text" /> </div> </div>