Grid system FAQ section with theme background bottom bar

Frequently ask Question with arrow

Navigate through our FAQ section, organized in a grid layout, and enhanced with a sleek bottom bar for easy navigation and a polished user experience.

HTML

<section class="ezy__faq15" id="ezy__faq15">
  <div class="container">
    
    <div class="row">
      <div class="col-12 col-lg-7 text-center text-md-start ps-4 ps-lg-5">
        <h2 class="ezy__faq15-heading">Frequently Asked Questions</h2>
        <p class="ezy__faq15-sub-heading">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad dolorem labore assumenda, eveniet culpa nisi
          rerum, quia laborum similique nemo molestiae sit amet cumque dolorum!
        </p>
      </div>
    </div>
    
    
    <div class="row text-center text-md-start">
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
            <div class="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="ezy__faq15-card-title mb-3">What Shipping Options do you have?</h5>
            <p class="ezy__faq15-card-text mb-0">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
    </div>
    
    <div class="row mt-4">
      <div class="col-12 text-center">
        <div class="ezy__faq15-footer p-3 py-md-4 py-lg-5">
          <h4>Have any additional questions?</h4>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, odio fuga!</p>
          <button class="btn btn-primary">Get in touch</button>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__faq15 {
  /* Bootstrap variables */
  --bs-body-color: #252d39;
  --bs-body-bg: rgb(255, 255, 255);

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-card-bg: transparent;
  --ezy-footer-bg: #252d39;
  --ezy-footer-color: #fff;

  background-color: var(--bs-body-bg);
  overflow: hidden;
  padding: 60px 0;
}

@media (min-width: 768px) {
  .ezy__faq15 {
    padding: 100px 0;
  }
}

/* Gray Block Style */
.gray .ezy__faq15,
.ezy__faq15.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq15,
.ezy__faq15.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);

  /* Easy Frontend variables */
  --ezy-footer-bg: rgb(11, 23, 39);
}

/* Dark Block Style */
.dark .ezy__faq15,
.ezy__faq15.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);

  /* Easy Frontend variables */
  --ezy-footer-bg: rgb(30, 39, 53);
}

.ezy__faq15-heading {
  font-weight: bold;
  font-size: 32px;
  line-height: 45px;
  color: var(--bs-body-color);
}

@media (min-width: 991px) {
  .ezy__faq15-heading {
    font-size: 45px;
    line-height: 65px;
  }
}

.ezy__faq15-sub-heading {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: var(--bs-body-color);
  opacity: 0.8;
}

.ezy__faq15 .card {
  background-color: var(--ezy-card-bg);
  color: var(--bs-body-color);
  border: 0 !important;
}

.ezy__faq15-card-title {
  font-size: 20px;
  font-weight: 700;
}

.ezy__faq15-card-text {
  color: var(--bs-body-color);
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.8;
}

.ezy__faq15-card-icon {
  background-color: var(--ezy-theme-color);
  color: #fff;
  font-size: 20px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

/* faq footer */
.ezy__faq15-footer {
  background-color: var(--ezy-footer-bg);
  border-radius: 10px;
  color: var(--ezy-footer-color);
}

.ezy__faq15-footer h4 {
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
}

.ezy__faq15-footer p {
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.5;
}

@media (min-width: 991px) {
  .ezy__faq15-footer h4 {
    font-size: 45px;
    line-height: 60px;
  }
}

.ezy__faq15-footer .btn {
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--ezy-theme-color);
  border-color: var(--ezy-theme-color);
}

.ezy__faq15-footer .btn:hover {
  background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
  border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
</style>

Bootstrap

<section class="ezy__faq15 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
  <div class="container px-16 md:px-8 lg:px-28">
    <div class="grid grid-cols-12">
      <div class="col-span-12 lg:col-span-7 text-center md:text-start pl-6 lg:pl-12">
        <h2 class="font-bold text-[35px] leading-[45px] md:text-[45px] md:leading-[65px]">
          Frequently Asked Questions
        </h2>
        <p class="text-base leading-6 font-medium opacity-80 mb-2">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad dolorem labore assumenda, eveniet culpa nisi
          rerum, quia laborum similique nemo molestiae sit amet cumque dolorum!
        </p>
      </div>
    </div>
    
    <div class="grid grid-cols-12 text-center md:text-start">
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
      
      <div class="col-span-12 md:col-span-6 lg:col-span-4">
        <div class="">
          <div class="flex flex-col items-center md:items-start p-6 lg:p-12">
            <div
              class="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6"
            >
              <i class="fa-solid fa-question"></i>
            </div>

            <h5 class="text-xl font-bold mb-4">What Shipping Options do you have?</h5>
            <p class="text-base leading-snug opacity-80 mb-2">
              Partner removes the hassle and confusion that comes from managing your tax burden effectively.
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="grid grid-cols-12 mt-6">
      <div class="col-span-12 text-center">
        <div class="bg-[#252d39] dark:bg-[#1E2735] rounded-xl text-white p-4 md:py-6 lg:py-12">
          <h4 class="text-[32px] leading-[45px] lg:text-[45px] lg:leading-[60px] font-bold mb-2">
            Have any additional questions?
          </h4>
          <p class="text-[17px] leading-normal opacity-50 mb-2">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, odio fuga!
          </p>
          <button
            class="bg-blue-600 hover:bg-opacity-90 text-white font-bold border border-blue-600 py-3 px-6 rounded transition mt-4 mb-0"
          >
            Get in touch
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind CSS

React JS

import React from "react";
import { Button, Card, Col, Container, Row } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";

const faqList = [
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
];

const Faq15 = () => {
	return (
		<section className="ezy__faq15" id="ezy__faq15">
			<Container>
				<Row>
					<Col
						xs={12}
						lg={7}
						className="text-center text-md-start ps-4 ps-lg-5"
					>
						<h2 className="ezy__faq15-heading">Frequently Asked Questions</h2>
						<p className="ezy__faq15-sub-heading">
							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad
							dolorem labore assumenda, eveniet culpa nisi rerum, quia laborum
							similique nemo molestiae sit amet cumque dolorum!
						</p>
					</Col>
				</Row>
				<Row className="text-center text-md-start">
					{faqList.map((faq, i) => (
						<Col xs={12} md={6} lg={4} key={i}>
							<Card>
								<Card.Body className="d-flex flex-column align-items-center align-items-md-start p-4 p-lg-5">
									<div className="ezy__faq15-card-icon d-flex justify-content-center align-items-center mb-4">
										<FontAwesomeIcon icon={faQuestion} />
									</div>
									<h5 className="ezy__faq15-card-title mb-3">{faq.question}</h5>
									<p className="ezy__faq15-card-text mb-0">{faq.answer}</p>
								</Card.Body>
							</Card>
						</Col>
					))}
				</Row>
				<Row className="mt-4">
					<Col xs={12} className="text-center">
						<div className="ezy__faq15-footer p-3 py-md-4 py-lg-5">
							<h4>Have any additional questions?</h4>
							<p>
								Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut,
								odio fuga!
							</p>
							<Button variant="primary">Get in touch</Button>
						</div>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq15 {
	/* Bootstrap variables */
	--bs-body-color: #252d39;
	--bs-body-bg: rgb(255, 255, 255);

	/* Easy Frontend variables */
	--ezy-theme-color: rgb(13, 110, 253);
	--ezy-theme-color-rgb: 13, 110, 253;
	--ezy-card-bg: transparent;
	--ezy-footer-bg: #252d39;
	--ezy-footer-color: #fff;

	background-color: var(--bs-body-bg);
	overflow: hidden;
	padding: 60px 0;
}

@media (min-width: 768px) {
	.ezy__faq15 {
		padding: 100px 0;
	}
}

/* Gray Block Style */
.gray .ezy__faq15,
.ezy__faq15.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq15,
.ezy__faq15.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(30, 39, 53);

	/* Easy Frontend variables */
	--ezy-footer-bg: rgb(11, 23, 39);
}

/* Dark Block Style */
.dark .ezy__faq15,
.ezy__faq15.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(11, 23, 39);

	/* Easy Frontend variables */
	--ezy-footer-bg: rgb(30, 39, 53);
}

.ezy__faq15-heading {
	font-weight: bold;
	font-size: 32px;
	line-height: 45px;
	color: var(--bs-body-color);
}

@media (min-width: 991px) {
	.ezy__faq15-heading {
		font-size: 45px;
		line-height: 65px;
	}
}

.ezy__faq15-sub-heading {
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	color: var(--bs-body-color);
	opacity: 0.8;
}

.ezy__faq15 .card {
	background-color: var(--ezy-card-bg);
	color: var(--bs-body-color);
	border: 0 !important;
}

.ezy__faq15-card-title {
	font-size: 20px;
	font-weight: 700;
}

.ezy__faq15-card-text {
	color: var(--bs-body-color);
	font-size: 16px;
	line-height: 1.3;
	opacity: 0.8;
}

.ezy__faq15-card-icon {
	background-color: var(--ezy-theme-color);
	color: #fff;
	font-size: 20px;
	height: 40px;
	width: 40px;
	border-radius: 50%;
}

/* faq footer */
.ezy__faq15-footer {
	background-color: var(--ezy-footer-bg);
	border-radius: 10px;
	color: var(--ezy-footer-color);
}

.ezy__faq15-footer h4 {
	font-weight: 700;
	font-size: 32px;
	line-height: 45px;
}

.ezy__faq15-footer p {
	font-size: 17px;
	line-height: 1.5;
	opacity: 0.5;
}

@media (min-width: 991px) {
	.ezy__faq15-footer h4 {
		font-size: 45px;
		line-height: 60px;
	}
}

.ezy__faq15-footer .btn {
	padding: 10px 25px;
	font-size: 16px;
	font-weight: 500;
	background-color: var(--ezy-theme-color);
	border-color: var(--ezy-theme-color);
}

.ezy__faq15-footer .btn:hover {
	background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
	border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
</style>

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";

const faqList = [
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
	{
		question: "What Shipping Options do you have?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively.",
	},
];

const Faq15 = () => {
	return (
		<section className="ezy__faq15 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
			<div className="container px-16 md:px-8 lg:px-28">
				<div className="grid grid-cols-12">
					<div className="col-span-12 lg:col-span-7 text-center md:text-start pl-6 lg:pl-12">
						<h2 className="font-bold text-[35px] leading-[45px] md:text-[45px] md:leading-[65px]">
							Frequently Asked Questions
						</h2>
						<p className="text-base leading-6 font-medium opacity-80 mb-2">
							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad
							dolorem labore assumenda, eveniet culpa nisi rerum, quia laborum
							similique nemo molestiae sit amet cumque dolorum!
						</p>
					</div>
				</div>
				{/*  faqs  */}
				<div className="grid grid-cols-12 text-center md:text-start">
					{faqList.map((faq, i) => (
						<div className="col-span-12 md:col-span-6 lg:col-span-4" key={i}>
							<div>
								<div className="flex flex-col items-center md:items-start p-6 lg:p-12">
									<div className="bg-blue-600 text-white text-xl h-10 w-10 rounded-full flex justify-center items-center mb-6">
										<FontAwesomeIcon icon={faQuestion} />
									</div>

									<h5 className="text-xl font-bold mb-4">{faq.question}</h5>
									<p className="text-base leading-snug opacity-80 mb-2">
										{faq.answer}
									</p>
								</div>
							</div>
						</div>
					))}
				</div>

				<div className="grid grid-cols-12 mt-6">
					<div className="col-span-12 text-center">
						<div className="bg-[#252d39] dark:bg-[#1E2735] rounded-xl text-white p-4 md:py-6 lg:py-12">
							<h4 className="text-[32px] leading-[45px] lg:text-[45px] lg:leading-[60px] font-bold mb-2">
								Have any additional questions?
							</h4>
							<p className="text-[17px] leading-normal opacity-50 mb-2">
								Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut,
								odio fuga!
							</p>
							<button className="bg-blue-600 hover:bg-opacity-90 text-white font-bold border border-blue-600 py-3 px-6 rounded transition mt-4 mb-0">
								Get in touch
							</button>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #13FAQ with grid layout and a bottom bar

Available resources

Share with

Tags

You may also like