Vertical How It Works Component


Use our Bootstrap component to quickly and easily add a vertical “how it works” section to your website. This Bootstrap component can be used to explain the features and benefits of your product or service to potential customers. The component was creating using Bootstrap classes to ensure it matches the overall design of your existing website.

<section class="py-5">
	<div class="container">
		<!-- Heading -->
		<div class="row text-center mb-4">
			<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
				<p class="text-muted mb-0 fw-light">Steps</p>
				<h2>How It Works</h2>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum. Phasellus sagittis nisl vitae auctor sodales.</p>
			</div>
		</div><!-- Steps Wrap -->
		<div class="row justify-content-center">
			<div class="col-md-6">
				<!-- Step -->
				<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5">
					<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3rem;">
						1
					</div>
					<h5 class="mt-3">Headline</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
				<!-- Step -->
				<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5">
					<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3rem;">
						2
					</div>
					<h5 class="mt-3">Headline</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
				<!-- Step -->
				<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5">
					<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3rem;">
						3
					</div>
					<h5 class="mt-3">Headline</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
			</div>
		</div>
	</div>
</section>
To top