Bootstrap Snippet BOX INFO using HTML CSS Bootstrap

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="sum_box" class="row mbl">
                            <div class="col-sm-6 col-md-3">
                                <div class="panel income db mbm">
                                    <div class="panel-body">
                                        <p class="icon">
                                            <i class="icon fa fa-money"></i>
                                        </p>
                                        <h4 class="value">
                                            <span>812</span><span>$</span></h4>
                                        <p class="description">
                                            Saldo</p>
                                  
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <div class="panel profit db mbm">
                                    <div class="panel-body">
                                        <p class="icon">
                                            <i class="icon fa fa-shopping-cart"></i>
                                        </p>
                                        <h4 class="value">
                                            <span data-counter="" data-start="10" data-end="50" data-step="1" data-duration="0">189</span><span>$</span></h4>
                                        <p class="description">
                                            Mensajes enviados</p>
                                   
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-sm-6 col-md-3">
                                <div class="panel task db mbm">
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 "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Roboto:400,500";
#sum_box h4 {
    text-align: left;
    margin-top: 0px;
    font-size: 30px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
#sum_box .db:hover {
    background: #40516f;
    color: #fff;
}
#sum_box .db:hover .icon {
    opacity: 1;
    color: #999999;
}
#sum_box .icon {
    color: #fff;
    font-size: 55px;
    margin-top: 7px;
    margin-bottom: 0px;
    float: right;
}
.panel.income.db.mbm{
        background-color: #5cb85c;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"BOX INFO"
Bootstrap 3.0.0 Snippet by emendoza

Related: See More

Questions / Comments:

"BOX INFO" Bootstrap 3.0.0 Snippet by emendoza

Related: See More

Questions / Comments:

"BOX INFO"
Bootstrap 3.0.0 Snippet by emendoza