<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-3"> <div class="panel panel-danger"> <div class="panel-heading"> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$20/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-info"> <div class="panel-heading"> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$40/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-success"> <div class="panel-heading"> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$60/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading"> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$100/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> </div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- snipp1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9155049400353686" data-ad-slot="4807425052" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

.panel { transition: padding 0.5s; -moz-transition: padding 0.5s; /* Firefox 4 */ -webkit-transition: padding 0.5s; /* Safari and Chrome */ -o-transition: padding 0.5s; /* Opera */ -ms-transition:padding 0.5s; /* IE9 (maybe) */ } .panel:hover { padding:10px; }