"membership-card"
Bootstrap 4.0.0 Snippet by eegiimgl

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 class="member">
<div class="row">
<div class="col-md-2 member-card">
<div class="row">
<div class="col-md-4 no-padding">
<img class="img-fluid rounded"
src="#"/>
</div>
<div class="col-md-8 info">
<h6>
Donald Trump
</h6>
<p>+976 99696681</p>
</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
.member {
display: block;
font-family: "Segoe UI", 'Roboto Condensed', sans-serif;
text-transform: uppercase;
}
.member-card {
border: 1px solid #e6e6e6;
background: #FFF;
margin-left: 15px;
border-radius: 4px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
padding: 0;
}
.member-card img {
padding: 4px;
}
.member-card .info {
border-left: 1px solid #e6e6e6;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: