Horizontal How It Works Example


Creating a “How It Works” section on your Bootstrap website is easier than ever with our free code example. Simply copy and paste the code into your Bootstrap website and you’ll be able to create a helpful, informative section for your users. This section can be used to explain the features and functions of your website and provide detailed instructions for users to follow.

<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-0">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 pt-5">
			<div class="col-lg-9">
				<div class="row">
					<div class="col-lg-4">
						<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0">
							<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:-3.5rem;">
								1
							</div>
							<h5 class="mt-3 mb-4">Headline</h5>
							<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0">
							<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: -3.5rem;">
								2
							</div>
							<h5 class="mt-3 mb-4">Headline</h5>
							<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0">
							<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: -3.5rem;">
								3
							</div>
							<h5 class="mt-3 mb-4">Headline</h5>
							<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top