Horizontal collapse in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a horizontal collapse in Bootstrap?

A horizontal collapse is a UI feature where content expands or collapses sideways (left to right) instead of vertically. It helps save space and create interactive layouts.

beginner

Which Bootstrap class controls horizontal collapse behavior?

The class .collapse-horizontal enables horizontal collapsing of content in Bootstrap.

intermediate

How do you trigger a horizontal collapse with a button in Bootstrap?

Use a button with data-bs-toggle="collapse" and data-bs-target="#id" attributes. The target element should have collapse collapse-horizontal classes.

intermediate

What CSS property changes during a horizontal collapse animation?

The width property changes from 0 to the element's full width during horizontal collapse animation.

beginner

Why use horizontal collapse instead of vertical collapse?

Horizontal collapse is useful when you want to hide or show side panels or menus without affecting vertical page flow, making layouts more dynamic and space-efficient.

Which class enables horizontal collapse in Bootstrap?

A .collapse-horizontal

B .collapse-vertical

C .horizontal-collapse

D .collapse-side

The correct class is .collapse-horizontal to make the collapse horizontal.

What CSS property animates during horizontal collapse?

A height

B width

C opacity

D margin

Horizontal collapse changes the width property from 0 to full width.

How do you connect a button to a horizontal collapse element?

A Using <code>href="#id"</code> only

B Using <code>onclick="toggle()"</code>

C Using <code>data-bs-toggle="collapse"</code> and <code>data-bs-target="#id"</code>

D Using <code>data-toggle="horizontal"</code>

Bootstrap uses data-bs-toggle="collapse" and data-bs-target="#id" to link buttons to collapse elements.

What happens visually when a horizontal collapse is triggered?

A Content expands or shrinks sideways

B Content fades in and out

C Content slides up and down

D Content rotates

Horizontal collapse expands or shrinks content sideways (left to right).

Which Bootstrap version introduced horizontal collapse?

A Bootstrap 3

B Bootstrap 2

C Bootstrap 4

D Bootstrap 5

Horizontal collapse was introduced in Bootstrap 5.

Explain how to create a horizontal collapse in Bootstrap and how it differs from a vertical collapse.

Think about the classes and attributes needed and the direction of animation.

Describe a real-life scenario where horizontal collapse is more useful than vertical collapse.

Consider layouts with side panels or menus.