"Card Styles"
Bootstrap 4.1.1 Snippet by BhaumikPatel

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/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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<h3 class="pb-3 mb-4 font-italic border-bottom">
Card Styles
</h3>
<div class="row">
<div class="col-md-6">
<div class="card flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">40 Percent of People Can’t Afford Basics</a>
</h6>
<div class="mb-1 text-muted small">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-outline-primary btn-sm" role="button" href="http://www.jquery2dotnet.com/">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-success">Health</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Food for Thought: Diet and Brain Health</a>
</h6>
<div class="mb-1 text-muted small">Nov 11</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-outline-success btn-sm" href="http://www.jquery2dotnet.com/">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/nature" style="width: 200px; height: 250px;">
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
.social-card-header{
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
height: 96px;
}
.social-card-header i {
font-size: 32px;
color:#FFF;
}
.bg-facebook {
background-color:#3b5998;
}
.text-facebook {
color:#3b5998;
}
.bg-google-plus{
background-color:#dd4b39;
}
.text-google-plus {
color:#dd4b39;
}
.bg-twitter {
background-color:#1da1f2;
}
.text-twitter {
color:#1da1f2;
}
.bg-pinterest {
background-color:#bd081c;
}
.text-pinterest {
color:#bd081c;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: