Our Blog Code Block


This code snippet is a simple implementation of a blog layout that features four blog posts with images. It uses the Bootstrap framework to create a responsive and visually appealing design. Each blog post is composed of a featured image, a title, and a brief description. The layout is built using Bootstrap’s grid system, allowing the blog posts to automatically adjust to the size of the screen they’re being viewed on. This makes the blog easily readable on desktop, tablet, and mobile devices.

<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">
			<div class="col-md-6">
				<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 px-0 mb-3">
						<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
						<h3 class="fw-semibold my-2"><a class="text-dark text-decoration-none" href="">A short engaging title</a></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<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 px-0 mb-3">
						<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
						<h3 class="fw-semibold my-2"><a class="text-dark text-decoration-none" href="">A short engaging title</a></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<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 px-0 mb-3">
						<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
						<h3 class="fw-semibold my-2"><a class="text-dark text-decoration-none" href="">A short engaging title</a></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<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 px-0 mb-3">
						<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
						<h3 class="fw-semibold my-2"><a class="text-dark text-decoration-none" href="">A short engaging title</a></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="d-grid col-md-2 mx-auto">
			<a class="btn btn-primary btn-lg" href="">Read more</a>
		</div>
	</div>
</section>
To top