Bootsrapmarkup~30 mins

Horizontal collapse in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Horizontal Collapse with Bootstrap

📖 Scenario: You are building a simple webpage where users can click a button to show or hide some content horizontally. This is useful for menus or side panels that slide open and closed.

🎯 Goal: Create a horizontal collapse section using Bootstrap. When the user clicks the button, the content area should expand or collapse horizontally.

📋 What You'll Learn

Use Bootstrap 5 classes and components

Create a button that toggles horizontal collapse

Create a collapsible content area that expands horizontally

Ensure the collapse works smoothly on button click

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Horizontal collapsible sections are common in navigation menus, sidebars, and interactive panels on websites and web apps.

💼 Career

Knowing how to implement Bootstrap's collapse component helps you build responsive, user-friendly interfaces quickly, a valuable skill for frontend web development jobs.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap

Create a basic HTML5 page with lang="en", meta charset="UTF-8", and viewport meta tag. Include Bootstrap 5 CSS from CDN inside the <head>. Inside the <body>, add a <div> with class container and inside it add a <button> with id="toggleButton" and text Toggle Horizontal Collapse.

Bootsrap

Need a hint?

Remember to include Bootstrap CSS from CDN inside the <head>. Add a button inside a container with the exact id="toggleButton" and text.

Add the collapsible content container

Below the <button id="toggleButton">, add a <div> with id="collapseContent" and classes collapse collapse-horizontal border bg-light p-3 mt-3. Inside this div, add the text Here is the horizontally collapsible content!.

Bootsrap




    
    
    
    Horizontal Collapse


    
        Toggle Horizontal Collapse

Need a hint?

Use the Bootstrap classes collapse and collapse-horizontal on the content div. Add some border and padding for better visibility.

Add the button attributes to toggle the collapse

Add the attributes data-bs-toggle="collapse" and data-bs-target="#collapseContent" to the <button id="toggleButton"> so it toggles the horizontal collapse on click.

Bootsrap




    
    
    
    Horizontal Collapse


    
        
        >Toggle Horizontal Collapse
        
            Here is the horizontally collapsible content!

Need a hint?

Add data-bs-toggle="collapse" and data-bs-target="#collapseContent" to the button. Also add accessibility attributes aria-expanded="false" and aria-controls="collapseContent".

Include Bootstrap JavaScript for collapse functionality

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

Bootsrap




    
    
    
    Horizontal Collapse


    
        Toggle Horizontal Collapse
        
            Here is the horizontally collapsible content!

Need a hint?

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive components like collapse.