Bootsrapmarkup~30 mins

Why expandable content saves space in Bootsrap - See It in Action

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Why Expandable Content Saves Space

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Expandable content is used in FAQs, menus, and dashboards to keep pages clean and easy to navigate.

💼 Career

Knowing how to implement expandable content with Bootstrap is useful for front-end web developers building user-friendly interfaces.

Progress0 / 4 steps

Create the FAQ questions list

Create a div with class accordion and inside it add three div elements with class accordion-item. Each item should have a header with a button containing the question text: What is Bootstrap?, How does collapse work?, and Why use expandable content?.

Bootsrap

Need a hint?

Use Bootstrap's accordion structure with accordion-item, accordion-header, and a button with data-bs-toggle="collapse".

Add the collapsible answer sections

Below each question button, add a div with class accordion-collapse collapse and an id matching the button's data-bs-target attribute. Inside each, add a div with class accordion-body containing the answer text: Bootstrap is a CSS framework., Collapse toggles visibility of content., and Expandable content saves space on the page. respectively.

Bootsrap


  
    
      
        What is Bootstrap?
      
    
    
  
  
    
      
        How does collapse work?
      
    
    
  
  
    
      
        Why use expandable content?

Need a hint?

Each answer should be inside a div with accordion-collapse collapse classes and an id matching the button's data-bs-target.

Set the first answer to be expanded by default

Modify the first answer's collapse div to have the class accordion-collapse collapse show so it is visible when the page loads. Also set the first button's aria-expanded attribute to true.

Bootsrap


  
    
      
        What is Bootstrap?
      
    
    
      
        Bootstrap is a CSS framework.
      
    
  
  


# Change the first button aria-expanded to true and add 'show' class to first collapse div

Need a hint?

Add the show class to the first collapse div and set the first button's aria-expanded to true.

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 CDN URLs: CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css and JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. Wrap the accordion inside a <main> element with class="container my-4". Also add the basic HTML5 document structure with lang="en", charset="UTF-8", and viewport meta tag.

Bootsrap

Need a hint?

Include the Bootstrap CSS link in the <head> and the JS bundle script before </body>. Wrap the accordion in a <main> with container and margin classes.