title: Styling thumbnails with bootstrap 3 and rails 4
body: <p>I'm building a rails 4 app, using bootstrap 3, and trying to create thumbnails on a subscription page that should look identical to: 
  <img src="https://i.stack.imgur.com/uWvz7.png" alt="enter image description here"></p>
  
  <p>Problem is that my coloring within the thumbnails is applying behind the actual thumbnail.  I'm also having issues getting the "3 projects, 3 pages..." details at the bottom of the thumbnail to center properly.  <img src="https://i.stack.imgur.com/W4dMY.png" alt="enter image description here"></p>
  
  <p>Any direction is much appreciated.</p>
  
  <p>My stylesheet:</p>
  
  <pre><code>ul.koudoku-pricing-table {
  
    position: relative;
    margin: 20px 0;
    margin-left: 25px;
    background-color: #f5f5f5;
    list-style-type: none;
  
  
    li.plan {
  
      text-align: center;
  
      background-color: #f5f5f5;
      margin-top: 17px;
  
      margin-left: 0;
  
      position: relative;
      z-index: 99;
  
      &amp;.plan-primary {
        background-color: #f9f9f9;
        margin-top: 0px;
  
        margin-left: -5px;
        margin-right: -5px;
  
        z-index: 100;
  
        h3 {
          font-size: 32.5px;
          line-height: 51px;
        }
        h4 {
          line-height: 22px;
        }
        a, input[type=submit] {
          font-size: 21.5px;
          line-height: 26px;
        }
        ul.features {
          margin-bottom: 12px;
          li {
            font-size: 12pt;
          }
        }
      }
  
      .call-to-action {
        margin: 10px 0;
      }
  
      .features {
        margin: 0;
        li {
          list-style: none;
          padding: 8px;
          line-height: 18px;
          vertical-align: top;
          border-top: 1px solid #dddddd;
        }
        li:first-child {
          border-top: none;
        }
      }
  
    }
  
  
    .social-proof {
      padding: 17px 0;
      blockquote {
        h2, h3, h4 {
          padding: 5px 0;
        }
      }
    }
  
  }
  </code></pre>
  
  <p>and the view:</p>
  
  <pre><code>&lt;ul class="thumbnails koudoku-pricing-table"&gt;
    &lt;% @plans.each do |plan| %&gt;
      &lt;li class="col-md-3 plan &lt;%= 'plan-primary' if plan.highlight? %&gt;"&gt;
        &lt;div class="thumbnail"&gt;
          &lt;div class="caption"&gt;
            &lt;h3&gt;&lt;%= plan.name %&gt;&lt;/h3&gt;
            &lt;h4&gt;&lt;%= plan_price(plan) %&gt;&lt;/h4&gt;
            &lt;div class="call-to-action"&gt;
              &lt;% if @subscription.nil? %&gt;
               &lt;% if plan.highlight? %&gt;
                &lt;%= link_to Koudoku.free_trial? ? 'Start Trial' : 'Sign Up', koudoku.new_subscription_path(plan: plan.id), class: "btn btn-success" %&gt;
                &lt;% else %&gt;
                &lt;%= link_to Koudoku.free_trial? ? 'Start Trial' : 'Sign Up', koudoku.new_subscription_path(plan: plan.id), class: "btn btn-primary" %&gt;
                &lt;% end %&gt;
  
              &lt;% elsif @subscription.persisted? %&gt;
                &lt;% if @subscription.plan == plan %&gt;
                  &lt;%= form_for @subscription, url: owner_subscription_path(@owner, @subscription) do |f| %&gt;
                    &lt;%= f.submit 'Selected', class: "btn btn-large", disabled: 'disabled' %&gt;
                  &lt;% end %&gt;
                &lt;% else %&gt;
                  &lt;%= form_for @subscription, url: owner_subscription_path(@owner, @subscription) do |f| %&gt;
                    &lt;%= f.hidden_field :plan_id, value: plan.id %&gt;
                    &lt;%= f.submit @subscription.describe_difference(plan), class: "btn btn-primary" %&gt;
                  &lt;% end %&gt;
                &lt;% end %&gt;
              &lt;% else %&gt;
                &lt;%= link_to Koudoku.free_trial? ? 'Start Trial' : 'Upgrade', new_owner_subscription_path(@owner, plan: plan.id), class: "btn btn-primary" %&gt;
              &lt;% end %&gt;
            &lt;/div&gt;
            &lt;ul class="features"&gt;
              &lt;% if Koudoku.free_trial? %&gt;
              &lt;li class='muted'&gt;&lt;%= Koudoku.free_trial_length %&gt;-day Free Trial&lt;/li&gt;
              &lt;% end %&gt;
              &lt;%= BlueCloth.new(plan.features.gsub(/\n/, "\n\n")).to_html.gsub(/&lt;(\/?)p&gt;/, '&lt;\1li&gt;').html_safe %&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;% end %&gt;
  
    &lt;li class="col-md-3 social-proof"&gt;
      &lt;%= render 'koudoku/subscriptions/social_proof' %&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>