<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 ----------> <!-- price & service --> <div class="container"> <div class="row"> <h2 id="details">Choose your package</h2> </div><br> <!-- Pack 1--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Basic User</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> HTML5 & CSS3</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> PSD included</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Light and clean</li> </ul> <div class="try"> <p class="price">$ 6.99</p> <a class="btn btn-default" href="#" type="button">Buy</a> </div> </div> <!-- Pack 2--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Premium User</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> HTML5 & CSS3</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> PSD included</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Light and clean</li> </ul> <div class="try"> <p class="price">$ 8.99</p> <a class="btn btn-default" href="#" type="button">Buy</a> </div> </div> <!-- Pack 3--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Business User</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> HTML5 & CSS3</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> PSD included</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Light and clean</li> </ul> <div class="try"> <p class="price">$ 10.99</p> <button class="btn btn-default" href="#" type="button">Buy</button></li> </div> </div> </div> </div> </div>

.container { padding-top: 40px; } #details { font-family: "Quicksand", sans-serif; font-size: 60px; } #home-box > h2 { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #45b1ae; } .price { font-size: 25px; float: left; } .pricing_header { background: none repeat scroll 0% 0% rgb(44, 62, 80); border-radius: 5px 5px 0px 0px; transition: background 0.4s ease-out 0s; } .pricing_header h2 { text-align:center; line-height: 25px; padding: 15px 0px; margin: 0px; font-family: "Quicksand", sans-serif; font-weight: 400; color: #75b1ae; } .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .btn { float: right; font-family: "Quicksand", sans-serif; font-weight:500;} .off { text-decoration: line-through; color: rgb(86,86,86); } .space {height: 2px; background-color: #75b1ae;}