<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"><h1>Beneficiary <a class="btn icon-btn btn-primary pull-right" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle"></span> Add New Beneficiary</a></h1></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="thumbnail thumbnail-beneficiary"> <div class="caption"> <h4>John Deo Mobilel <span class="glyphicon glyphicon-remove text-danger pull-right close-beneficiary"></span> </h4> <p>MoviStar Perpaid-6058497</p> <p class"text-muted"><small>Last Payment: $15.00 on 2015-10-22</small></p> <button type="button" class="btn btn-primary btn-sm btn-beneficiary"><span class="glyphicon glyphicon-star" aria-hidden="true"> </span> Make Payment</button> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="thumbnail thumbnail-beneficiary"> <div class="caption"> <h4>Adam Smith Phone <span class="glyphicon glyphicon-remove text-danger pull-right close-beneficiary"></span></h4> <p>MoviStar Perpaid-6058497</p> <p class"text-muted"><small>Last Payment: $15.00 on 2015-10-22</small></p> <button type="button" class="btn btn-primary btn-sm btn-beneficiary"><span class="glyphicon glyphicon-star" aria-hidden="true"> </span> Make Payment</button> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="thumbnail thumbnail-beneficiary"> <div class="caption"> <h4>John Deo Mobilel <span class="glyphicon glyphicon-remove text-danger pull-right close-beneficiary"></span> </h4> <p>MoviStar Perpaid-6058497</p> <p class"text-muted"><small>Last Payment: $15.00 on 2015-10-22</small></p> <button type="button" class="btn btn-primary btn-sm btn-beneficiary"><span class="glyphicon glyphicon-star" aria-hidden="true"> </span> Make Payment</button> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="thumbnail thumbnail-beneficiary"> <div class="caption"> <h4>Adam Smith Phone <span class="glyphicon glyphicon-remove text-danger pull-right close-beneficiary"></span></h4> <p>MoviStar Perpaid-6058497</p> <p class"text-muted"><small>Last Payment: $15.00 on 2015-10-22</small></p> <button type="button" class="btn btn-primary btn-sm btn-beneficiary"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Make Payment</button> </div> </div> </div> <div class="col-lg-12"><a href="#">View Deleted Beneficiaries</a></div> </div> </div><!-- End row --> </div><!-- End container -->

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic); .thumbnail-beneficiary { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 0px; transition: all 0.2s ease-in-out; } .btn { border-radius: 0px; } small { color:#888; } p { margin:3px } .close-beneficiary { margin-top:-12px; } .btn-beneficiary { margin-top:20px; }