Cover Hero with Logos


This code snippet is a simple cover hero section, featuring a prominently displayed featured image, a call to action message and a button. This kind of hero section is typically used to capture the user’s attention and encourage them to take a desired action, usually found at the top of the website. It is built using Bootstrap, which allows it to be responsive and adjust its layout based on the screen size it’s being viewed on, and provides consistent styling for the text, button, image and logos elements. There is a showcase of company logos at the bottom of the hero section that serves as a visual representation of the companies or brands that have partnered with or have used the service or product.

<section class="py-5 bg-light">
	<div class="container">
		<div class="row align-items-lg-center mb-5">
			<div class="col-md-6 mb-5 mb-md-0">
				<h1 class="display-3 fw-bold">Design Faster and Smarter with <span class="text-primary">Bootstrap</span></h1>
				<p class="lead mt-3 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar semper.</p><a class="btn btn-lg btn-primary" href="">Get Started</a>
			</div>
			<div class="col-md-5 col-md-6"><img alt="Image Right" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></div>
		</div>
		<div class="row d-lg-flex d-none text-center">
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo1.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo2.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo3.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo4.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo5.svg"></div>
		</div>
	</div>
</section>
To top