Cover Hero Example


This code snippet represents 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 and image elements. The call to action message is designed to complement the image and provide more information about the desired action.

<section class="bg-light py-5">
	<div class="container">
		<div class="row gx-4 align-items-center">
			<div class="col-md-6">
				<div class="me-md-2 me-lg-5"><img class="img-fluid rounded-3" src="https://freefrontend.dev/assets/square.png"></div>
			</div>
			<div class="col-md-6">
				<div class="ms-md-2 ms-lg-5 mt-5 mt-md-0">
					<span>Lorem ipsum</span>
					<h1 class="display-3 fw-bold mb-0">Bootstrap is</h1>
					<h1 class="display-3 fw-bold text-primary">Free. Fast. Easy</h1>
					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a class="btn btn-lg btn-primary" href="">Learn More</a>
				</div>
			</div>
		</div>
	</div>
</section>
To top