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. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at.</p>
			</div>
		</div>
		<div class="row g-0 align-items-center">
			<div class="col-md-6"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			<div class="col-md-6">
				<div class="row">
					<div class="col-lg-12 col-xxl-10 col-xl-12">
						<div class="p-md-3 p-xl-5 mt-4 mt-md-0">
							<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 btn-primary" href="">Read more</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row g-0 align-items-center">
			<div class="col-md-6 order-2 order-md-1">
				<div class="row justify-content-end">
					<div class="col-lg-12 col-xxl-10 col-xl-12">
						<div class="p-md-3 p-xl-5 mt-4 mt-md-0">
							<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 btn-primary" href="">Read more</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 order-1 order-md-2">
				<div class="mt-5 mt-md-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
		</div>
	</div>
</section>
To top