Bootstrap support
This page describes what is specific to Bootstrap — the versions we support, the grid and its breakpoints, and how Blk42 loads the framework for you. It is not a setup step: Blk42 is installed once into your editor, and everything here applies from that moment on. If you have not installed it yet, start with Installation.
Blk42 edits the Bootstrap grid directly: containers, rows and columns are real Bootstrap markup, and what you get out of the editor is what a developer would have written by hand. There is no wrapper format and no runtime dependency on Blk42 — remove the plugin and the content still renders.
Bootstrap 5 is the default and the version we recommend for new projects. Bootstrap 4 and 3 are fully supported for existing sites that cannot move yet.
Focus on content
The short version of this whole page: you do not have to set Bootstrap up. Enable the plugin, pass your API key, and Blk42 takes care of the rest — the editor gets Bootstrap, your visitor pages get Bootstrap, and the two always agree.
Out of the box, and with nothing to configure:
- The editor is styled with Bootstrap, so a layout looks the same while it is being built as it will once published. Bootstrap's own JavaScript is loaded there too, so interactive components behave inside the editor.
- Your visitor pages get the Bootstrap CSS automatically. Blk42 adds it for you, so saved content renders correctly even on a page whose template never included Bootstrap.
- jQuery is handled for you on the versions that need it — see below.
- The right files come from the right place — the editor loads the framework from our own infrastructure, which stays fast and reachable even when a public CDN is having a bad day, while visitor pages use the standard public CDN build your visitors have probably already cached.
Everything below is available if you want to take control. None of it is required to start.
Versions
Pick the version in the Dashboard, per API key. Each website can use a different one.
| Version | jQuery | Notes |
|---|---|---|
| Bootstrap 5 | not needed | Default. Bootstrap's own JS components no longer depend on jQuery. |
| Bootstrap 4 | auto-load | Blk42 loads jQuery alongside Bootstrap; switch it off if your site already ships its own. |
| Bootstrap 3 | auto-load | Legacy. Four breakpoints only, and xs is an explicit class. |
We track the current patch release of each major version, so you get the up-to-date build without pinning anything yourself.
The version you choose changes the class names Blk42 writes, the breakpoint set offered in the structure panel, and whether jQuery is pulled in — so switching an existing website between major versions is a content migration, not just a setting.
Breakpoints
Blk42 offers one column-width control per breakpoint, matching the version's own grid:
| XS | SM | MD | LG | XL | XXL | |
|---|---|---|---|---|---|---|
| Bootstrap 5 | 0 | 576 | 768 | 992 | 1200 | 1400 |
| Bootstrap 4 | 0 | 576 | 768 | 992 | 1200 | — |
| Bootstrap 3 | 0 | 768 | 992 | 1200 | — | — |
All three use a 12-column grid. In Bootstrap 4 and 5 the smallest breakpoint is unprefixed
(col-6), while Bootstrap 3 names it explicitly (col-xs-6) — Blk42 writes whichever form the
selected version expects.
Using your own Bootstrap build
The bundled Bootstrap is a convenience, not a lock-in. If you already ship your own — a themed build, a customised SCSS compile, or a version pinned by your CMS — switch the Dashboard setting from Load from CDN to Use custom URL and point it at your stylesheet.
Blk42 will then style the editor with exactly what your visitors see, which is what you want as soon as your theme overrides Bootstrap's defaults: brand colours, custom spacing, restyled components. Your editors compose against your design system instead of stock Bootstrap.
A class prefix can be configured for builds that namespace their grid classes (bs-col-6 and
similar), so Blk42 recognises and writes your prefixed classes instead of the stock ones.
Framework on visitor pages
By default Blk42 includes the Bootstrap CSS on your visitor pages, so published content renders correctly with no template changes at all.
If your templates already load Bootstrap — most themed sites do — turn the inclusion off in the Dashboard and Blk42 will stay out of the way, leaving your own stylesheet as the only copy on the page. This is a per-API-key setting, so one website can rely on Blk42 while another uses its own build.
Bootstrap's JavaScript is a separate switch and is off for visitor pages by default. Turn it on if your published content uses interactive components and your templates do not already provide them.
Core features
These come with every Blk42 installation and do not depend on the version you pick:
- 12-column layout model with per-breakpoint widths, offsets and column ordering.
- Structure detection — existing content is parsed and its grid recognised, so Blk42 works on pages it did not create.
- Structure repair — broken or hand-edited markup is corrected back to a valid grid.
- Content protection — users cannot accidentally delete a column or corrupt the row/column hierarchy while editing inside it.
- Block library — saved blocks, auto-generated screenshots, categories and cross-website sharing are all framework-agnostic.
Blocks are saved with the markup they were built on, so a Bootstrap block belongs to a Bootstrap website — keep separate block groups if some of your websites are built differently.
Live examples
Every example below is a complete working page, with its full source — HTML, JavaScript and CSS — shown alongside it. Open any of them in CodePlay, our live code playground, to edit the code and watch the result update as you type.