Bootsrapmarkup~15 mins

Collapse component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Bootstrap Collapse Component

📖 Scenario: You want to add a section on your webpage that can show or hide extra information when a user clicks a button. This helps keep your page clean and organized.

🎯 Goal: Build a simple Bootstrap collapse component with a button that toggles the visibility of a content area.

📋 What You'll Learn

Use Bootstrap 5 classes and attributes

Create a button that toggles the collapse

Create a collapsible content section

Ensure the collapse works when the button is clicked

💡 Why This Matters

🌍 Real World

Collapsible sections are common on websites to hide extra details, FAQs, or menus, making pages cleaner and easier to navigate.

💼 Career

Knowing how to use Bootstrap components like collapse helps you quickly build interactive and responsive web pages, a valuable skill for front-end developers.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap CSS link

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head> section. Add an empty <body> section.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> so you can use Bootstrap styles.

Add a button to toggle the collapse

Inside the <body>, add a <button> with class btn btn-primary. Give it type="button", data-bs-toggle="collapse", and data-bs-target="#collapseExample" attributes. The button text should be Toggle Content.

Bootsrap




    
    
    
    Bootstrap Collapse Example

Need a hint?

The button needs data-bs-toggle="collapse" and data-bs-target="#collapseExample" to control the collapse.

Add the collapsible content section

Below the button, add a <div> with class="collapse" and id="collapseExample". Inside this div, add a <div> with class="card card-body" containing the text This is the collapsible content.

Bootsrap




    
    
    
    Bootstrap Collapse Example


    
        Toggle Content

Need a hint?

The collapsible content must have class="collapse" and the same id as the button's data-bs-target.

Add Bootstrap JavaScript bundle for collapse functionality

Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from the CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This enables the collapse toggle to work.

Bootsrap




    
    
    
    Bootstrap Collapse Example


    
        Toggle Content
    
    
        
            This is the collapsible content.

Need a hint?

The Bootstrap JavaScript bundle is needed for the collapse toggle to work. Add it just before the closing </body> tag.