HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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="col-md-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3>Hey !</h3>
                </div>
                <div class="box-body">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem quo consequuntur aperiam eveniet vitae fugiat, totam
                    architecto aliquid fugit nam accusamus adipisci ipsam explicabo quis. Minima laboriosam voluptatibus
                    neque magnam.
                </div>
                <div class="box-footer text-center">Read more</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3>Hey !</h3>
                </div>
                <div class="box-body">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem quo consequuntur aperiam eveniet vitae fugiat, totam
                    architecto aliquid fugit nam accusamus adipisci ipsam explicabo quis. Minima laboriosam voluptatibus
                    neque magnam.
                </div>
                <div class="box-footer text-center">Read more</div>
            </div>
        </div>
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
/*
 * Component: Box
 * --------------
 */
.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.box.box-primary {
  border-top-color: #3c8dbc;
}
.box.box-info {
  border-top-color: #00c0ef;
}
.box.box-danger {
  border-top-color: #dd4b39;
}
.box.box-warning {
  border-top-color: #f39c12;
}
.box.box-success {
  border-top-color: #00a65a;
}
.box.box-default {
  border-top-color: #d2d6de;
}
.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
  display: none;
}
.box .nav-stacked > li {
  border-bottom: 1px solid #f4f4f4;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Box component - Admin-lte"
Bootstrap 3.3.0 Snippet by yamenarahman

Related: See More

Questions / Comments:

"Box component - Admin-lte" Bootstrap 3.3.0 Snippet by yamenarahman

Related: See More

Questions / Comments:

"Box component - Admin-lte"
Bootstrap 3.3.0 Snippet by yamenarahman