How It Works Section with Icons


This Bootstrap How It Works section provides an easy way to create a visually appealing and organized three-step process for your website, with icons and arrows arranged horizontally to make it easy to understand the process. This code snippet is a great way to communicate the value of a product or service to potential customers.

<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-lg-9">
				<div class="row">
					<!-- Step -->
					<div class="col-lg-4">
						<div class="text-center position-relative">
							<!-- Step Icon -->
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width:150px;height:150px">
								<svg class="bi bi-fingerprint text-secondary fs-1" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z"></path>
								<path d="M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z"></path>
								<path d="M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z"></path>
								<path d="M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z"></path>
								<path d="M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Step 1</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p><!-- Arrow Icon -->
							<div class="arrow-icon position-absolute d-none d-lg-block" style="top:50px; right:-25px">
								<svg class="bi bi-arrow-right" height="30" viewbox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
								<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
							</div>
						</div>
					</div><!-- Step -->
					<div class="col-lg-4">
						<div class="text-center position-relative">
							<!-- Step Icon -->
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 150px;height: 150px;">
								<svg class="bi bi-lightbulb text-secondary" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Step 2</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p><!-- Arrow Icon -->
							<div class="arrow-icon d-none d-lg-block position-absolute" style="top:50px; right:-25px">
								<svg class="bi bi-arrow-right" height="30" viewbox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
								<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
							</div>
						</div>
					</div><!-- Step -->
					<div class="col-lg-4">
						<div class="text-center position-relative">
							<!--- Step Icon -->
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 150px;height: 150px;">
								<svg class="bi bi-mic text-secondary" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"></path>
								<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Step 3</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top