CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
vbsql7
vbsql7

Reputation: 714

Bootstrap col-sm-offset-2 does not align button in form

Why doesn't the col-sm-offset-2 line up button 'two' with the col-sm-2 labels above it in this form?

form section

I have a lame fix for it using the empty label (see button 'one'), but I want to understand how to use cleaner code and make this right so all my forms don't have the kludge label in them for buttons.

<form class="form-horizontal" role="form" action="/company/create" method="post">

  <div class="form-group">
     <%= label_tag(:name, 'Company name:', :class => 'control-label col-sm-2') %>
     <div class="col-sm-4">
        <%= text_field_tag(:name, @company.name, :class => 'form-control') %>
     </div>
  </div>

  <div class="form-group">
     <%= label_tag(:category, 'Category:', :class => 'control-label col-sm-2') %>
     <div class = 'col-sm-4'>
        <%= collection_select(nil, :category_id, Category.all, :id, :description, :include_blank => 'select') %>
     </div>
  </div>

  <div class="form-group">
    <%= label_tag(:x, '', :class => 'col-sm-2') %>
    <div class='col-sm-2'>
        <button type="submit" class="btn btn-primary">one</button>
    </div>
  </div>

  <div class="form-group">
     <button type="submit" class="btn btn-primary col-sm-offset-2">two</button>
  </div>
</form>

Upvotes: 2

Views: 7004

Answers (2)

Besa
Besa

Reputation: 515

Try this one: 

   <div class="form-group">
        <div  class="col-sm-offset-2">
         <button type="submit" class="btn btn-primary">two</button>
        </div>

      </div>

Upvotes: 0

stylesenberg
stylesenberg

Reputation: 519

Step 1: build a DIV around your button.
Step 2: give that DIV the class of "col-sm-2 col-sm-offset-2".
Step 3: place your BUTTON inside that DIV
Step 4: give me feedback if that solved your issue. 

<div class="form-group">
  <div class="col-sm-2 col-sm-offset-2">
   <button type="submit" class="btn btn-primary">two</button>
  </div>
</div>

Upvotes: 5

Related Questions