"Simple Pricing Table"
Bootstrap 3.1.0 Snippet by shyamalaD

<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-md-1 pull-right"> <label class="checkbox-inline"><input type="checkbox" value="">Trained</label> </div> <div class="col-md-3 pull-right"> <input class="form-control" placeholder="Enter Username" type="text"/> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="text-center"> PRODUCT A</h4> </div> <div class="panel-body text-center"> <div class="fill"> <img src="http://1.bp.blogspot.com/-zzcv3yDERgc/VSbJnz5KdQI/AAAAAAAAHQk/BL7sjHGK5sc/s1600/test.jpg"> </div> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-danger"></i>Item Name</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Brand</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Model</li> </ul> </div> </div> <div class="col-md-6"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="text-center"> PRODUCT B</h4> </div> <div class="panel-body text-center"> <div class="fill"> <img src="https://images-na.ssl-images-amazon.com/images/I/51bt7LtryoL._SX314_BO1,204,203,200_.jpg"> </div> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-danger"></i>Item Name</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Brand</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Model</li> </ul> </div> </div> <div class="col-md-6 col-md-offset-3"> <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label> </div> </div> </div>
.lead { font-size: 33px;margin-bottom:0px; } .row{ margin:10px; } div.fill { width:500px; height:200px; } div.fill img { max-width:100%; max-height:100%; }

Related: See More


Questions / Comments: