FAQ component / section

Bootstrap 5 FAQ

Responsive FAQ with Bootstrap 5. Templates include accordion faq, collapse FAQ, FAQ section & customized Bootstrap FAQ components.

FAQ is an abbreviation from "Frequently Asked Questions", FAQ is usually a section of a page or a full page itself. Building a FAQ with the latest Bootstrap 5 usually requires using components like accordion or collapse.


Basic examples

FAQ with Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

                      <div class="accordion w-100" id="basicAccordion">
                        <div class="accordion-item">
                          <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"
                              data-mdb-target="#basicAccordionCollapseOne" aria-expanded="false"
                              aria-controls="collapseOne">
                              Question #1
                            </button>
                          </h2>
                          <div id="basicAccordionCollapseOne" class="accordion-collapse collapse"
                            aria-labelledby="headingOne" data-mdb-parent="#basicAccordion" style="">
                            <div class="accordion-body">
                              <strong>This is the first item's accordion body.</strong> It is shown by default,
                              until the collapse plugin adds the appropriate classes that we use to style each
                              element. These classes control the overall appearance, as well as the showing and
                              hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                              our default variables. It's also worth noting that just about any HTML can go within
                              the <code>.accordion-body

Static FAQ section

FAQ

Find the answers for the most frequently asked questions below

A simple question?

Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner.

A question that is longer then the previous one?

Yes, it is possible! You can cancel your subscription anytime in your account. Once the subscription is cancelled, you will not be charged next month.

A simple question?

Currently, we only offer monthly subscription. You can upgrade or cancel your monthly account at any time with no further obligation.

A simple question?

Yes. Go to the billing section of your dashboard and update your payment information.

A simple question?

Unfortunately no. We do not issue full or partial refunds for any reason.

Another question that is longer than usual

Of course! We’re happy to offer a free plan to anyone who wants to try our service.


                      <!--Section: FAQ-->
                      <section>
                        <h3 class="text-center mb-4 pb-2 text-primary fw-bold">FAQ</h3>
                        <p class="text-center mb-5">
                          Find the answers for the most frequently asked questions below
                        </p>

                        <div class="row">
                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="far fa-paper-plane text-primary pe-2"></i> A simple
                              question?</h6>
                            <p>
                              <strong><u>Absolutely!</u></strong> We work with top payment companies which guarantees
                              your
                              safety and
                              security. All billing information is stored on our payment processing partner.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-pen-alt text-primary pe-2"></i> A question
                              that
                              is longer then the previous one?</h6>
                            <p>
                              <strong><u>Yes, it is possible!</u></strong> You can cancel your subscription anytime in
                              your
                              account. Once the subscription is
                              cancelled, you will not be charged next month.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-user text-primary pe-2"></i> A simple
                              question?
                            </h6>
                            <p>
                              Currently, we only offer monthly subscription. You can upgrade or cancel your monthly
                              account at any time with no further obligation.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-rocket text-primary pe-2"></i> A simple
                              question?
                            </h6>
                            <p>
                              Yes. Go to the billing section of your dashboard and update your payment information.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-home text-primary pe-2"></i> A simple
                              question?
                            </h6>
                            <p><strong><u>Unfortunately no</u>.</strong> We do not issue full or partial refunds for any
                              reason.</p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-book-open text-primary pe-2"></i> Another
                              question that is longer than usual</h6>
                            <p>
                              Of course! We’re happy to offer a free plan to anyone who wants to try our service.
                            </p>
                          </div>
                        </div>
                      </section>
                      <!--Section: FAQ-->
                    

FAQ with contact form

Standard length question?

Higlighted short answer. And some kind of detailed list.

  • list item 1
  • list item 2
  • list item 3

Short question?

Higlighted short answer.

Second part of the answer with more details.

Final part of the answer full of detais and Lorem ipsum dolor sit amet consectetur adipisicing elit.

The longest question in this faq. Made up of two sentences in order to span to the next line?

Higlighted short answer.

Second part of the answer with more details.

Final part of the answer full of detais and Lorem ipsum dolor sit amet consectetur adipisicing elit.

Slightly longer question?

Higlighted short answer.

Second part of the answer with more details.

Final part of the answer full of detais and Lorem ipsum dolor sit amet consectetur adipisicing elit.

Still have any questions? Contact us to get your answer!


                      <!--Section: FAQ-->
                      <section>
                        <h3 class="text-center mb-4 pb-2 text-primary fw-bold">FAQ</h3>
                        <p class="text-center mb-5">
                          Find the answers for the most frequently asked questions below
                        </p>

                        <div class="row">
                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="far fa-paper-plane text-primary pe-2"></i> A simple
                              question?</h6>
                            <p>
                              <strong><u>Absolutely!</u></strong> We work with top payment companies which guarantees
                              your safety and
                              security. All billing information is stored on our payment processing partner.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-pen-alt text-primary pe-2"></i> A question
                              that is longer then the previous one?</h6>
                            <p>
                              <strong><u>Yes, it is possible!</u></strong> You can cancel your subscription anytime in
                              your account. Once the subscription is
                              cancelled, you will not be charged next month.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-user text-primary pe-2"></i> A simple
                              question?</h6>
                            <p>
                              Currently, we only offer monthly subscription. You can upgrade or cancel your monthly
                              account at any time with no further obligation.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-rocket text-primary pe-2"></i> A simple
                              question?</h6>
                            <p>
                              Yes. Go to the billing section of your dashboard and update your payment information.
                            </p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-home text-primary pe-2"></i> A simple
                              question?</h6>
                            <p><strong><u>Unfortunately no</u>.</strong> We do not issue full or partial refunds for any
                              reason.</p>
                          </div>

                          <div class="col-md-6 col-lg-4 mb-4">
                            <h6 class="mb-3 text-primary"><i class="fas fa-book-open text-primary pe-2"></i> Another
                              question that is longer than usual</h6>
                            <p>
                              Of course! We’re happy to offer a free plan to anyone who wants to try our service.
                            </p>
                          </div>
                        </div>
                      </section>
                      <!--Section: FAQ-->
                    

Customized collapse FAQ

FAQ with short answers visible


                      <div class="list-group w-100">
                        <a href="#shortExampleAnswer1collapse" data-mdb-toggle="collapse" aria-expanded="false"
                          aria-controls="shortExampleAnswer1collapse" class="list-group-item list-group-item-action">
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Question 1</h5>
                          </div>
                          <p class="mb-1">
                            Short & concise version of the answer.
                          </p>
                          <small><u>Learn more</u></small>
                          <!-- Collapsed content -->
                          <div class="collapse mt-3" id="shortExampleAnswer1collapse">
                            Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                            high
                            life accusamus terry richardson ad
                            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                            sapiente ea proident.
                          </div>
                        </a>
                        <a href="#shortExampleAnswer2collapse" data-mdb-toggle="collapse" aria-expanded="false"
                          aria-controls="shortExampleAnswer1collapse" class="list-group-item list-group-item-action">
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Question 2</h5>
                          </div>
                          <p class="mb-1">
                            Short & concise version of the answer.
                          </p>
                          <small class="text-muted"><u>Learn more</u></small>
                          <!-- Collapsed content -->
                          <div class="collapse mt-3" id="shortExampleAnswer2collapse">
                            Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                            high
                            life accusamus terry richardson ad
                            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                            sapiente ea proident.
                          </div>
                        </a>
                        <a href="#shortExampleAnswer3collapse" data-mdb-toggle="collapse" aria-expanded="false"
                          aria-controls="shortExampleAnswer1collapse" class="list-group-item list-group-item-action">
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Question 3</h5>
                          </div>
                          <p class="mb-1">
                            Short & concise version of the answer.
                          </p>
                          <small class="text-muted"><u>Learn more</u></small>
                          <!-- Collapsed content -->
                          <div class="collapse mt-3" id="shortExampleAnswer3collapse">
                            Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                            high
                            life accusamus terry richardson ad
                            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                            sapiente ea proident.
                          </div>
                        </a>
                      </div>
                    

FAQ style options

Disabled

Highlighted

With small icons

With large icons


                      <div class="w-100">

                        <!--Disabled-->
                        <p class="mb-1">Disabled</p>
                        <div class="list-group">
                          <a href="#disabledAnswer1collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="disabledAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="mb-1">Question 1</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="disabledAnswer1collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#disabledAnswer2collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="disabledAnswer1collapse"
                            class="list-group-item list-group-item-action disabled">
                            <div class="d-flex w-100 justify-content-between my-2">
                              <h5 class="mb-1">Disabled answer</h5>
                            </div>
                            <p class="mb-1">
                              This answer is disabled
                            </p>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="disabledAnswer2collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#disabledAnswer3collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="disabledAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="mb-1">Question 3</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small class="text-muted"><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="disabledAnswer3collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                        </div>

                        <!--Highlighted-->
                        <p class="mb-1 mt-4">Highlighted</p>
                        <div class="list-group">
                          <a href="#highlightedAnswer1collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="highlightedAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="mb-1">Question 1</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="highlightedAnswer1collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#highlightedAnswer2collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="highlightedAnswer1collapse"
                            class="list-group-item list-group-item-action bg-info text-white border-0">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="mb-1">Highlighted question?</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small class=" text-white"><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="highlightedAnswer2collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#highlightedAnswer3collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="highlightedAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="mb-1">Question 3</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small class="text-muted"><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="highlightedAnswer3collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                        </div>

                        <!--With small icons-->
                        <p class="mb-1 mt-4">With small icons</p>
                        <div class="accordion">
                          <a href="#smallAnswer1collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="smallAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="my-2 w-100"><i class="fas fa-question me-2"></i>Question 1</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="smallAnswer1collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#smallAnswer2collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="smallAnswer2collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <h5 class="my-2 w-100"><i class="fas fa-question-circle me-2"></i>Question 2</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small class="text-muted"><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="smallAnswer2collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                          <a href="#smallAnswer3collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="smallAnswer3collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">

                              <h5 class="my-2 w-100"><i class="far fa-question-circle me-2"></i>Question 3</h5>
                            </div>
                            <p class="mb-1">
                              Short & concise version of the answer.
                            </p>
                            <small class="text-muted"><u>Learn more</u></small>
                            <!-- Collapsed content -->
                            <div class="collapse mt-3" id="smallAnswer3collapse">
                              Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim eiusmod
                              high
                              life accusamus terry richardson ad
                              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                              sapiente ea proident.
                            </div>
                          </a>
                        </div>

                        <!--With large icons-->
                        <p class="mb-1 mt-4">With large icons</p>
                        <div class="accordion">
                          <a href="#largeAnswer1collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="largeAnswer1collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <div class="row w-100">
                                <div class="col-1 text-center d-flex align-items-center"><i
                                    class="fas fa-money-bill me-2 fa-3x"></i></div>
                                <div class="col-10">
                                  <h5 class="my-2">Question about price?</h5>

                                  <p class="mb-1">
                                    Short & concise version of the answer.
                                  </p>
                                  <small class="text-muted"><u>Learn more</u></small>
                                  <!-- Collapsed content -->
                                  <div class="collapse mt-3" id="largeAnswer1collapse">
                                    Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim
                                    eiusmod
                                    high
                                    life accusamus terry richardson ad
                                    squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                    sapiente ea proident.
                                  </div>
                                </div>
                              </div>
                            </div>


                          </a>
                          <a href="#largeAnswer2collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="largeAnswer2collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <div class="row w-100">
                                <div class="col-1 text-center d-flex align-items-center"><i
                                    class="fas fa-user-cog me-2 fa-3x"></i></div>
                                <div class="col-10">
                                  <h5 class="my-2">Question about technical support?</h5>

                                  <p class="mb-1">
                                    Short & concise version of the answer.
                                  </p>
                                  <small class="text-muted"><u>Learn more</u></small>
                                  <!-- Collapsed content -->
                                  <div class="collapse mt-3" id="largeAnswer2collapse">
                                    Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim
                                    eiusmod
                                    high
                                    life accusamus terry richardson ad
                                    squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                    sapiente ea proident.
                                  </div>
                                </div>
                              </div>
                            </div>


                          </a>
                          <a href="#largeAnswer3collapse" data-mdb-toggle="collapse" aria-expanded="false"
                            aria-controls="largeAnswer3collapse" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                              <div class="row w-100">
                                <div class="col-1 text-center d-flex align-items-center"><i
                                    class="fas fa-dragon me-2 fa-3x"></i></div>
                                <div class="col-10">
                                  <h5 class="my-2">Question about dragons?</h5>

                                  <p class="mb-1">
                                    Short & concise version of the answer.
                                  </p>
                                  <small class="text-muted"><u>Learn more</u></small>
                                  <!-- Collapsed content -->
                                  <div class="collapse mt-3" id="largeAnswer3collapse">
                                    Detailed and comprehensive answer goes here. pariatur cliche reprehenderit, enim
                                    eiusmod
                                    high
                                    life accusamus terry richardson ad
                                    squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                    sapiente ea proident.
                                  </div>
                                </div>
                              </div>
                            </div>


                          </a>
                        </div>


                      </div>