title: center horizontal-form twitter bootstrap
body: <p>I have tried everything I can possibly think of, and looked at every bit of documentation/tutorials/github readmes. </p>
  
  <p>I am building a simple rails app that is using simple form and twitter bootstrap. </p>
  
  <p>I would like my form to be in the center of the page and I can get the fields to move to the center by adding this in my bootstrap css file:</p>
  
  <pre><code>body {
      text-align: center;
  }
  </code></pre>
  
  <p>Which results in:</p>
  
  <p><img src="https://i.imgur.com/e3doP.png" alt="Imgur"></p>
  
  <p>No matter what I do, I cannot get the labels "<code>control-label</code>"s to align to center. I have tried using an <code>id</code> among many other things.</p>
  
  <p>Here is the code for my form:</p>
  
  <pre><code>    &lt;%= simple_form_for @message, :html =&gt; { :class =&gt; 'form-horizontal' } do |f| %&gt;
  
          &lt;%= f.input :phone, :input_html =&gt; { :maxlength =&gt; 10 }, :label_html =&gt; { :class =&gt; 'control-label' } %&gt;
         &lt;%= f.input :message %&gt;
  
         &lt;div class="form-actions" id="sendbtn"&gt;
              &lt;%= f.button :submit, :class =&gt; 'btn-primary' %&gt;
         &lt;/div&gt;
  
      &lt;% end %&gt;
  </code></pre>
  
  <p>and the generated html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="page-header"&gt;
          &lt;h1 id="pagetitle"&gt;New Message&lt;/h1&gt;
      &lt;/div&gt;
      &lt;form id="new_message" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/messages" accept-charset="UTF-8"&gt;
          &lt;div style="margin:0;padding:0;display:inline"&gt;
          &lt;div class="control-group tel optional"&gt;
              &lt;label class="tel optional control-label control-label" for="message_phone"&gt;Phone&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input id="message_phone" class="string tel optional" type="tel" size="50" name="message[phone]" maxlength="10"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group text optional"&gt;
              &lt;label class="text optional control-label" for="message_message"&gt;Message&lt;/label&gt;
          &lt;div class="controls"&gt;
                  &lt;textarea id="message_message" class="text optional" rows="20" name="message[message]" cols="40"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="sendbtn" class="form-actions"&gt;
              &lt;input class="btn btn-primary" type="submit" value="Create Message" name="commit"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please can anyone offer some support here?</p>