BOOTSTRAP PLUGIN FOR TINYMCE 6 · 7 · 8 Bootstrap components.
Inside TinyMCE.

Build multi-column layouts on the Bootstrap grid. Insert and edit cards, modals, accordions, navigation, tables and forms in TinyMCE. Each dialog shows a live preview and the Bootstrap 5.3 HTML it will insert.

Try the live demo →Read the documentation

component dialogs

6–8

TinyMCE versions

$49 + VAT

one-time payment

TinyMCE with the Bootstrap UI toolbar and a coolsoft.cz page containing a navbar and three cards with photos — The Bootstrap UI toolbar in TinyMCE

The card insertion dialog with completed fields and a preview of a card with a photo and title — Insert a card with live preview

The Insert layout dialog with the column count control and a row preview for the LG breakpoint — Column order by breakpoint

The page elements gallery: tiles previewing an accordion, an alert, a badge and a breadcrumb, with the selected element shown beside them — A gallery of elements with live previews

FOR TINYMCE 6, 7 AND 8

6.87.98.9

Why Bootstrap UI

A plugin for developers who use TinyMCE on Bootstrap 5 or Bootstrap 4 websites and want to edit Bootstrap components in the editor.

Live preview in every dialog

See the component preview and the HTML that will be inserted as you change its settings.

Interactive components

Try modals, offcanvas panels, dropdowns and other interactive components in the preview. They stay inactive while you edit. On your website, Bootstrap JavaScript makes them work.

Bootstrap classes from a dialog

Set spacing, colours, borders, typography, flexbox and position in a dialog. Breakpoint settings are available where Bootstrap supports them.

Grid designer

Set column widths, alignment and gutters. Drag columns to change their order at the selected breakpoint.

TinyMCE 6, 7 and 8, Bootstrap 5 and 4. 9 languages.

Verified on TinyMCE 6.8, 7.9 and 8.9. With bootstrapui_version: '4' the plugin inserts Bootstrap 4 classes and attributes. The interface is available in English, Czech, Slovak, German, Spanish, French, Brazilian Portuguese, Italian and Polish. See the documentation for installation and language setup.

Clean HTML

The plugin saves standard Bootstrap HTML that you can also edit outside TinyMCE.

Check your layout on mobile and desktop

Switch between Bootstrap breakpoints in the grid designer to see how the columns will stack on mobile and desktop before you insert the layout.

The grid designer switching the row preview between the LG, MD, SM and mobile breakpoints; on mobile both columns stack — The grid designer in use.

29 component dialogs

grouped by type

Content

CardList groupTableFigureTypography

Navigation

NavbarNavs & tabsBreadcrumbPagination

Interactive

ModalDropdownTooltipCarousel

Layout & forms

GridForm controlButton+ 12 more

Standard Bootstrap HTML

The plugin adds no custom wrapper tags or editor metadata. You can display the saved content on a Bootstrap website and edit it with standard HTML tools.

<h5 class="card-title">Card title</h5>

</div>

One licence, one website or app.

Pay once and download the plugin immediately. Updates within 1.x are free. The plugin works offline and on intranets without checking the licence at runtime.

ONE-TIME