<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>Przykład profilu zawodnika</h2> <div class="col-md-7 "> <div class="panel panel-default"> <div class="panel-heading"> <h4 >Profil zawodnika</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;" >kliknij tutaj żeby zmienić zdjęcie</div> <!--Upload Image Js And Css--> </div> <br> <!-- /input-group --> </div> <div class="col-sm-6"> <h4 style="color:#00b1b1;">Imię i nazwisko</h4></span> <span><p>Klub</p></span> </div> <div class="clearfix"></div> <hr style="margin:5px 0 5px 0;"> <div class="col-sm-5 col-xs-6 tital " >Imię:</div><div class="col-sm-7">Jan</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Nazwisko:</div><div class="col-sm-7">Kowalski</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Data urodzenia:</div><div class="col-sm-7">20.05.2000 rok</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Wiek:</div><div class="col-sm-7">16 lat</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Waga:</div><div class="col-sm-7">35 kg</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Stopień:</div><div class="col-sm-7">4.1 kyu</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Klub:</div><div class="col-sm-7">Nazwa klubu</div> <div class="clearfix"></div> <div class="bot-border"></div> <div class="col-sm-5 col-xs-6 tital " >Licencja:</div><div class="col-sm-7">09877788</div> <!-- /.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}