"Profile image with cards"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h5 style="color:white">https://www.littlesnippets.net/?start=500</h5>
<figure class="snip1578">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample6.jpg" alt="profile-sample6" />
<figcaption>
<h3>Bailey Wonger</h3>
<div class="icons"><a href="#"><i class="ion-social-twitter"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
<a href="#"> <i class="ion-social-github"></i></a>
</div>
</figcaption>
</figure>
<figure class="snip1578 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="profile-sample5" />
<figcaption>
<h3>Abraham Pigeon</h3>
<div class="icons"><a href="#"><i class="ion-social-twitter"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
<a href="#"> <i class="ion-social-github"></i></a>
</div>
</figcaption>
</figure>
<figure class="snip1578"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" />
<figcaption>
<h3>Hans Down</h3>
<div class="icons"><a href="#"><i class="ion-social-twitter"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
<a href="#"> <i class="ion-social-github"></i></a>
</div>
</figcaption>
</figure>
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(https://fonts.googleapis.com/css?family=Open+Sans:200);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1578 {
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
display: inline-block;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000;
text-align: left;
font-size: 16px;
background: #fff;
border-radius: 5px;
}
.snip1578 *,
.snip1578:before,
.snip1578:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1578 img {
max-width: 35%;
margin-top: -15px;
margin-left: 60%;
margin-bottom: 15px;
backface-visibility: hidden;
vertical-align: top;
border-radius: 5px;
}
.snip1578 figcaption {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: