"Lists- Admin Theme"
Bootstrap 3.3.0 Snippet by jeevan123456

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Images with text items</h4>
</div>
<div class="gaadiex-list">
<div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user">
<div class="gaadiex-list-item-text">
<h3><a href="#">Eric Graves</a></h3>
<h4>Brunch this weekend?</h4>
<p> I'll be in your neighborhood doing errands</p>
</div>
</div>
<div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user">
<div class="gaadiex-list-item-text">
<h3><a href="#">Catherine Crawford</a></h3>
<h4>Brunch this weekend?</h4>
<p> I'll be in your neighborhood doing errands</p>
</div>
</div>
<div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user">
<div class="gaadiex-list-item-text">
<h3><a href="#">Rosemary Jimenez</a></h3>
<h4>Brunch this weekend?</h4>
<p> I'll be in your neighborhood doing errands</p>
</div>
</div>
<div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user">
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
body {background:#e2e2e2;}
/********card frame **************/
.card {position: relative; border-radius: 3px; background-color: #fff;color: #4f5256;border: 1px solid #f2f2f2;margin-bottom: 16px;background:#fff;}
.card-header{ padding: 16px;margin:0px;}
.card-body {position: relative; padding: 16px;}
.gaadiex-list {list-style-type: none; margin: 0;padding: 0;}
.gaadiex-list>.gaadiex-list-item {padding: 0 22px;}
.gaadiex-list-item-img {
float: left;
width: 58px;
height: 58px;
margin-top: 20px;
margin-bottom: 8px;
margin-right: 20px;
border-radius: 50%;
}
.gaadiex-list-item i {
float: left;
font-size:48px;
width: 58px;
height: 58px;
margin-top: 20px;
margin-bottom: 8px;
margin-right: 20px;
border-radius: 50%;
}
.border-b-1 {border-bottom: 1px solid rgba(162,162,162,.16);}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: