How can I change the direction of labels? - html

Question

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel-body" style="direction: rtl;">
<form class="form-horizontal" role="form" method="POST" action="#">
<input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="content" class="col-md-4 control-label">Content</label>
<div class="col-md-6">
<textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Send
</button>
</div>
</div>
</form>
</div>
If you run code snippet above in full size screen, you will see titles are in the left side, and inputs are in the right side (next to each other)
My website supports multi languages, also as you know, some languages are rtl direction. So I need to change the position of inputs and titles together. I mean I need to adjust inputs in the right side and titles in the left side (on the contrary of current structure) by adding some CSS code.
How can I do that?
Current UI:
Expected UI: (by using only CSS, not changing HTML)

Answer 1

In your case you can use the :lang() css selector with the rtl languages.
For example with arabic, you can use:
:lang(ar) .form-group label{
/* You can put here all the desired properties */
}
You can read more about it in CSS-Tricks's :lang() selector tutorial, but you have to pay attention to its browser compatibility.

Answer 2

You can use bootstrap-rtl to do the job for you.
Bootstrap RTL provides simple yet robust right-to-left capability for
Bootstrap 3, by employing new theming feature of it. Simply put its
CSS after bootstrap's original CSS, to the pages designed by Bootstrap
3. It works just like an extension on top of the original Bootstrap
You can either include it from your server or use a CDN. For a CDN example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css" />

Answer 3

Use pull-right class
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel-body" style="direction: rtl;">
<form class="form-horizontal" role="form" method="POST" action="#">
<input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
<div class="form-group">
<label for="name" class="col-md-2 control-label pull-right" style="text-align:left" >Name</label>
<div class="col-md-10">
<input id="name" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label pull-right " style="text-align:left">E-Mail Address</label>
<div class="col-md-10">
<input id="email" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="content" class="col-md-2 control-label pull-right " style="text-align:left">Content</label>
<div class="col-md-10">
<textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Send
</button>
</div>
</div>
</form>
</div>