<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 ----------> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> ADMIN </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="http://www.sciax2.it/forum/utenti/-kik_226760/" target="_blank">Return back</a></li> <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Settings <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">SETTINGS</li> <li class=""><a href="#">Link</a></li> <li class=""><a href="#">Other Link</a></li> <li class=""><a href="#">Other Link</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="col col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Files</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <ul class="list-group"> <li class="list-group-item"><span class="badge">253</span> New</li> <li class="list-group-item"><span class="badge">17</span> Deleted</li> <li class="list-group-item"><span class="badge">3</span> Reported</li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Blog</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <ul class="list-group"> <li class="list-group-item"><span class="badge">12</span> New</li> <li class="list-group-item"><span class="badge">5</span> Deleted</li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Settings</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <ul class="list-group"> <li class="list-group-item"><span class="badge">1</span> Users Reported</li> <li class="list-group-item"><span class="badge">5</span> User Waiting Activation</li> </ul> </div> </div> </div> </div> <div class="col col-md-9"> <div class="row"> <div class="col col-md-5"> <h4>Today Stats:</h4> Visits<span class="pull-right strong">- 15%</span> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15"aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div> </div> 20 New Users<span class="pull-right strong">+ 30%</span> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30"aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div> </div> 359 Downloads<span class="pull-right strong">+ 8%</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="8"aria-valuemin="0" aria-valuemax="100" style="width:8%">8%</div> </div> </div> <div class="col col-md-5"> <h4>This Month Stats:</h4> Visits<span class="pull-right strong">+ 45%</span> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45"aria-valuemin="0" aria-valuemax="100" style="width:45%">45%</div> </div> 395 New Users<span class="pull-right strong">+ 57%</span> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57"aria-valuemin="0" aria-valuemax="100" style="width:57%">57%</div> </div> 12.593 Downloads<span class="pull-right strong">+ 25%</span> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25"aria-valuemin="0" aria-valuemax="100" style="width:25%">25%</div> </div> </div> </div> </div> </div>