Bootstrap Editor

Visual editor for WordPress + Bootstrap

Edit pages, posts, and Bootscore templates with a visual Bootstrap editor.

Bootstrap Editor lets you work with real HTML, CSS, and JavaScript inside WordPress. Select elements from the preview, adjust classes and styles, inspect breakpoints, use a Figma-style column grid, and edit headers, footers, menus, and theme parts.

View plans Explore features
Theme base
Bootscore
Content
HTML CSS JS
Preview
Editor + Front
Bootstrap Editor - Header template
EditorFront1440x900XLGrid
Bootscore template Visual design view

Grid, breakpoints, and real Bootstrap structure.

BreakpointsXS SM MD LG XL XXL
Grid
Style editor.col-lg-6 + bg-dark
01Pages and postsOpen the editor from the metabox or row action, disable Gutenberg for managed Bootstrap content, and save HTML, CSS, and JS without losing structure.
02Bootscore templatesEdit header, footer, menus, loops, single templates, archives, search results, and 404 layouts while preserving dynamic WordPress tokens.
03Responsive designSwitch between XS, SM, MD, LG, XL, XXL, desktop resolutions, zoom, fullscreen, and a configurable visual column grid.
04Per-domain plansStart free, upgrade to Lite for component portability, or use Pro for backups, restore, and professional maintenance workflows.

Key features

It does not only edit pages. It also controls theme templates.

Bootstrap Editor works with Bootscore as the base theme and opens editable child-theme parts directly from WordPress. You can visually modify headers, footers, menus, loops, single templates, archive files, search results, and 404 layouts while preserving dynamic tokens such as WordPress menus and required theme calls.

Selected Element Code
<section class="hero">.hero { display:grid; }initCarousel();

Visual and code editor for HTML, CSS, and JavaScript

Edit visually from the canvas, then refine the selected element with real code. HTML, CSS, media-query CSS, and JavaScript stay tied to the selected page, post, or template part so advanced users can work without leaving WordPress.

Image height: 260px. It uses the same editor-frame style as the theme-parts image, with tabs and selected-code rows.
DOM Hierarchy
lockhideinsert rowinsert column

DOM hierarchy panel for selecting, locking, hiding, and inserting grids

The hierarchy panel makes complex Bootstrap layouts manageable. Users can select nested elements precisely, lock protected nodes, hide sections while designing, and insert Bootstrap rows or columns in the correct place.

Image height: 260px. The left tree and right action rail illustrate structure plus element controls.
Component + Class Dictionary
col-lg-4col-lg-6col-lg-12

Component, Bootstrap class, and style dictionaries

The editor exposes Bootstrap-aware dictionaries as visual controls. Designers can search components, type partial classes, receive suggestions, and apply known class patterns without memorizing every utility or grid combination.

Image height: 260px. It shows component categories and autocomplete-style Bootstrap class suggestions.
Style Controls

Controls for text, typography, backgrounds, borders, alignment, and columns

Common design operations are available through direct controls: rich text, type scale, background color or image, borders, spacing, alignment, and responsive column widths. The goal is speed without hiding the resulting Bootstrap structure.

Image height: 260px. The mockup uses sliders, swatches, and compact property rows to represent visual editing.
WordPress Media Library

Image and background replacement through the WordPress Media Library

Selected images and CSS backgrounds can be replaced from WordPress media instead of manually copying URLs. This keeps assets inside the site workflow and makes visual page maintenance safer for content teams.

Image height: 260px. It shows a media picker grid inside the same dark editor shell.
Editor Preview + Front Preview
Editor canvasSelected section
WordPress frontLive theme render

Isolated editor preview plus real WordPress front preview

The editor can preview in an isolated design surface and compare against the real front-end output using WordPress, the active Bootscore child theme, registered assets, menus, scripts, and live content.

Image height: 260px. Two preview panes show the editor surface next to the real front render.
Responsive Viewer

Breakpoint viewer for XS, SM, MD, LG, XL, and XXL

Design can be reviewed and edited by breakpoint from the visual canvas. Users can switch Bootstrap sizes, desktop resolutions, zoom levels, and fullscreen mode while keeping the selected element and style controls active.

Image height: 260px. Breakpoint pills and device frames communicate design-view editing by size.
Figma-style Column Grid

Figma-style column grid with configurable columns, margin, and gutter

A visual overlay helps match Bootstrap layouts to design systems. Columns, margins, and gutters can be configured so the canvas behaves more like a design tool while still producing production-ready Bootstrap markup.

Image height: 260px. The visual uses translucent column overlays across a canvas to make the grid obvious.

Technical tools

Real code when you need it, visual controls when you want speed.

Selected Code

Edit the selected element HTML, related CSS, active media query, and JavaScript.

HTML start
<section class="hero">...</section>
CSS + JS end

Highlights the selected code range, including start/end indicators for HTML, CSS, media-query CSS, and JS.

Bootstrap Classes

Search and apply recognized Bootstrap classes without writing every class by hand.

Type: col-lgcol-lg-4col-lg-6col-lg-12

Type a class fragment and receive Bootstrap-aware suggestions that can be assigned directly to the selected element.

Column Widths

Adjust col, col-sm, col-md, col-lg, col-xl, and visibility by breakpoint.

XS 12MD 6LG 4XL auto

Control responsive column widths and visibility without memorizing every Bootstrap class combination.

Theme Parts

Manage child-theme parts from Tools > Bootstrap Theme Parts.

HeaderFooterSingleArchive

Edit child-theme template parts while preserving menus, PHP-backed tokens, and dynamic WordPress output.

Components

Insert Bootstrap and custom components such as accordions, cards, heroes, sliders, and headers.

HeroCardsAccordionSlider

Use the component dictionary to insert reusable sections and move them across projects in Lite and Pro.

Frontend render

Render saved HTML and inject CSS through wp_head and JavaScript through wp_footer.

wp_head CSSthe_content HTMLwp_footer JS

Published pages render through WordPress with the active theme, saved styles, and page-level scripts.

Installation

Bootscore as the base, Bootstrap Editor as the visual cockpit.

  1. 01Download the Bootscore parent theme

    Get the parent theme from Git and install it as the foundation.

    Go to Git repository
  2. 02Download the child theme

    Install the compatible child theme so templates can be edited without touching the theme core.

    Go to Git repository
  3. 03Download the plugin

    Request a download link. We send the link and a 4-character access code associated with your email.

  4. 04Activate your domain

    Choose Free, Lite, or Pro. Paid plans are activated per domain.

Plans

Choose the level of control each domain needs.

Paid plans are licensed per domain. Lite and Pro are available monthly or yearly.

Free

For testing the editor and working with basic Bootstrap content.

Free
  • Pages and posts.
  • Compatible theme parts.
  • Visual and code editor.
  • Breakpoints and visual grid.
  • No backups.
  • No component import/export.
Popular

Lite

For active sites that need portable components.

9.99 USD/ month per domain
99 USD yearly
  • Everything in Free.
  • Import components.
  • Export components.
  • Expanded dictionary.
  • Per-domain activation.
  • Saving linked to company servers.

Pro

For agencies and teams that need complete backup control.

14.99 USD/ month per domain
149 USD yearly
  • Everything in Lite.
  • Create backups.
  • Restore backups.
  • Import backups.
  • Export backups.
  • Import/export components.

FAQ

Commercial and technical answers before installation.

Does the Free plan cost anything?

No. Free lets you test the editor without payment, but it does not include backups or component import/export.

Are plans licensed per domain?

Yes. Lite and Pro are activated per domain, so each production site requires its own activation.

How much does Lite cost?

Lite costs 9.99 USD monthly per domain or 99 USD yearly per domain.

How much does Pro cost?

Pro costs 14.99 USD monthly per domain or 149 USD yearly per domain.

Can I upgrade from Lite to Pro?

Yes. The commercial flow should allow upgrading whenever you need backups, restore, and advanced import/export.

What happens if I do not renew?

Your published WordPress content remains on your site. Paid domain features stop being available until renewal.

Where do I download the plugin?

The plugin is downloaded from the official Bootstrap Editor website. The Bootscore parent theme and compatible child theme are downloaded from Git.

Do I need to buy Bootscore?

No. Bootscore is used as the base theme. The landing should guide users to download the parent theme and compatible child theme.

Does Bootstrap Editor replace Gutenberg?

For content managed by Bootstrap Editor, the plugin can disable the block editor to prevent WordPress from changing Bootstrap HTML.

Which theme parts can I edit?

From Tools > Bootstrap Theme Parts, you can edit child-theme parts such as header, footer, menus, loops, single templates, archive, search results, and 404 while preserving dynamic tokens.

Contact

Tell us about your domain, your Bootscore theme, and the right plan.

The form validates fields in the browser and sends the message through PHP to mail@mail.com.