"User Profile"
Bootstrap 4.0.0 Snippet by serkanbasdag

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>İSTEmezun</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="css/profil.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous"> <link rel="shortcut icon" href="img/isteicon.ico" type="image/x-icon"> </head> <div class="container"> <div class="row"> <div class="col-12 col-sm-4 col-lg-3 col-xl-2 pt-5 pt-sm-0"> <div class="sticky-top pt-5 pt-sm-0" style="top: 150px"> <div class="card golge mb-2"> <div class="fotoYukari"> <a href="#" data-toggle="modal" data-target="#openModalImg" data-target="#openModalImg" class="text-dark"><img class="img-profile golge mx-auto d-block" src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png"></a> </div> <div class="card-header bg-white p-1"> <br><br><br> <h4 class="text-center">Serkan Basdag</h4> <h4 class="text-center">Computer Engineer</h4> <div class="d-flex justify-content-around "> <a href="#"><i data-toggle="tooltip" title="Github" class="fab fa-github-square mb-1 iconGit" style="font-size: 42px;"></i></a> <a href="#"><i data-toggle="tooltip" title="Linkedin" class="fab fa-linkedin mb-1 iconLnk" style="font-size: 42px"></i></a> <a href="#"><i data-toggle="tooltip" title="Facebook" class="fab fa-facebook-square mb-1 iconFb" style="font-size: 42px"></i></a> <a href="#"><i data-toggle="tooltip" title="Twitter" class="fab fa-twitter-square mb-1 iconTw" style="font-size: 42px"></i></a> </div> <button type="button" class="btn btn-dark text-light btn-block dropdown-toggle" data-toggle="collapse" data-target="#collapseID">More...</button> </div> <div class="card-body collapse p-0" id="collapseID"> <div class="row"> <div class="col-3 mt-2"> <p id="dahaFazlaIcon" data-toggle="tooltip" title="Konum" data-placement="top" class="text-center"><i class="fas fa-map-marker-alt" style="font-size: 25px"></i></p> </div> <div class="col-9 mt-2 pl-0"> <h6>Turkey</h6> </div> </div> <div class="row"> <div class="col-3 mt-2"> <p id="dahaFazlaIcon" data-toggle="tooltip" title="Numara" data-placement="top" class="text-center"><i class="fas fa-mobile-alt" style="font-size: 25px"></i></p> </div> <div class="col-9 mt-2 pl-1"> <h6>05551234567</h6> </div> </div> <div class="row"> <div class="col-3 mt-2"> <p id="dahaFazlaIcon" data-toggle="tooltip" title="E-Mail" data-placement="top" class="text-center"><i class="fas fa-envelope" style="font-size: 25px"></i></p> </div> <div class="col-9 mt-2 pl-1"> <h6 style="font-size: 14px">serkanbasdag@hotmail.com</h6> </div> </div> <div class="row"> <div class="col-3 mt-2"> <p id="dahaFazlaIcon" data-toggle="tooltip" title="İş" data-placement="top" class="text-center"><i class="fas fa-briefcase" style="font-size: 25px"></i></p> </div> <div class="col-9 mt-2 pl-1"> <h6>Microsoft</h6> </div> </div> <div class="row"> <div class="col-3 mt-2"> <p id="dahaFazlaIcon" data-toggle="tooltip" title="Website" data-placement="top" class="text-center"><i class="fas fa-link" style="font-size: 25px"></i></p> </div> <div class="col-9 mt-2 pl-1"> <a href="#" style="color: black"> <h6 style="font-size: 14px">wwww.serkanbasdag.com</h6> </a> </div> </div> </div> </div> </div> </html>
.img-profile { object-fit: cover; border-radius:50%; width: 150px; height: 150px; border-style: solid; } .golge{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .fotoYukari { margin-top: 0px; margin-bottom: -70px; z-index: 2; } .iconGit{ color: #353A40; } .iconGit:hover{ color: #24292D; } .iconLnk{ color: #353A40; } .iconLnk:hover{ color: #0077BA; } .iconFb{ color: #353A40; } .iconFb:hover{ color: #3B6AAE; } .iconTw{ color: #353A40; } .iconTw:hover{ color: #1DA1F3; }

Related: See More

Light Bootstrap Dashboard Angular
Instagram Style User Online
My User Login Page
Bootstrap 4 User Rating Form / Comment Form

Questions / Comments: