What is Horizontal collapse in Bootsrap?

Bootsrapmarkup~5 mins

Horizontal collapse in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Horizontal collapse lets you hide or show content by sliding it left or right. It helps keep pages clean and organized.

To hide a sidebar menu that appears from the left or right.

To show extra options or filters horizontally without cluttering the page.

To create a horizontal accordion effect for content sections.

To save space on small screens by collapsing wide content.

To improve user experience by toggling horizontal panels smoothly.

Syntax

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Horizontal Collapse
</button>

<div class="collapse collapse-horizontal" id="collapseExample">
  <div class="card card-body">
    This content collapses horizontally.
  </div>
</div>

Use collapse-horizontal class on the collapsible element to enable horizontal sliding.

The data-bs-target attribute links the button to the collapsible content by ID.

Examples

This example collapses a fixed width panel horizontally.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidth" aria-expanded="false" aria-controls="collapseWidth">
  Toggle Width
</button>

<div class="collapse collapse-horizontal" id="collapseWidth">
  <div class="bg-light border" style="width: 200px;">
    Collapsible content with fixed width.
  </div>
</div>

This example uses a percentage width for the collapsible content.

Bootsrap

<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFlex" aria-expanded="false" aria-controls="collapseFlex">
  Toggle Flexible Width
</button>

<div class="collapse collapse-horizontal" id="collapseFlex">
  <div class="p-3 bg-info text-white" style="width: 50%;">
    Collapsible content with 50% width.
  </div>
</div>

Sample Program

This page shows a button that toggles a sidebar sliding horizontally. The sidebar is 250px wide and collapses smoothly from the left side. The main content stays visible next to it.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Horizontal Collapse Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h1>Horizontal Collapse Demo</h1>
    <button class="btn btn-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#horizontalCollapse" aria-expanded="false" aria-controls="horizontalCollapse">
      Toggle Sidebar
    </button>

    <div class="d-flex">
      <div class="collapse collapse-horizontal" id="horizontalCollapse">
        <div class="card card-body" style="width: 250px;">
          This sidebar slides in and out horizontally.
        </div>
      </div>
      <div class="flex-grow-1 ms-3">
        <p>Main content area stays visible while sidebar collapses.</p>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Make sure to include Bootstrap's JavaScript bundle for the collapse to work.

Set a fixed or percentage width on the collapsible content for horizontal collapse to show properly.

Use aria-expanded and aria-controls for accessibility so screen readers understand the toggle.

Summary

Horizontal collapse hides or shows content by sliding it left or right.

Use collapse-horizontal class with Bootstrap collapse component.

Set width on the collapsible content and include Bootstrap JS for it to work smoothly.