Offcanvas component in Bootsrap - Browser Rendering Trace

Render Flow - Offcanvas component

Load HTML with offcanvas markup

↓

Parse Bootstrap CSS and JS

↓

Initialize offcanvas component JS

↓

Detect trigger button click

↓

Add 'show' class to offcanvas

↓

Apply CSS transform to slide in

↓

Render backdrop overlay

↓

Trap focus inside offcanvas

↓

Wait for close event

↓

Remove 'show' class and hide offcanvas

The browser reads the HTML and Bootstrap CSS/JS, then waits for user interaction. When triggered, JavaScript adds classes that slide the offcanvas panel in and show a backdrop, managing focus and accessibility.

Render Steps - 4 Steps

Code Added:<button> trigger with data-bs-toggle="offcanvas" and data-bs-target="#demoOffcanvas"

Before

[Page with no sidebar visible]

[Button: Open Offcanvas]

→

After

[Page with no sidebar visible]

[Button: Open Offcanvas]

The button is present but the offcanvas panel is hidden by default.

🔧 Browser Action:Parse HTML and build DOM tree

Code Sample

A button triggers a sidebar panel sliding in from the left with a header and body content, plus a close button.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas" aria-controls="demoOffcanvas">
  Open Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasLabel">Offcanvas Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content inside the offcanvas panel.
  </div>
</div>

Render Quiz - 3 Questions

After clicking the button in render_step 3, what visual change happens?

A The offcanvas panel disappears and the button is disabled

B The offcanvas panel slides in from the left and a backdrop appears

C The button changes color but nothing else happens

D The offcanvas panel slides in from the right without backdrop

Common Confusions - 3 Topics

Why doesn't the offcanvas panel show immediately on page load?

By default, the offcanvas panel is positioned off-screen with CSS and hidden. It only becomes visible when the 'show' class is added by Bootstrap's JavaScript after a user clicks the trigger button (see render_step 3).

💡 Offcanvas panels start hidden off-screen and slide in only when 'show' class is added.

Why can't I interact with the page behind the offcanvas when it's open?

Bootstrap adds a semi-transparent backdrop overlay behind the offcanvas panel when it opens (render_step 3). This backdrop blocks clicks and focuses user attention on the offcanvas content.

💡 Backdrop covers page behind offcanvas to prevent interaction.

Why does keyboard focus stay inside the offcanvas when open?

Bootstrap traps keyboard focus inside the offcanvas panel for accessibility, so users can't tab to elements behind it (render_step 3). This ensures screen reader and keyboard users stay within the visible panel.

💡 Focus trapping keeps keyboard navigation inside the offcanvas.

Property Reference

Property/Class	Effect	Visual Behavior	Common Use
offcanvas	Base class	Positions panel off-screen and hidden	Defines offcanvas panel
offcanvas-start	Position from left	Panel slides in from left side	Left sidebar offcanvas
offcanvas-end	Position from right	Panel slides in from right side	Right sidebar offcanvas
show	Visibility toggle	Makes offcanvas visible and slides it in	Trigger to open offcanvas
btn-close	Close button style	Renders a small close icon button	Close offcanvas or modals
data-bs-toggle="offcanvas"	JS trigger	Enables button to open offcanvas	Connect button to offcanvas

Concept Snapshot

Offcanvas component slides a panel in from screen edges. Use 'offcanvas-start' or 'offcanvas-end' to set side. Trigger with button using data-bs-toggle="offcanvas". 'Show' class makes panel visible and adds backdrop. Focus is trapped inside for accessibility. Close with close button or backdrop click.