Horizontal collapse in Bootsrap - Browser Rendering Trace

Render Flow - Horizontal collapse

Read <button>

→Create BUTTON node

↓

Read data-bs-toggle="collapse"

→Bootstrap JS attaches event

↓

Read data-bs-target="#collapseExample"

→Link button to collapse div

↓

Read <div id="collapseExample" class="collapse">

→Create DIV node with collapse class

↓

Initial state: div hidden width=0

↓

On button click

→Toggle div width from 0 to full

↓

Repaint and reflow to show/hide content horizontally

The browser reads the button and collapse div, Bootstrap JavaScript listens for clicks on the button, then toggles the width of the target div from zero (hidden) to full width (visible), causing a horizontal expand or collapse animation.

Render Steps - 3 Steps

Code Added:<button> element with data-bs-toggle and data-bs-target attributes

Before

[ ]
(empty page, no button or content visible)

→

After

[Button: Toggle Horizontal Collapse]
(visible button on page)

The button appears on the page, ready to be clicked to toggle the collapse area.

🔧 Browser Action:Creates button element in DOM and paints it

Code Sample

A button toggles a horizontal collapse area that smoothly expands or collapses width-wise to show or hide content.

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>

Render Quiz - 3 Questions

After step 2, what do you see on the page?

A A button and visible collapse content expanded horizontally

B A button and a hidden collapse area with zero width

C Only a visible collapse content without a button

D No elements visible on the page

Common Confusions - 2 Topics

Why does the collapse content not appear when I click the button?

If the collapse div lacks the 'collapse-horizontal' class, it collapses vertically by default, so horizontal width animation won't happen. Also, ensure Bootstrap JS is loaded and the data attributes are correct.

💡 Add 'collapse-horizontal' class for horizontal collapse and check data-bs-target matches the collapse div's id.

Why does the collapse area jump open instead of animating smoothly?

Bootstrap requires the collapse div to have the 'collapse-horizontal' class and proper CSS for smooth width transitions. Missing CSS or conflicting styles can cause instant jumps.

💡 Use Bootstrap's collapse-horizontal class and avoid overriding width or transition styles.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
collapse-horizontal	class	horizontal (width)	Collapses or expands width-wise	Horizontal show/hide content
collapse	class	vertical (height) by default	Collapses or expands height-wise	Vertical show/hide content
data-bs-toggle	"collapse"	N/A	Enables toggle behavior on target	Bootstrap collapse toggling
data-bs-target	#id	N/A	Specifies which element to collapse	Link button to collapse area

Concept Snapshot

Horizontal collapse uses Bootstrap's 'collapse-horizontal' class to toggle an element's width from zero to full. A button with data-bs-toggle="collapse" and data-bs-target links to the collapse area. The collapse div starts hidden with zero width and expands horizontally on toggle. Bootstrap JS handles the toggle and smooth width animation. Ensure correct classes and data attributes for proper behavior.