title: Twitter-Bootstrap and Forms in Rails
body: <p>This may be a beginners question but not having much luck getting this going.  The background:</p>
  
  <ol>
  <li>Rails 3.0.x version </li>
  <li>Bootstrap 2.0 - using as pre-compiled simply placed into public/stylesheets.
  Att</li>
  <li>Attempting to do a form with horizontal layout, i.e. label next to the input field on the same line.</li>
  </ol>
  
  <p>The issue is that I can't get the form to work, but can get the default Bootstrap sample code, in the same form to layout correctly.  The Rails form looks like:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span4 well"&gt;
      &lt;%= form_for @member, :html =&gt; {:class =&gt; "form-horizontal"} do |m| %&gt;
          &lt;fieldset&gt;
  
            &lt;%= m.label :title  %&gt;
            &lt;%= m.text_field :title %&gt;   
  
            &lt;%= m.label :first_name %&gt;
            &lt;%= m.text_field :first_name %&gt;
      &lt;% end %&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Notice that the <strong>form_for</strong> method has the class of <em>form-horizontal</em> as described by in <a href="http://twitter.github.com/bootstrap/base-css.html#forms">Bootsrap form CSS</a></p>
  
  <p>When displayed the label, for example title, is on one line left adjusted and then on the next line is the input field, also left adjusted.</p>
  
  <p>Now if I include some of the sample Bootstrap code for forms such as:</p>
  
  <pre><code>&lt;div&gt;
    &lt;form class="form-horizontal"&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Legend text&lt;/legend&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
  
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-xlarge" id="input01"&gt;
  
            &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I get the expected outcome -- label and input field on the same line in horizontal layout.</p>
  
  <p>I've tried adding the style "control-label" onto the m.label and m.text_field components but no joy in getting the layout as horizontal.</p>
  
  <p>Thus, not sure what the issue is, since the working part validates that I can get Bootstrap to work, although with my Rails Form it's not honouring the form-horizontal.</p>