set right to left radio button in bootstrap

Question

I am using Farsi language which is a right to left. I have couples of problems with this feature in Bootstrap (version 3.3.6). For example in radio button I want that the radio put in the right of the associated label.

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
    <h4><font face="B Nazanin">
    <label class="radio-inline">
      <input type="radio" name="optradio">
        گزینه اول
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">
        گزینه دوم
    </label>
   </font></h4>
  </form>
</div>

I have tried many option like direction:"rtl", text-align, text-right, pull-right, etc. but they did not work. Also, I want to put whole of the form at the middle.

Answer 1

You simply broke your Markup, place your labels before the inputs and the radio inputs will naturally appear on the right side of their associated label.

Your Markup will look like this:

<div class="row container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form role="form">
    <h4><font face="B Nazanin">
    <label for="id1" class="radio-inline">
    گزینه دوم   
    </label> 
    <input type="radio" name="optradio" id="id1"> 
    <label for="id2" class="radio-inline">
    گزینه اول     
    </label> 
    <input type="radio" name="optradio" id="id2"> 
   </font></h4>
  </form>
</div>

And here's the Bootply.

EDIT:

You mentioned in your last line that youd'd like the whole thing to be centered.

There's three options for that:

Center your content by only using .container

Center your text with text-align:center;

Center your content by using Bootstrap's grid system