<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"> <div class="row"> <div class="col-sm-4 col-md-4 user-details"> <div class="user-info-block"> <div class="user-heading"> <h3>Monthly Attendance</h3> </div> <ul class="navigation"> </ul> <div class="user-body"> <div class="cointainer"> <div class="tab-content"> <div id="information" class="tab-pane active" style="text-align:center"> <h4>Present : 160</h4> <h4>Absent : 40</h4> <h4>Holidays : 40</h4> <h4>Total : 240</h4> </div> <div id="settings" class="tab-pane"> </div> <div id="email" class="tab-pane"> </div> <div id="events" class="tab-pane"> </div> </div> </div> </div> </div> </div> </div> </div>

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;}