Title: aligning rails form_for button integrated with bootstrap
Tags: html;css;ruby-on-rails;twitter-bootstrap
Question: im not the elizabethrivers@example.com. Just following the tutorial and added a little flavor to my site. My Sign up page for the site:
How do I align the button to the middle? And is it possbile to shorten the length of the boxes?
Here is the code for my signup page
<% provide(:title, 'Sign up') %&gt;
<h1&gt;Sign up</h1&gt;
<div class="row"&gt;
<div class="span6 offset3"&gt;
<%= form_for(@user, :html =&gt; {:class =&gt; 'form-horizontal'})  do |f| %&gt;
<fieldset&gt;
<div class = "form-group"&gt;
<%= f.label :name, :class =&gt; "col-sm-2 control-label" %&gt;
<div class = "col-sm-10"&gt;
<%= f.text_field :name , :class =&gt; "form-control" %&gt;
</div&gt;
</div&gt;
<div class = "form-group"&gt;
<%= f.label :email, :class =&gt; "col-sm-2 control-label" %&gt;
<div class = "col-sm-10"&gt;
<%= f.text_field :email , :class =&gt; "form-control" %&gt;
</div&gt;
</div&gt;
<div class = "form-group"&gt;
<%= f.label :password, :class =&gt; "col-sm-2 control-label" %&gt;
<div class = "col-sm-10"&gt;
<%= f.password_field :password , :class =&gt; "form-control" %&gt;
</div&gt;
</div&gt;
<div class = "form-group"&gt;
<%= f.label :password_confirmation, :class =&gt; "col-sm-2 control-label" %&gt;
<div class = "col-sm-10"&gt;
<%= f.password_field :password_confirmation , :class =&gt; "form-control" %&gt;
</div&gt;
</div&gt;
<div class = "form-actions"&gt;
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %&gt;
</div&gt;
</fieldset&gt;
<% end %&gt;
</div&gt;
</div&gt;
Comment: is there CSS to go with this? Have you tried to text-align the submit button?

Here is the accepted answer: It seems you're using Bootstrap3 whereas the tutorial is Bootstrap2.
In Bootstrap3, span6 offset3 doesn't work.
Instead, it must be something like this:
<% provide(:title, 'Sign up') %&gt;
<h1&gt;Sign up</h1&gt;
<div class="row"&gt;
<div class="col-xs-12 col-sm-6 col-sm-offset-3"&gt;
Also, you'll get the nice Bootstrap3 large button by replacing btn-large with btn-lg.

Here is another answer: Try with this CSS
div.center, p.center, img.center {
display: block;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
In your HTML
<div class = "center form-actions"&gt;
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %&gt;
</div&gt;

Here is another answer: It's all easily done with CSS:
alignment of submit button:
div.form-actions { width: 100%; text-align: center;}
size of input fields:
.form-control { width: 150px; }
Comment for this answer: if i change the width, the form gets smaller which  is fine. but then it looks funny because the alignment is all off. How do i move the form- control more right so it looks more nice?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:12/27/13', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<html><css><ruby-on-rails><twitter-bootstrap>', 'Title': 'aligning rails form_for button integrated with bootstrap', 'ViewCount': 4085, 'id': 20797429, 'user_AboutMe': '<p>Self Learning Python, Ruby and PHP. </p>\n\n<p>Interests: to develop my abilities to make games on IOS and  Android platform</p>\n', 'user_AccountId': 1116270.0, 'user_DisplayName': 'Apprentice Programmer', 'user_Reputation': 1415.0, 'user_Views': 408.0, 'user_id': 1105521.0}}