Question

I am using bootstrap on my application and having a hard-time to vertically align some items using bootstrap. It consist of one bootstrap row and 3 span4 with a search bar, a title and navigation links.

This is the skeleton:

<div class="row">
  <div class="span4">
   form code, as generated by rails form_for
  <div class="span4">
    Page title
  <div class="span4">
    pagination links, as generated by rails will_paginate

This is the rails code:

<div class="row">
  <div class="span4">
    <%= form_tag mybooks_path, class: "form-search", :method => 'get', :id => "mybooks_search" do %>
    <div class="input-append">
  <%= text_field_tag :search, params[:search], class: "search-query"  %>
  <%= submit_tag "Search", :name => nil, class: "btn" %>
</div>
<% end %>
  </div>
  <div class="span4">
    <h2>My book library</h2>
  </div>    
  <div class="span4">
    <%= will_paginate @mybooks, class: "pagination pagination-right" %>
  </div>
</div>

And here is the JSFiddle:

http://jsfiddle.net/V7CVE/2/

I am using the standard uncustomized bootstrap 2, and I need the search-box, the page title and the pagination links to be vertically aligned to each other.

Answer 1

I’m not familiar with ruby syntax, but conceptually this should not make a difference. The reason they are not aligned is that bootstrap has its own default css for different elements. You just need to fine tune each element by overriding these bootstrap styles.
apply the following styles:

.form-search {
    margin: 15px 0 0 0;
}

.pagination {
    margin: 15px 0;
}