pricing_and_plans.html.erb

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Pricing and Plans</h1>
      <p>Below you will find our pricing and plans. Once you subscribe to a plan you can cancel at any time for any reason. </p>
    </div>
  </div>
</div>

<div class="container" style='margin-top: 20px;'>

  <div class="row">
    <div class="col-md-4">
      <div class="panel panel-danger">
        <div class="panel-heading"><h3 class="text-center">STARTER PLAN</h3></div>
        <div class="panel-body text-center">
        <p class="lead" style="font-size:40px"><strong>$10 / month</strong></p>
      </div>

      <ul class="list-group list-group-flush text-center">
        <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
        <li class="list-group-item"><i class="icon-ok text-danger"></i> 1 Property</li>
        <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
      </ul>

      <div class="panel-footer">
        <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
      </div>
     </div>
    </div><!-- end plan block -->

    <div class="col-md-4">
      <div class="panel panel-info">
        <div class="panel-heading"><h3 class="text-center">PRO PLAN</h3></div>
        <div class="panel-body text-center">
          <p class="lead" style="font-size:40px"><strong>$20 / month</strong></p>
        </div>
        <ul class="list-group list-group-flush text-center">
          <li class="list-group-item"><i class="icon-ok text-danger"></i> Small Business use</li>
          <li class="list-group-item"><i class="icon-ok text-danger"></i> 20 Properties</li>
          <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
        </ul>
        <div class="panel-footer">
          <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
        </div>
      </div>
    </div><!-- end plan block -->

     <div class="col-md-4">
      <div class="panel panel-success">
        <div class="panel-heading"><h3 class="text-center">ULTIMATE PLAN</h3></div>
        <div class="panel-body text-center">
          <p class="lead" style="font-size:40px"><strong>$49 / month</strong></p>
        </div>
        <ul class="list-group list-group-flush text-center">
          <li class="list-group-item"><i class="icon-ok text-danger"></i> Enterprise Use</li>
          <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited Properties</li>
          <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
        </ul>
        <div class="panel-footer">
          <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
        </div>
      </div>
    </div><!-- end plan block -->

  </div><!-- end row -->
</div><!-- end container -->