<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"> <h2>Agendar Cita Enlinea:</h2> <div class="col-md-7 "> <div class="panel panel-default"> <div class="panel-heading"> <h4 >Datos del Requerimiento:</h4></div> <div class="panel-body"> <div class="box box-info"> <div class="box-body"> <div class="col-sm-6"> <div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive"> <input id="profile-image-upload" class="hidden" type="file"> <!--<div style="color:#999;" >click here to change profile image</div> --> <!--Upload Image Js And Css--> </div> <br> <!-- /input-group --> </div> <div class="col-sm-6"> <h4 style="color:#00b1b1;">Consultorio Médico. </h4></span> <h4 style="color:#00b1b1;">Dr. Patricio Abad H. </h4></span> <span><p>Tipo: Cita EnLinea.</p></span> </div> <div class="clearfix"></div> <hr style="margin:5px 0 5px 0;"> <div class="col-sm-5 col-xs-6 tital " >Cédula:</div><div class="col-sm-7 col-xs-6 ">Prasad</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Nombres:</div><div class="col-sm-7"> Shankar</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Apellidos:</div><div class="col-sm-7"> Huddedar</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Fecha de Nacimiento:</div><div class="col-sm-7">15 Jun 2016</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >E-mail:</div><div class="col-sm-7">11 Jun 1998</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Celular:</div><div class="col-sm-7">Shirdi</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Ciudad:</div><div class="col-sm-7">Quito</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Cita Para:</div><div class="col-sm-7">Hindu</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Hora:</div><div class="col-sm-7">Hindu</div> <div class="clearfix"></div> <div class="bot-border"></div> <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown"><span class="fa fa-gear"></span> Opciones </button> <!-- /.box-body --> </div> <!-- /.box --> </div> </div> </div> </div> <script> $(function() { $('#profile-image1').on('click', function() { $('#profile-image-upload').click(); }); }); </script> </div> </div>

input.hidden { position: absolute; left: -9999px; } #profile-image1 { cursor: pointer; width: 100px; height: 100px; border:2px solid #03b1ce ;} .tital{ font-size:16px; font-weight:500;} .bot-border{ border-bottom:1px #f8f8f8 solid; margin:5px 0 5px 0}