Bootstrap snippet and html example. single blog post card

<section id="blog" class="blog_area section-padding">
   <div class="container">			
		<div class="section-title text-center">
			<h2>Fresh News</h2>
			<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
		</div>				
		<div class="row text-center">					
			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.1s; animation-name: fadeInUp;">
				<div class="single_blog">
					<div class="blog-img">
						<img src="https://www.bootdey.com/image/380x280/FF00FF/000000" class="img-fluid" alt="image">
						<a href="blog.html">May 28</a>
					</div>
					<span><a href="blog.html">Development</a></span>
					<h2><a href="blog.html">Fast food is popular because it's convenient</a></h2>
					<a href="blog.html" class="main_btn">Read More</a>
				</div>						
			</div><!-- END COL -->					
			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInUp;">
				<div class="single_blog">
					<div class="blog-img">
						<img src="https://www.bootdey.com/image/380x280/FF00FF/000000" class="img-fluid" alt="image">
						<a href="blog.html">May 29</a>
					</div>
					<span><a href="blog.html">Technology</a></span>
					<h2><a href="blog.html">The incredible thing about Virtual Reality</a></h2>
					<a href="blog.html" class="main_btn">Read More</a>
				</div>						
			</div><!-- END COL -->					
			<div class="col-lg-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0" style="visibility: visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;">
				<div class="single_blog">
					<div class="blog-img">
						<img src="https://www.bootdey.com/image/380x280/FF00FF/000000" class="img-fluid" alt="image">
						<a href="blog.html">May 30</a>
					</div>
					<span><a href="blog.html">Fashion</a></span>
					<h2><a href="blog.html">For good results must be make good plan </a></h2>
					<a href="blog.html" class="main_btn">Read More</a>
				</div>						
			</div><!-- END COL -->						
		</div><!-- END ROW -->
	</div><!-- END CONTAINER -->
</section>

body{margin-top:20px;}
.blog_bg{background:#f4f5f7;}
.blog_area{padding-bottom:50px;}
.single_blog {
    background: #fff;
	box-shadow:0 10px 40px -10px rgba(0,64,128,.2);
	margin-bottom: 30px;
	padding: 30px;
}
@media only screen and (max-width:768px) { 
.single_blog {margin-bottom:30px;}
}
.blog-img{}
.blog-img img{position: relative;}
@media only screen and (max-width:768px) { 
.blog-img img{width:100%;}
}
.blog-img a {
	background: #554c86;
	padding: 7px 15px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	width: 90px;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
	line-height: 20px;
	display: inline-block;
	margin-top: 20px;
}
.single_blog h2 {
	font-weight: 700;
	line-height: 30px;
	font-size: 20px;
	margin-bottom: 0;
}
.single_blog h2 a{color:#1d293e;}
.single_blog h2 a:hover{color:#554c86;}
.single_blog span {
	text-transform: capitalize;
	padding: 0 10px;
	margin-bottom: 15px;
	display: inline-block;
	font-weight: 600;
	margin-top: 20px;
}
.single_blog span a{color:#554c86;}
.single_blog > a {
	background: #554c86;
	padding: 10px 30px;
	color: #fff;
	display: inline-block;
	margin-top: 20px;
	border-radius: 2px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.single_blog > a:hover{background:#0aa1d6;}
a{
text-decoration:none;    
}

.section-title {
    margin-bottom: 60px;
}
.text-center {
    text-align: center!important;
}

.section-title h2 {
    font-size: 45px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
    text-transform: capitalize;
}