<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-fluid"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-3"> <h2 class="text-center pull-left" style="padding-left: 30px;"> <span class="glyphicon glyphicon-list-alt"> </span> Details </h2> </div> <div class="col-xs-9 col-sm-9 col-md-9"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-md-4"> <label> Search </label> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control input-md" name="search"> <div class="input-group-btn"> <button type="button" class="btn btn-md btn-warning"> <span class=" glyphicon glyphicon-search"></span></button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="panel-body table-responsive"> <table class="table table-hover"> <thead> <tr> <th class="text-center"> No. </th> <th class="text-center"> Name </th> <th class="text-center"> Mobile No. </th> <th class="text-center"> E-Mail </th> <th class="text-center"> City </th> </tr> </thead> <tbody> <tr class="edit" id="detail"> <td id="no" class="text-center"> 1 </td> <td id="name" class="text-center"> ABC </td> <td id="mobile" class="text-center"> 5412547854 </td> <td id="mail" class="text-center"> abc@gmail.com </td> <td id="city" class="text-center"> New York </td> </tr> <tr> <td class="text-center"> 2 </td> <td class="text-center"> DFG </td> <td class="text-center"> 4025478965 </td> <td class="text-center"> dfg@gmail.com </td> <td class="text-center"> Los Angelos </td> </tr> <tr> <td class="text-center"> 3 </td> <td class="text-center"> XYZ </td> <td class="text-center"> 4102369745 </td> <td class="text-center"> xyz@gmail.com </td> <td class="text-center"> Las Vegas </td> </tr> <tr> <td class="text-center"> 4 </td> <td class="text-center"> JKL </td> <td class="text-center"> 2536541028 </td> <td class="text-center"> jkl@gmail.com </td> <td class="text-center"> California </td> </tr> <tr> <td class="text-center"> 5 </td> <td class="text-center"> DFG </td> <td class="text-center"> 4025478965 </td> <td class="text-center"> dfg@gmail.com </td> <td class="text-center"> Los Angelos </td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col-lg-12"> <div class="col-md-8"> </div> <div class="col-md-4"> <p class="muted pull-right"><strong> © 2017 All rights reserved </strong></p> </div> </div> </div> </div> </div> </div>

.panel { margin: 5%; background: transparent; } tr { transition: all 0.5s; } tr:hover { background-color: #f0ad4e; transition: 0.5s; } .btn-warning { transition: all 0.8s; } .btn-warning:hover, .btn-warning:focus { transition: 0.8s; background-color: #428bca; border-color: #428bca; } .panel-footer { background-color: #5bc0de; color: white; }

$(document).ready(function(){ $(".form-control").popover({title: "Search Here", placement: "top"}); })