Canvas Bootstrap

Add fully styled, responsive Bootstrap components to Drupal Canvas, enabling buttons, cards, grids, and more in a visual editor with minimal setup.

Recommended theme: Bootstrap Forge is a Canvas-first Bootstrap 5 starter theme with modern tooling and component-driven architecture.

Features

Canvas Bootstrap brings Bootstrap 5 building blocks into the Drupal Canvas editor so editors can drag‑and‑drop pieces without writing HTML.

• Components are grouped under “Canvas Bootstrap.”
• Buttons, cards, images, text, and layout pieces that follow Bootstrap 5 styles.
• Responsive layout tools (rows, columns, and wrappers).
• Cards with header, image, body, and footer areas, plus layout controls.
• Links and buttons include helpful options like target and accessibility labels.
• If the active theme already provides a component with the same name, the theme’s version is used.

Components (current)

Accordion Container: wrapper for accordion items, with optional "flush" style.
Accordion Item: title, heading size, and "open by default" option.
Alert: contextual feedback message with variant, optional heading, and dismissible close button.
Badge: inline label or count with variant and optional pill style.
Blockquote: quote text with optional footer and citation.
Button: text and link with variant, size, and outline options.
Card: header/image/body/footer slots with layout and style controls.
Carousel: slideshow with controls, indicators, crossfade, autoplay, and touch support.
Carousel Item: individual slide wrapper with active state, interval, and caption for use inside Carousel.
Column: responsive column sizes for different screen widths.
Heading: heading levels (H1-H6) with alignment and text color.
Image: image with aspect ratio, size, rounding, caption, and optional link.
Link: text link with target, aria label, and optional button styling.
Paragraph: rich text block with spacing and text color options.
Row: responsive row with gap controls.
Wrapper: container and spacing options, plus optional flex controls.

Use cases:

• Quickly build responsive pages using familiar Bootstrap components.
• Reduce development time for content-heavy websites.
• Enable non-technical users to maintain consistent UI across a Drupal site.

Post-Installation

Once installed:

1. Components are automatically available in the Canvas visual editor.
2. No additional configuration is required; the module works out-of-the-box.
3. Users can drag-and-drop Bootstrap Buttons, Cards, Layouts, Tabs, and Accordions directly into pages or blocks.
4. Each component has editable properties (e.g., button text, URL, variant, outline, size) exposed in Canvas for real-time customization.

No new content types or special admin pages are required. Everything is managed visually inside Canvas.

Additional Requirements

• Drupal 11 or higher
• Canvas module (required for component support)
• Bootstrap 5 theme (to ensure components render correctly in both Canvas preview and frontend)

This module is sponsored and developed by Ispectra.