<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">--> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="https://en.gravatar.com/userimage/53155850/25fadf891541cb11ff21091632d7c53b.png" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Marcus Doe </div> <div class="profile-usertitle-job"> Developer </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR BUTTONS --> <div class="profile-userbuttons"> <button type="button" class="btn btn-success btn-sm">Follow</button> <button type="button" class="btn btn-danger btn-sm">Message</button> </div> <!-- END SIDEBAR BUTTONS --> <!-- SIDEBAR MENU --> <div class="d-flex align-items-start"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"> <a href="#"> <i class="glyphicon glyphicon-home"></i> Overview </a></button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> <div class="profile-usermenu"> <ul class="nav"> <li class="active"> <a href="#"> <i class="glyphicon glyphicon-home"></i> Overview </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> Account Settings </a> </li> <li> <a href="#" target="_blank"> <i class="glyphicon glyphicon-ok"></i> Tasks </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-flag"></i> Help </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class="col-md-9"> <div class="profile-content"> Some user related content goes here... </div> </div> </div> </div> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ body { background: #F1F3FA; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; font-size: 11px; font-weight: 600; padding: 6px 15px; margin-right: 5px; } .profile-userbuttons .btn:last-child { margin-right: 0px; } .profile-usermenu { margin-top: 30px; } .profile-usermenu ul li { border-bottom: 1px solid #f0f4f7; } .profile-usermenu ul li:last-child { border-bottom: none; } .profile-usermenu ul li a { color: #93a3b5; font-size: 14px; font-weight: 400; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 14px; } .profile-usermenu ul li a:hover { background-color: #fafcfd; color: #5b9bd1; } .profile-usermenu ul li.active { border-bottom: none; } .profile-usermenu ul li.active a { color: #5b9bd1; background-color: #f6f9fb; border-left: 2px solid #5b9bd1; margin-left: -2px; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 460px; }