Sidebar danger
One stop solution for perfect admin dashboard!
1,411
Comments
<a class="dashboard-stat bg-primary" href="#">
<span class="number counter">1,411</span>
<span class="name">Comments</span>
<span class="bg-icon"><i class="fa fa-comments"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
322
Total Tickets
<a class="dashboard-stat bg-danger" href="#">
<span class="number counter">322</span>
<span class="name">Total Tickets</span>
<span class="bg-icon"><i class="fa fa-ticket"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
5,551
Bank Credits
<a class="dashboard-stat bg-warning" href="#">
<span class="number counter">5,551</span>
<span class="name">Bank Credits</span>
<span class="bg-icon"><i class="fa fa-bank"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
16,710
Thumbs Up
<a class="dashboard-stat bg-success" href="#">
<span class="number counter">16,710</span>
<span class="name">Thumbs Up</span>
<span class="bg-icon"><i class="fa fa-thumbs-o-up"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
Production Change over years
<div id="production-chart" class="op-chart"></div>
<!-- ========== JS ========== -->
<script src="js/production-chart.js"></script>
Traffic Stats over years
<div id="traffic-chart" class="op-chart"></div>
<!-- ========== JS ========== -->
<script src="js/traffic-chart.js"></script>
Table with actions
# | First Name | Username | Action |
---|---|---|---|
1 | Mark | @mdo | |
2 | Jacob | @cool | |
5 | Sachin | @the.god | |
3 | Larry | ||
4 | Salman | @bhai | |
6 | Mark | @faceb |
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>@mdo</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>@cool</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Sachin</td>
<td>@the.god</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>@twitter</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Salman</td>
<td>@bhai</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Mark</td>
<td>@faceb</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
</tbody>
</table>
Tasks with priority indicator
Following is the list of all the pending tasks. Click on task to mark it done. You can toggle the status by clicking on an item.
<div class="tasks-list col-md-8 col-md-offset-2">
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-blue">
<label>This is medium priority task. It is indicated in primary color.</label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-red">
<label>This is top priority task. It is indicated in danger color.</label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-green">
<label>This is low priority task. It is indicated in success color. </label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-blue" checked="">
<label>This is medium priority task. It is indicated in primary color.</label>
</div>
<!-- /.task -->
</div>
<!-- /.tasks-list -->
<!-- ========== JS ========== -->
<script src="js/task-list.js"></script>