CKEditor Bootstrap Grid
A CKEditor 5 plugin that enables content editors to easily create Bootstrap grid layouts directly within the WYSIWYG editor through an intuitive dialog interface.
ckeditor_bs_grid
Install
composer require 'drupal/ckeditor_bs_grid:^2.0'
Overview
CKEditor Bootstrap Grid provides a seamless integration between the CKEditor 5 rich text editor and Bootstrap's responsive grid system. This module allows content editors to create complex, responsive column layouts without writing any HTML or CSS code.
The module adds a Bootstrap Grid button to the CKEditor toolbar that opens a multi-step dialog for configuring grid layouts. Users can select the number of columns (1-12), choose from predefined layout presets for each Bootstrap breakpoint, and optionally add containers with custom classes. The generated grid markup uses Bootstrap's standard classes, ensuring compatibility with Bootstrap-based themes.
Advanced users can apply custom CSS classes to the container wrapper, container, row, and individual columns for fine-grained styling control. The module supports all Bootstrap 5 breakpoints (xs, sm, md, lg, xl, xxl) and includes options for fluid containers and gutter removal.
Features
- Adds Bootstrap Grid toolbar button to CKEditor 5 with visual column selection dialog
- Supports 1-12 column layouts with multiple predefined width presets per breakpoint
- Configurable responsive breakpoints (xs, sm, md, lg, xl, xxl) with per-text-format settings
- Container options including default container, fluid container, and custom wrapper classes
- No gutters option for removing Bootstrap grid gutters
- Advanced settings for adding custom CSS classes to container, row, and individual columns
- Optional Bootstrap CDN integration for editor preview styling
- Visual layout preview in the selection dialog showing column proportions
- Context menu integration for editing existing grid elements
- Existing grid elements can be modified while preserving content
Use Cases
Creating a Two-Column Content Layout
A content editor needs to display text alongside an image in a responsive layout. They click the Bootstrap Grid button, select 2 columns, choose the 66%/33% layout preset for medium screens and larger, and select Full Width for mobile. After saving, they place their content in each column.
Building a Feature Cards Section
A site builder wants to create a row of 4 feature cards. Using the Bootstrap Grid plugin, they create a 4-column grid with equal width on desktop (lg and above) and 2x2 on tablets (md), stacking to full width on mobile. Custom classes are added to the row for additional spacing.
Adding a Full-Width Container Section
For a marketing landing page, the editor creates a grid with a fluid container wrapper, adds a background color class to the container wrapper, and creates a 3-column layout inside. The no-gutters option removes spacing between columns for a seamless design.
Responsive Sidebar Layout
The content team needs a main content area with a sidebar. They create a 2-column grid with 75%/25% split on desktop, 66%/33% on tablets, and full-width stacked on mobile, with the sidebar collapsing below the main content.
Tips
- Ensure your frontend theme includes Bootstrap CSS or the grid classes won't render properly on the live site
- Use the CDN option during content editing if your admin theme doesn't include Bootstrap
- The Advanced Settings step allows adding utility classes like py-5 or bg-light for quick styling
- Existing grids can be edited by right-clicking and selecting Edit Grid from the context menu
- Configure available columns in the text format settings to simplify the interface for content editors
- Layout presets can be customized per site at /admin/config/content/ckeditor_bs_grid
Technical Details
Admin Pages 2
/admin/config/content/ckeditor_bs_grid
Configure global settings for the CKEditor Bootstrap Grid plugin including breakpoint labels, CSS prefixes, and available column layout presets. These settings apply to all text formats using the Bootstrap Grid plugin.
/admin/config/content/formats/manage/{format}
Per-text-format settings for the Bootstrap Grid plugin, accessible when configuring a text format that uses CKEditor 5.
Permissions 1
Hooks 5
hook_help
Provides help text for the module help page
hook_theme
Registers the custom form element label theme hook for grid options
hook_preprocess_form_element
Adds Bootstrap classes and custom theme hook for grid option radio buttons
hook_preprocess_form_element_label
Prepares layout option values for the visual column preview template
hook_config_schema_info_alter
Removes SourceEditingRedundantTags constraint to allow Bootstrap grid div elements in source editing
Troubleshooting 5
Enable 'Use BS CDN' in the text format's Bootstrap Grid settings, or ensure your admin theme includes Bootstrap grid CSS.
Check your text format's HTML filter settings. Ensure div elements with class and data-* attributes are allowed.
Make sure you've dragged the Bootstrap Grid button from Available buttons to the Active toolbar in the text format configuration.
Visit /admin/config/content/ckeditor_bs_grid and ensure layout presets are configured for the enabled breakpoints and column counts.
Verify that Bootstrap 5 CSS is loaded on your frontend theme. The module only adds Bootstrap classes; the CSS must be available.
Security Notes 2
- Custom CSS classes entered in the Advanced Settings are output directly to HTML. Ensure trusted users have access to the grid editing functionality.
- The module removes the SourceEditingRedundantTags constraint from CKEditor 5 to allow grid markup in source editing mode.