title: Unable to display inline forms with bootstrap CSS
body: <p>I just started using bootstrap CSS with a setting form I am designing. </p>
  
  <p>The form has 3 top level settings, <strong>radio1</strong> (y or n), <strong>TopSettings</strong> (which has 3 sub-settings: <em>Enable</em>, <em>textbox1</em>, <em>textbox2</em>) and <strong>mediaDir</strong> (textbox). I am trying to align these 3 top level labels on the left, and align the 3 sub-settings of <strong>TopSettings</strong> on the right. </p>
  
  <p>Before bootstrap, I was able to achieve these using hard-coded html tables.</p>
  
  <p><img src="https://www.ics.uci.edu/~yuey6/forms.png" alt="-&gt; Please see image here &lt;-"></p>
  
  <p>(In the image: Top - the look I wanted, and achieved with hard-coded tables in html. Bottom - what from looks like with bootstrap)</p>
  
  <pre><code>&lt;form name="serverSetting"&gt;
      &lt;fieldset&gt; &lt;legend&gt; &lt;b&gt;Settings&lt;/b&gt; &lt;/legend&gt;
          &lt;div&gt; 
            &lt;table class="code"&gt;        
              &lt;tr&gt; 
              &lt;td class="padded"&gt; radio1= &lt;/td&gt;
              &lt;td class="padded"&gt; &lt;input type="radio" name="radio1" value="Y"&gt;y
                  &lt;input type="radio" name="radio1" value="N"&gt;n  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt; 
              &lt;td class="padded"&gt; TopSettings=&lt;/td&gt;
              &lt;td class="padded"&gt;
                  &lt;table class="code"  cellspacing = "0" cellpadding = "0"&gt;
                  &lt;tr&gt;
                  &lt;td&gt;Enabled= &lt;/td&gt;
                  &lt;td&gt; &lt;input type="radio" name="Enabled" value="Y"&gt;y
                  &lt;input type="radio" name="Enabled" value="N"&gt;n ; &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td&gt;texbox1=&lt;/td&gt; 
                  &lt;td&gt;&lt;input type="number" name="textbox1" value=40&gt;;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;&lt;td&gt;textbox2=&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" name="textbox2" value=640&gt;;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/table&gt;  
              &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
              &lt;td class="padded"&gt;mediaDir= &lt;/td&gt;
              &lt;td class="padded"&gt;&lt;input type="text" name="mediaDir" value="/data/media"&gt;;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/div&gt;
            &lt;/fieldset&gt;
  
      &lt;/form&gt; 
  </code></pre>
  
  <p>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 <em>Enable</em> radio is displayed inline, but <em>textbox1</em> and <em>textbox2</em> are not. </p>
  
  <pre><code>   &lt;form class="form-horizontal" name="serverSetting"&gt;
        &lt;fieldset&gt; &lt;legend&gt; &lt;b&gt;Settings&lt;/b&gt; &lt;/legend&gt;
          &lt;div class="control-group code"&gt;
            &lt;label class="control-label code" for="xcode"&gt;radio1=&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;input type="radio" name="radio1" value="Y"&gt;y
              &lt;input type="radio" name="radio1" value="N"&gt;n
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group code"&gt;
            &lt;label class="control-label code" for="TopSettings"&gt;TopSettings=&lt;/label&gt;
  
            &lt;div class="controls form-inline"&gt;
              &lt;label class="inline" for="TopSettings"&gt;Enabled= &lt;/label&gt; 
              &lt;input class="code" type="radio" name="Enabled" value="Y"&gt;y
              &lt;input class="code" type="radio" name="Enabled" value="N"&gt;n
            &lt;/div&gt;
  
            &lt;div class="controls form-inline"&gt;
              &lt;label&gt;textbox1e=&lt;/label&gt;
              &lt;input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40&gt;
            &lt;/div&gt;
  
            &lt;div class="controls form-inline"&gt;
              &lt;label for="textbox2"&gt;textbox2=&lt;/label&gt;
              &lt;input type="number" name="textbox2" placeholder=640&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group code"&gt;
            &lt;label class="control-label code" for="mediaDir"&gt;mediaDir=&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;input type="number" name="mediaDir" placeholder="/data/meida/"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
         &lt;/fieldset&gt;
      &lt;/form&gt; 
  </code></pre>
  
  <p>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?</p>
  
  <p>EDIT: my css file:</p>
  
  <pre><code>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;
  }
  </code></pre>