Vertical Our Blog Template


This code snippet is for a vertical blog ‘My Blog’ section. It uses Bootstrap framework to create a clean, modern layout that is easy to navigate and visually appealing. The template is arranged in a vertical layout, with the blog posts stacked on top of each other. Each blog post is composed of a title, an image, and a brief description. This template is responsive, which makes it looks great on different screens sizes. The overall design focuses on user experience, readability, and simplicity.

<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 align-items-center gy-md-5">
			<div class="col-md-6">
				<div class="mt-4 mt-md-0"><img alt="" class="img-fluid rounded my-md-0 my-4" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-md-6">
				<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
				<h2 class="fw-semibold my-1">A short engaging title</h2>
				<div class="text-muted">
					10.10.2017
				</div>
				<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p><a class="btn-link" href="">Read more</a>
			</div>
			<div class="col-md-6">
				<div class="mt-4 mt-md-0"><img alt="" class="img-fluid rounded my-md-0 my-4" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-md-6">
				<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
				<h2 class="fw-semibold my-1">A short engaging title</h2>
				<div class="text-muted">
					10.10.2017
				</div>
				<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p><a class="btn-link" href="">Read more</a>
			</div>
			<div class="col-md-6">
				<div class="mt-4 mt-md-0"><img alt="" class="img-fluid rounded my-md-0 my-4" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-md-6">
				<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
				<h2 class="fw-semibold my-1">A short engaging title</h2>
				<div class="text-muted">
					10.10.2017
				</div>
				<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p><a class="btn-link" href="">Read more</a>
			</div>
		</div>
	</div>
</section>
To top