<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 ----------> <!-- https://bootsnipp.com/snippets/featured/user-detail-panel --> <div class="container"> <!-- MODAL AREA START --> <div class="modal fade" id="openEditor" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><span>Information</span></h4> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-12 user-details"> <div class="user-info-block"> <ul class="navigation"> <li class="active"> <a data-toggle="tab" href="#information"> <span class="glyphicon glyphicon-user"></span> </a> </li> <li> <a data-toggle="tab" href="#settings"> <span class="glyphicon glyphicon-cog"></span> </a> </li> <li> <a data-toggle="tab" href="#email"> <span class="glyphicon glyphicon-envelope"></span> </a> </li> <li> <a data-toggle="tab" href="#events"> <span class="glyphicon glyphicon-calendar"></span> </a> </li> </ul> <div class="user-body"> <div class="tab-content"> <div id="information" class="tab-pane active"> <h4>Account Information</h4> </div> <div id="settings" class="tab-pane"> <h4>Settings</h4> </div> <div id="email" class="tab-pane"> <h4>Send Message</h4> </div> <div id="events" class="tab-pane"> <h4>Events</h4> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default">Save</button> </div> </div> </div> </div> <!-- MODAL AREA END --> <!-- BUTTON FOR POPUP THE MODAL --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#openEditor">Open Modal</button> </div>

.user-details {position: relative; padding: 0;} .user-details .user-image {position: relative; z-index: 1; width: 100%; text-align: center;} .user-image img { clear: both; margin: auto; position: relative;} .user-info-block .navigation {float: left; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #428BCA; border-top: 1px solid #428BCA;} .navigation li {float: left; margin: 0; padding: 0;} .navigation li a {padding: 20px 30px; float: left;} .navigation li.active a {background: #428BCA; color: #fff;} .user-info-block .user-body {float: left; padding: 5%; width: 90%;} .user-body .tab-content > div {float: left; width: 100%;} .user-body .tab-content h4 {width: 100%; margin: 10px 0; color: #333;}