FAQ Code Block


This code snippet is a simple FAQ block built with Bootstrap to provide quick and easy access to information for users. It features 6 questions with accompanying icons, bold questions, and smaller font answers. The light background color is used to keep the design simple and easy to read. The icons are prominently displayed to help quickly identify the topic of each question, making the block user-friendly and visually appealing.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-3">
			<div class="col-lg-8 col-xl-7">
				<span class="text-muted">F.A.Q</span>
				<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
				<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
			</div>
		</div>
		<div class="row justify-content-center">
			<div class="col-md-10">
				<div class="row g-3 g-md-4">
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card bg-light p-4">
							<div class=" d-flex">
								<div class="text-muted me-4">
									<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
								</div>
								<div>
									<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
									<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top