Membuat Halaman FAQ dengan Bootstrap

Membuat Halaman FAQ dengan Bootstrap

—

by

Webbiz.ID
in

Berikut ini adalah contoh source code untuk membuat halaman FAQ yang elegan menggunakan Bootstrap

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Halaman FAQ</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .accordion-item {
      margin-bottom: 20px;
    }

    .accordion-header {
      background-color: #f8f9fa;
      padding: 10px;
      cursor: pointer;
    }

    .accordion-header:hover {
      background-color: #e9ecef;
    }

    .accordion-body {
      padding: 10px;
      display: none;
    }

    .accordion-body.show {
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="text-center">Pertanyaan yang Sering Diajukan</h2>
    <div class="accordion" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Apa itu Bootstrap?
          </button>
        </h2>
        <div id="collapseOne" class="accordion-body show" aria-labelledby="headingOne" data-parent="#faqAccordion">
          Bootstrap adalah kerangka kerja CSS yang populer untuk membangun tata letak dan komponen web yang responsif.
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Bagaimana cara menggunakan Bootstrap?
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-body" aria-labelledby="headingTwo" data-parent="#faqAccordion">
          Anda dapat menggunakan Bootstrap dengan menambahkan file CSS dan JavaScript Bootstrap ke halaman HTML Anda, dan menggunakan kelas-kelas Bootstrap yang telah disediakan untuk membangun tampilan web yang responsif.
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Apakah Bootstrap gratis?
          </button>
        </h2>
        <div id="collapseThree" class="accordion-body" aria-labelledby="headingThree" data-parent="#faqAccordion">
          Ya, Bootstrap adalah perangkat lunak sumber terbuka yang dapat digunakan secara gratis.
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
HTML
Halaman FAQ

Pertanyaan yang Sering Diajukan

Bootstrap adalah kerangka kerja CSS yang populer untuk membangun tata letak dan komponen web yang responsif.

Anda dapat menggunakan Bootstrap dengan menambahkan file CSS dan JavaScript Bootstrap ke halaman HTML Anda, dan menggunakan kelas-kelas Bootstrap yang telah disediakan untuk membangun tampilan web yang responsif.

Ya, Bootstrap adalah perangkat lunak sumber terbuka yang dapat digunakan secara gratis.

Anda dapat menggunakan kode di atas sebagai dasar untuk membuat halaman FAQ yang elegan dengan menggunakan Bootstrap. Anda dapat menambahkan lebih banyak pertanyaan dan jawaban sesuai kebutuhan Anda dengan menyalin dan mengubah bagian kode yang relevan.

Baca juga:

Pastikan Anda telah menyertakan file CSS dan JavaScript Bootstrap yang diperlukan dan mengatur struktur HTML dengan benar sesuai dengan contoh di atas. Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat tampilan yang responsif dan menarik untuk halaman FAQ Anda.

Artikel Terbaru ⭐