Our Blog Section Component


This code snippet represents a blog section component that features a large, prominently displayed featured post, which includes a title, a description and an image. The featured post is designed to draw the user’s attention, and it is intended to be the main article on the page. Next to the featured post, there are four smaller posts which contain only an image and a title. The layout is built using Bootstrap Framework, making it responsive and automatically adjust its layout according to the screen size it’s being viewed on. This allows the component to be easily included in different parts of a website and maintain consistency throughout.

<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/square.png"></a>
					<div class="card-body px-0">
						<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
						<h3 class="fw-semibold my-2"><a class="text-decoration-none text-dark" href="">A short engaging title</a></h3>
						<p>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>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="row">
					<div class="col-6">
						<div class="card border-0">
							<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></a>
							<div class="card-body px-0">
								<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
								<h3 class="fw-semibold"><a class="text-decoration-none text-dark" href="">A short engaging post title</a></h3>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="card border-0">
							<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></a>
							<div class="card-body px-0">
								<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
								<h3 class="fw-semibold"><a class="text-decoration-none text-dark" href="">A short engaging post title</a></h3>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="card border-0">
							<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></a>
							<div class="card-body px-0">
								<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
								<h3 class="fw-semibold"><a class="text-decoration-none text-dark" href="">A short engaging post title</a></h3>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="card border-0">
							<a href=""><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></a>
							<div class="card-body px-0">
								<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
								<h3 class="fw-semibold"><a class="text-decoration-none text-dark" href="">A short engaging post title</a></h3>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top