Bootstrap Offcanvas Generator

The Bootstrap Offcanvas Generator lets you configure and preview a Bootstrap 5 offcanvas panel in seconds, then copy the ready-to-use HTML. Set the placement, size, backdrop behavior, title, body content, and trigger button style without writing a single line of code. Built for front-end developers, designers, and anyone prototyping with Bootstrap 5.

Configuration

Content

Offcanvas Title

Body Paragraph

Menu / Link Items (one per line)

Trigger Button Label

Close Button Aria Label

Footer Text

Layout

Placement

Offcanvas Width / Height

Enable BackdropAllow Body ScrollDismiss on ESC Key

Design

Trigger Button Style

Trigger Button Size

Panel Theme

Accent / Link Color

Panel Border Radius (px)

Show Divider Below HeaderShow Footer AreaShow Icon in Trigger Button

How to Use

1. Configure the offcanvas placement, size, and behavior options in the Layout and Behavior sections. 2. Adjust the title, body text, button label, and color settings in the Content and Design sections. 3. Preview the live output rendered in the preview pane below the controls. 4. Click Copy HTML to grab the complete Bootstrap 5 snippet, or Download it as an .html file.

Why Use This Tool?

Writing Bootstrap offcanvas markup by hand means remembering the exact data attributes, ARIA roles, and class combinations every time. This generator outputs the complete, correct HTML in one click, saving 5 to 10 minutes per component and eliminating copy-paste errors. It requires no login, no npm install, and no dependencies beyond Bootstrap 5 itself.

Frequently Asked Questions

What is the Bootstrap Offcanvas Generator?

It is a free browser-based tool that generates complete, valid Bootstrap 5 offcanvas HTML based on options you configure visually. You get a trigger button and the full offcanvas panel markup ready to drop into any Bootstrap 5 project.

How do I control which side the offcanvas slides in from?

Use the Placement selector in the Layout section. You can choose Start (left), End (right), Top, or Bottom. The generator applies the correct Bootstrap placement class (offcanvas-start, offcanvas-end, offcanvas-top, or offcanvas-bottom) and updates the preview instantly so you can confirm the direction before copying.

Is it free?

Yes — the Bootstrap Offcanvas Generator is completely free with no signup required. Built by the CanvasBuilder.co team.