Bootstrap Snippet Admin-Stats using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="btn-group btn-group-justified">
            <div class="btn-group" onclick="#">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-user"></span>
                    <h4>Profile</h4>
                </button>
            </div>
            <div class="btn-group" onclick="#">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-time"></span>
                    <h4>Statistics</h4>
                </button>
            </div>
            <div class="btn-group" onclick="#">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-usd"></span>
                    <h4>Donate</h4>
                </button>
            </div>
            <div class="btn-group" onclick="#">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-cog"></span>
                    <h4>Settings</h4>
                </button>
            </div>
            <div class="btn-group" onclick="#">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-question-sign"></span>
                    <h4>Help</h4>
                </button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
/* 
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 
  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;
  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}
body {
    background: #16A085;
    font-family: 'Roboto', sans-serif;
    padding-top: 40px;
}
.main {
    background-color: #ECF0F1;
    border: 0px solid #8E44AD;
    border-radius: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    margin-bottom: 40px;
    margin-right: 10%;
    margin-left: 10%;
    
}
.btn-nav {
    text-align: center;
    background-color: #ECF0F1;
    border: 0px solid #8E44AD;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
var activeEl = 1;
$(function() {
    var items = $('.btn-nav');
    $( items[activeEl] ).addClass('active');
    $( ".btn-nav" ).click(function() {
        $( items[activeEl] ).removeClass('active');
        $( this ).addClass('active');
        activeEl = $( ".btn-nav" ).index( this );
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Admin-Stats"
Bootstrap 3.3.0 Snippet by Demircii

Related: See More

Questions / Comments:

"Admin-Stats" Bootstrap 3.3.0 Snippet by Demircii

Related: See More

Questions / Comments:

"Admin-Stats"
Bootstrap 3.3.0 Snippet by Demircii