<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-md-3 col-xs-12 user-stats"> <div class="well"> <h5> <strong>Username: </strong>Dayo [1] <span class="label label-info">Admin</span> </h5> <h5> <strong>Level: </strong>9000 </h5> <h5> <strong>Cash: </strong>$1,000,000 </h5> <h5> <strong>Premium Points: </strong>1,234 </h5> <hr /> <h5> <a href="#" class="pull-left">My Account</a> <a href="#" class="pull-right">Logout</a> <div class="clearfix"></div> </h5> </div> </div> <div class="col-md-6 col-xs-12 text-center page-header"> <h1 class="game-name"> Game Name <small>Some slogan here</small> </h1> </div> <div class="col-md-3 col-xs-12 user-stats"> <h5>Health</h5> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%;"> 60/100 </div> </div> <h5>Energy</h5> <div class="progress"> <div class="progress-bar" style="width: 95%;"> 95/100 </div> </div> <h5>Mana</h5> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 33%;"> 10/30 </div> </div> </div> <div class="row"> <div class="col-md-12"> </div> </div> <nav class="navbar navbar-inverse"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 4</a></li> <li><a href="#">Page 5</a></li> </ul> </div> </nav> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3 class="page-title text-center">Travel</h3> <table class="table table-bordered"> <thead> <tr class="active"> <th>Location</th> <th width="100px">Cost</th> <th width="100px">Time</th> <th width="60px">Action</th> </tr> </thead> <tbody> <tr> <td>London</td> <td>$450</td> <td>02:30:00</td> <td><button class="btn btn-xs">Travel</button></td> </tr> <tr> <td>Paris</td> <td>$450</td> <td>02:30:00</td> <td><button class="btn btn-xs">Travel</button></td> </tr> <tr> <td>Berlin</td> <td>$450</td> <td>02:30:00</td> <td><button class="btn btn-xs">Travel</button></td> </tr> <tr> <td>Madrid</td> <td>$450</td> <td>02:30:00</td> <td><button class="btn btn-xs">Travel</button></td> </tr> <tr> <td>Rome</td> <td>$450</td> <td>02:30:00</td> <td><button class="btn btn-xs">Travel</button></td> </tr> </tbody> </table> </div> </div> </div>

.page-header { border-bottom: none; } .game-name small { display: block; } .user-stats hr { margin: 10px; } .user-stats h5 { margin-bottom: 0px; } .user-stats .well { margin-top: 10px; padding: 5px 10px; } .user-stats .progress .progress-bar { text-align: left; padding-left: 5px; min-width: 20px; } .page-title { margin-top: 0px; }