Bootsrapmarkup~30 mins

Accordion component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Build a Bootstrap Accordion Component

📖 Scenario: You are creating a simple FAQ section for a website using Bootstrap's accordion component. This will help users easily find answers by expanding and collapsing questions.

🎯 Goal: Build a functional Bootstrap accordion with three collapsible items, each with a question as the header and an answer as the body.

📋 What You'll Learn

Use Bootstrap 5 accordion structure

Create exactly three accordion items

Each item must have a unique id for collapse control

Use semantic HTML with button elements for toggling

Ensure accessibility with aria-controls and aria-expanded attributes

Accordion items should collapse and expand independently

💡 Why This Matters

🌍 Real World

Accordions are common in FAQs, menus, and content sections to save space and improve user experience by showing only relevant information.

💼 Career

Knowing how to implement Bootstrap components is valuable for front-end developers working on responsive and accessible websites quickly.

Progress0 / 4 steps

Create the basic accordion container

Create a div with class="accordion" and id="faqAccordion" to hold the accordion items.

Bootsrap

Need a hint?

The accordion container needs a class accordion and an id faqAccordion.

Add the first accordion item

Inside the div with id="faqAccordion", add the first accordion item with id="headingOne" for the header and id="collapseOne" for the collapsible body. The header button text should be "What is Bootstrap?" and the body text should be "Bootstrap is a CSS framework for building responsive websites.".

Bootsrap

Need a hint?

Use accordion-item, accordion-header, and accordion-button classes. The button toggles the collapse with data-bs-toggle and data-bs-target.

Add the second and third accordion items

Add two more accordion items inside the div with id="faqAccordion". Use id="headingTwo" and id="collapseTwo" for the second item, and id="headingThree" and id="collapseThree" for the third. The second header text is "How do I include Bootstrap?" with body "You can include Bootstrap via CDN or by downloading the files.". The third header text is "Is Bootstrap free to use?" with body "Yes, Bootstrap is open source and free to use.". Ensure each button toggles its respective collapse area and uses correct aria attributes.

Bootsrap


  
    
      
        What is Bootstrap?
      
    
    
      
        Bootstrap is a CSS framework for building responsive websites.

Need a hint?

Remember to add collapsed class to buttons that start closed and set aria-expanded="false".

Add Bootstrap CSS and JS links

Add the Bootstrap 5 CSS link inside the <head> and the Bootstrap 5 JavaScript bundle script before the closing </body> tag. Use the official Bootstrap CDN URLs for version 5.3. Make sure the accordion will work with these included.

Bootsrap




  
  
  FAQ Accordion

Need a hint?

Use the official Bootstrap 5.3 CDN links for CSS and JS bundle to enable styling and accordion functionality.