<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="row jumbotron vertical-center-row"> <h1 style="font-size:40px;" align="center">Dashboard</h1> <p class="lead" align="center"><i class="fa fa-list"></i>  Welcome <br> <div class="row"> <!-- Spacer --> <div class="col-md-2 " style="background-color:lavender;"></div> <div class="col-md-4"> <div class = "panel panel-default panel-cust" style="width:100%;"> <div class = "panel-body panel-updated"> <h2 align="center"><img src=" " height="132" width="132" alt="panel1"> </h2> <h4 class="desc">panel 1 description</h4> </div> <div class="btn-group btn-block foot"> <button type="button" class="btn btn-block btn-oracle dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span><strong> Quick Links </strong> <span class="caret"></span> </button> <ul class="dropdown-menu btn-block homepage" role="menu" text-align="center"> <li><a href="#/link1"><strong>link1 </strong></a></li> <li class="divider"></li> <li><a href="#/link2"><strong>link2 </strong></a></li> </ul> </div> </div> </div> <div class="col-md-4"> <div class = "panel panel-default panel-cust" style="width:100%;"> <div class = "panel-body panel-updated"> <h2 align="center"><img src=" " height="144" width="144" alt="panel2"> </h2> <h4 class="desc"> p2-Description</h4> </div> <div class="btn-group btn-block foot"> <button type="button" class="btn btn-block btn-ibm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span><strong> Quick Links </strong> <span class="caret"></span> </button> <ul class="dropdown-menu btn-block homepage" role="menu" text-align="center"> <li><a href="#/link3 "><strong>link 3</strong></a></li> <li class="divider"></li> <li class="disabled"><a href="#/link4" disabled><strong>link 4 </strong></a></li> </ul> </div> </div> </div> </div> </div>

.panel { -webkit-animation: .5s ease; -moz-animation: .5s ease; -o-animation: .5s ease; margin-bottom:10px; } .panel:hover { -webkit-transform: scale(1.05); -moz-transform:scale(1.05); -ms-transform:scale(1.05); -o-transform:scale(1.05); transform:scale(1.05); } .desc{ border: 0px; text-align: center; padding-top:10px; } .panel-updated { margin-left:-15px; margin-right:-15px; margin-bottom:-15px; height: 250px; padding-left:15px; padding-right:15px; padding-top:0px; } .panel-oracle { margin-left:-15px; margin-right:-15px; margin-bottom:-4px; } .panel-cust { border: 2px solid #a8a8a8; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); width:95%; } .panel-commingsoon:hover { background:rgba(0,0,0,.75); } .panel-commingsoon{ height:180px; }