Hero Code Snippet


This code snippet is a hero section that features a headline, a small paragraph of text, and a call to action 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 and button elements. The design of this component is visually appealing and with the focus on clear messaging and easy user engagement.

<section class="bg-light text-center py-5">
	<div class="container pb-5 pt-5">
		<div class="pb-5 pt-5 row">
			<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
				<span>Loreum ipsum</span>
				<h1 class="display-3 fw-bold mb-3">Make Good Choices</h1>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit tellus eu.</p><a class="btn btn-lg btn-primary" href="">Learn more</a>
			</div>
		</div>
	</div>
</section>
To top