<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"> <h3 class="text-center">SMALL TEAM</h3> <p class="text-center">MAX TEAM SIZE 25</p> </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"> <h3 class="text-center">MEDIUM TEAM</h3> <p class="text-center">MAX TEAM SIZE 50</p> </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"> <h3 class="text-center">LARGE TEAM</h3> <p class="text-center">MAX TEAM SIZE 100</p> </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"> <h3 class="text-center">HUGE TEAM</h3> <p class="text-center">MAX TEAM SIZE 300</p> </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> </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; }