<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content girintile "><br> <div class="tab-pane box active" id="home" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok</h4><p class="text-justified girintile"> yunus</p></div> <div class="tab-pane" id="profile" role="tabpanel">melih</div> <div class="tab-pane" id="messages" role="tabpanel">gözütok</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div>

.girintile { padding-left: 10%; padding-right:10%; } .box {border: 1px solid #e6e7e8; border-radius: 10px -webkit-box-shadow: 10px 10px 5px -4px rgba(214,214,214,1); -moz-box-shadow: 10px 10px 5px -4px rgba(214,214,214,1); box-shadow: 10px 10px 5px -4px rgba(214,214,214,1);} .reset{padding: 0; margin: 0;} .team-box { border: 2px solid #e6e7e8; padding: 3%; } .no-a a, a:hover{text-decoration: none;} .nav {padding: 0 !important; margin: 0 !important;} .sagdan{margin-right: 5px;} .bg-grey{background-color: #f6f6f6; padding: 1%} .liste li {padding: 1%;}