How it Works Code Snippet


This code snippet provides a visually appealing way to display a process or series of steps, such as a “how it works” section on a website. The design features four vertical steps, with icons and text descriptions for each step. Simply add your own content to customize the snippet for your specific use case. The snippet is built using Bootstrap, making it responsive and easy to integrate into any project.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-4">
			<div class="col-lg-8 col-xxl-7">
				<span class="text-muted">Steps</span>
				<h2 class="display-5 fw-bold">How it Works</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 mx-auto">
				<div class="row">
					<div class="col-auto text-center">
						<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
							1
						</div>
						<div class="text-muted fw-light mt-1">
							Step
						</div>
					</div>
					<div class="col">
						<div class="card rounded-0 bg-light py-4 px-5 mb-5">
							<h5>Headline</h5>
							<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-auto text-center">
						<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
							2
						</div>
						<div class="text-muted fw-light mt-1">
							Step
						</div>
					</div>
					<div class="col">
						<div class="card rounded-0 bg-light py-4 px-5 mb-5">
							<h5>Headline</h5>
							<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-auto text-center">
						<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
							3
						</div>
						<div class="text-muted fw-light mt-1">
							Step
						</div>
					</div>
					<div class="col">
						<div class="card rounded-0 bg-light py-4 px-5 mb-5">
							<h5>Headline</h5>
							<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top