Simple Our Blog Section


This code snippet allows you to create a professional-looking “our blog” section for your website. The design features two featured blog posts, each with a thumbnail image, title, date and brief excerpt. The snippet is built using Bootstrap, making it responsive and easy to customize to match the look and feel of your website. Simply add your own blog post content and images to create an engaging “our blog” section that showcases your latest or most popular articles.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-4 mb-md-5">
			<div class="col-xl-9 col-xxl-8">
				<span class="text-muted">Read More</span>
				<h2 class="display-5 fw-bold">Our Blog</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
		</div>
		<div class="row g-5">
			<div class="col-md-4">
				<div class="card border-0">
					<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></a>
					<div class="card-body p-0 text-center mt-4">
						<h5><a class="text-dark text-decoration-none" href="">A short engaging title</a></h5>
						<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card border-0">
					<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></a>
					<div class="card-body p-0 text-center mt-4">
						<h5><a class="text-dark text-decoration-none" href="">A short engaging title</a></h5>
						<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card border-0">
					<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></a>
					<div class="card-body p-0 text-center mt-4">
						<h5><a class="text-dark text-decoration-none" href="">A short engaging title</a></h5>
						<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top