Bootstrap Snippet Card with Icon 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
<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-4">
        <div class="card-base">
<div class="card-icon"><a href="#" title="Widgets" id="widgetCardIcon" class="imagecard"><span class="glyphicon glyphicon-user"></span></a>
<div class="card-data widgetCardData">
<h2 class="box-title" style="color: #bb7824;">Widgets</h2>
<p class="card-block text-center">Rich, Adaptive, Mobile-First Widgets. Driven by deep User Centered Analysis and Research.</p>
<a href="#" title="Style Builder" class="anchor btn btn-default" style="background: #bb7824; border: #bb7824;"> <i class="fa fa-paper-plane" aria-hidden="true"></i> ·Explore More </a></div>
</div>
<div class="space"></div>
</div>
    </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
.card-base > .card-icon {
        text-align: center;
        position: relative;
    }
.imagecard { 
    z-index: 2;
    display: block;
    positioN: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    color: white;
}
.card-base > .card-icon > .card-data {
    min-height: 250px !important;
    margin-top: -24px;
    background: ghostwhite;
    border: 1px solid #e0e0e0;
    padding: 15px 0 10px 0;
     box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    min-height: 215px;
    }
    #widgetCardIcon {
        background: #bb7824 !important;
        font-size: 28px;
        line-height: 78px;
    }
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Card with Icon"
Bootstrap 3.3.0 Snippet by snehpandya

Related: See More

Questions / Comments:

"Card with Icon" Bootstrap 3.3.0 Snippet by snehpandya

Related: See More

Questions / Comments:

"Card with Icon"
Bootstrap 3.3.0 Snippet by snehpandya