"Simple Bootstrap Blog Listing Card Design"
Bootstrap 4.1.1 Snippet by yusufsulemani

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
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 ---------->
<!-- details card section starts from here -->
<section class="details-card">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-content">
<div class="card-img">
<img src="https://placeimg.com/380/230/nature" alt="">
<span><h4>heading</h4></span>
</div>
<div class="card-desc">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, voluptatum! Dolor quo, perspiciatis
voluptas totam</p>
<a href="#" class="btn-card">Read</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-content">
<div class="card-img">
<img src="https://placeimg.com/380/230/animals" alt="">
<span><h4>heading2</h4></span>
</div>
<div class="card-desc">
<h3>Heading2</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, voluptatum! Dolor quo, perspiciatis
voluptas totam</p>
<a href="#" class="btn-card">Read</a>
</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
34
35
36
37
/* card details start */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto+Condensed:400,400i,700,700i');
section{
padding: 100px 0;
}
.details-card {
background: #ecf0f1;
}
.card-content {
background: #ffffff;
border: 4px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.card-img {
position: relative;
overflow: hidden;
border-radius: 0;
z-index: 1;
}
.card-img img {
width: 100%;
height: auto;
display: block;
}
.card-img span {
position: absolute;
top: 15%;
left: 12%;
background: #1ABC9C;
padding: 6px;
color: #fff;
font-size: 12px;
border-radius: 4px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular
Simple & Clean 404 Error Page Design
Bootstrap 4 Blog Carousel
bootstrap 4 card

Questions / Comments: