Unable to display inline forms with bootstrap CSS

Question

I just started using bootstrap CSS with a setting form I am designing.

The form has 3 top level settings, radio1 (y or n), TopSettings (which has 3 sub-settings: Enable, textbox1, textbox2) and mediaDir (textbox). I am trying to align these 3 top level labels on the left, and align the 3 sub-settings of TopSettings on the right.

Before bootstrap, I was able to achieve these using hard-coded html tables.

(In the image: Top - the look I wanted, and achieved with hard-coded tables in html. Bottom - what from looks like with bootstrap)

<form name="serverSetting">
    <fieldset> <legend> <b>Settings</b> </legend>
        <div> 
          <table class="code">        
            <tr> 
            <td class="padded"> radio1= </td>
            <td class="padded"> <input type="radio" name="radio1" value="Y">y
                <input type="radio" name="radio1" value="N">n  </td>
            </tr>

            <tr> 
            <td class="padded"> TopSettings=</td>
            <td class="padded">
                <table class="code"  cellspacing = "0" cellpadding = "0">
                <tr>
                <td>Enabled= </td>
                <td> <input type="radio" name="Enabled" value="Y">y
                <input type="radio" name="Enabled" value="N">n ; </td>
                </tr>

                <tr>
                <td>texbox1=</td> 
                <td><input type="number" name="textbox1" value=40>;</td>
                </tr>

                <tr><td>textbox2=</td>
                <td><input type="number" name="textbox2" value=640>;</td>
                </tr>
                </table>  
            </td>
            </tr>

            <tr>
            <td class="padded">mediaDir= </td>
            <td class="padded"><input type="text" name="mediaDir" value="/data/media">;</td>
            </tr>
          </table>
          </div>
          </fieldset>

    </form> 

However when I switched to Bootstrap, the inline property of the 3 sub-settings has lost. I did add "inline" class with div and the Enable radio is displayed inline, but textbox1 and textbox2 are not.

   <form class="form-horizontal" name="serverSetting">
      <fieldset> <legend> <b>Settings</b> </legend>
        <div class="control-group code">
          <label class="control-label code" for="xcode">radio1=</label>
          <div class="controls">
            <input type="radio" name="radio1" value="Y">y
            <input type="radio" name="radio1" value="N">n
          </div>
        </div>

        <div class="control-group code">
          <label class="control-label code" for="TopSettings">TopSettings=</label>

          <div class="controls form-inline">
            <label class="inline" for="TopSettings">Enabled= </label> 
            <input class="code" type="radio" name="Enabled" value="Y">y
            <input class="code" type="radio" name="Enabled" value="N">n
          </div>

          <div class="controls form-inline">
            <label>textbox1e=</label>
            <input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40>
          </div>

          <div class="controls form-inline">
            <label for="textbox2">textbox2=</label>
            <input type="number" name="textbox2" placeholder=640>
          </div>
        </div>

        <div class="control-group code">
          <label class="control-label code" for="mediaDir">mediaDir=</label>
          <div class="controls">
            <input type="number" name="mediaDir" placeholder="/data/meida/">
          </div>
        </div>

       </fieldset>
    </form> 

I was opening the html in Firefox. (I also tried to chrome, it was displayed inline but not align.) Does anyone know how to achieve the display as the above picture?

EDIT: my css file:

div{
max-width:550px;
}
.code {
font-family: "Courier New", Courier, monospace;
}   


input{
}
.code {
font-family: "Courier New", Courier, monospace;
}


label.code {
font-family: "Courier New", Courier, monospace;
}

Answer 1

Here is a working version of your code on fiddle.

What was causing the problem:

When using Bootstrap horizontal forms always remember that the structure should be as follows:

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
             <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
</form>

So in your case you should nest the "sub-settings" in a single div class="controls": the one after the "TopSettings=" label block. This is logical as all of the "sub-settings" form one nested block that is the control corresponding to the label "TopSettings=".

Then, there is no need to use form-inline: notice that the nested block (the "sub-settings" group) is nothing else than another nested instance of form-horizontal. Since the properties of form-horizontal are already inherited from the parent form, there is no need to repeat oneself. Instead, you should wrap each of the three "sub-settings" in a control-group div which in its turn will contain the label and the control.

Here is the revised code:

<div class="control-group code">
    <label class="control-label code">TopSettings=</label>

    <div class="controls">
        <div class="control-group code">
            <label class="control-label">Enabled= </label>
            <div class="controls">
                <input class="code" type="radio" name="Enabled" value="Y"/>y
                <input class="code" type="radio" name="Enabled" value="N"/>n
            </div>
        </div>

        <div class="control-group code">
            <label class="control-label">textbox1=</label>
            <div class="controls">
                <input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40 />
            </div>
        </div>

        <div class="control-group code">
            <label class="control-label">textbox2=</label>
            <div class="controls">
                <input type="number" name="textbox2" placeholder=640 />
            </div>
        </div>
    </div>
</div>

EDIT

To align the sub-controls you can add the following custom two classes to your css:

.form-horizontal .control-label.subcontrol-label{
    width: auto;
}

.form-horizontal .controls.subcontrols{
    margin-left: 80px;   
}

and use them accordingly with the sub-settings labels e.g.

<label class="control-label subcontrol-label">

and controls div e.g.

<div class="controls subcontrols">.

You can find the updated version of the demo here.