Quick tip 4 - Column layout

At this point, this is what my (and, most likely, your) Cases Index page looks like:

This is nice, but in most applications we would to display the content on the index page in a more compact form. For this, we will be using a Bootstrap grid.

Three columns on large devices

Since Bootstrap's grid size is 12 columns and we want to display 3 items in a single row, the width of one item should be 4 Bootstrap columns.

Let's wrap our panel in a div with a size of 4 columns of content for large devices. Go into the app/views/cases/index.html.erb and wrap the <div class="panel panel-default"> </div> in a <div class="col-lg-4"> </div> set of tags.

This is what I got:

<div class="container">
<h1>Cases</h1>
<ul>
  <% Case.all.each do |c| %>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><%= c.title %></h3>
        </div>
        <div class="panel-body">
          <%= cl_image_tag(c.case_image.path, width: 500, class: 'img-responsive img-thumbnail') %>
          <p>
            <%= c.body %>
          </p>
        </div>
        <div class="panel-footer">
          <span class="label label-default"><%= "Created by: " + c.user.email %></span>
              <% if current_user == c.user %>
                <%= link_to(edit_case_path(c), class: 'btn btn-default btn-xs pull-right') do %>
                  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit
                <% end %>
                <%= link_to(case_path(c), method: :delete, class: 'btn btn-danger btn-xs pull-right') do %>
                  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                <% end %>
              <% end %>
        </div>
      </div>
    </div>
  <% end %>
</ul>
</div>

Two columns on tablets

If we resize the window to what would be the size of a tablet screen, we see that Bootstrap will snaps to a different layout:

We would like instead a column layout of two columns of content for medium-sized screen. Since we want two columns of content on a tablet and the size of a Bootstrap row is 12 columns, we'll want 6 columns for each of our cases. Let's edit the line:

<div class="col-lg-4">

And set the column size to 6 for medium devices:

<div class="col-lg-4 col-md-6">

The result looks like this:

One column on phone screens

On extra small devices, we would like one single item to take the full width of the screen, so we will allow it to fill 12 columns. On small devices we will display two columns of content per row.

This is achieved by changing

<div class="col-lg-4 col-md-6">

to

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">