<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"> <hr/> <ul class="bs-box clerfix"> <li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li><li class="col-md-3"> <a class="panel panel-default"> <div class="panel-body text-center"> <h2>A Basic Panel</h2> <p>A Basic Panel</p> </div> </a> </li> </ul> </div> </div>

ul.bs-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } ul.bs-box>li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; } ul.bs-box>li { font-weight: bold; } ul.bs-box>li>a { border-bottom: 2px solid #2196F3; text-decoration: none; color: black; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } ul.bs-box>li>a:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.15); -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.15); -moz-box-shadow: 0 3px 8px rgba(0,0,0,0.15); }