Back to Discover
Bootstrap 5 Accordion FAQ Example with Icons

hunzala
Created Nov 04, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Google Fonts - Roboto -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

<!-- Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<style>
  body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 40px 0;
  }

  .faq-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .faq-header {
    text-align: center;
    color: white;
    margin-bottom: 40px;
  }

  .faq-header h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 10px;
  }

  .faq-header p {
    font-weight: 300;
    font-size: 1.1rem;
  }

  .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .accordion-button {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 20px 25px;
    background-color: white;
    color: #333;
    border: none;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .accordion-button:not(.collapsed) {
    background-color: #667eea;
    color: white;
    box-shadow: none;
  }

  .accordion-button:focus {
    box-shadow: none;
    border: none;
  }

  .accordion-button::after {
    display: none;
  }

  .accordion-icon {
    font-size: 24px;
    min-width: 24px;
  }

  .accordion-arrow {
    margin-left: auto;
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .accordion-button:not(.collapsed) .accordion-arrow {
    transform: rotate(180deg);
  }

  .accordion-body {
    padding: 25px;
    background-color: #f8f9fa;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
  }

  .accordion-button:hover {
    background-color: #f0f0f0;
  }

  .accordion-button:not(.collapsed):hover {
    background-color: #5568d3;
  }
</style>
</head>
<body>
  <div class="container faq-container">
    <div class="faq-header">
      <h1>Frequently Asked Questions</h1>
      <p>Find answers to common questions below</p>
    </div>

    <div class="accordion" id="faqAccordion">
      <!-- FAQ Item 1 -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
            <ion-icon name="help-circle-outline" class="accordion-icon"></ion-icon>
            <span>What is Bootstrap 5?</span>
            <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon>
          </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
            Bootstrap 5 is the latest major version of the popular front-end framework for building responsive, mobile-first websites. It includes new components, utilities, and improvements while removing jQuery dependency.
          </div>
        </div>
      </div>

      <!-- FAQ Item 2 -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
            <ion-icon name="code-slash-outline" class="accordion-icon"></ion-icon>
            <span>How do I customize the accordion?</span>
            <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon>
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
            You can customize the accordion by modifying the CSS styles, changing colors, fonts, spacing, and adding custom icons. Bootstrap also provides various classes and utilities for easy customization.
          </div>
        </div>
      </div>

      <!-- FAQ Item 3 -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
            <ion-icon name="color-palette-outline" class="accordion-icon"></ion-icon>
            <span>Can I use custom icons?</span>
            <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon>
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
            Absolutely! This example uses Ionicons, but you can easily swap them with Font Awesome, Material Icons, or any other icon library. Simply replace the ion-icon tags with your preferred icon markup.
          </div>
        </div>
      </div>

      <!-- FAQ Item 4 -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
            <ion-icon name="phone-portrait-outline" class="accordion-icon"></ion-icon>
            <span>Is this accordion mobile responsive?</span>
            <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon>
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
            Yes! Bootstrap 5 is mobile-first by design, which means this accordion automatically adapts to different screen sizes and looks great on all devices, from smartphones to desktop computers.
          </div>
        </div>
      </div>

      <!-- FAQ Item 5 -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
            <ion-icon name="rocket-outline" class="accordion-icon"></ion-icon>
            <span>Do I need JavaScript knowledge?</span>
            <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon>
          </button>
        </h2>
        <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
            Not necessarily! Bootstrap handles the accordion functionality automatically. However, basic JavaScript knowledge is helpful if you want to add custom behaviors or integrate the accordion with other features.
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap 5 JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
Comments (0)

No comments yet. Be the first!