<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <br><br> <div class="row"> <div class="col-sm-12"> <div class="user-info-block"> <ul class="navigation"> <li>|<span class="glyphicon glyphicon-user"></span> Sergio Rodriguez </li> <li> <a class="nav-item" href="#settings"> <span class="glyphicon glyphicon-bookmark"></span>  Category </a> </li> <li>| <span class="glyphicon glyphicon-calendar"></span> 2013-07-23 </li> <li>| <span class="glyphicon glyphicon-eye-open"></span> 12 views </li> <li class="dropdown settings"> <a class="nav-item dropdown-toggle" data-toggle="dropdown" href="#"> Mike Adams <i class="glyphicon glyphicon-chevron-down"></i> </a> <ul class="dropdown-menu animated fadeInDown"> <li> <a href="#"><i class="glyphicon glyphicon-edit"></i> Email</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-print"></i> Print</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-edit"></i> Edit</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-plus-sign"></i> New</a> </li> </ul> </li> </ul> </div> </div> </div> </div>

.navigation {float: left; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;} .navigation li {float: left; margin: 0; padding: 0;} .navigation li .nav-item { font-size: 13px; color: #666666; text-decoration: none; padding: 0pt 20px; border-right: 1px solid #666666;} body {background: #EAEAEA;} .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-details .user-info-block {width: 100%; position: absolute; top: 55px; background: rgb(255, 255, 255); z-index: 0; padding-top: 35px;} .user-info-block .user-heading {width: 100%; text-align: center; margin: 10px 0 0;} .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;}