Bootstrap-colored Summernote toolbar

This example keeps the standard Summernote toolbar features, but adds Bootstrap classes through toolbarClassName, toolbarButtonClassName, plus matching popover class options. That makes it easy to match both the editor toolbar and contextual popovers to the rest of your Bootstrap 5 theme.

Configured toolbar

The toolbar uses bg-primary border-primary text-white, while each toolbar button switches to btn-light btn-sm. The air, image, video, and table popovers use the same background and button classes.

How to use it

Pass the new class options into summernote.create(). The default Summernote appearance stays unchanged until you opt in, and the editor chrome now inherits Bootstrap variables for both the main toolbar and popovers.

Toolbar color demo

Use this editor to check how a branded Bootstrap toolbar still works with dropdowns, color pickers, links, and tables.

Light toolbar demo

This second editor uses a light toolbar and primary buttons with the same native Bootstrap button groups.

Pinned popover demo

This air mode example keeps the contextual toolbar visible so the configured popover background and button classes are visible without extra interaction.

Popover colors can follow the main toolbar exactly, including Bootstrap backgrounds, borders, and button variants.

Select text, an image, or a table in a real editor to reuse the same contextual styling.

Pinned light popover demo

This light variant keeps the contextual toolbar visible too, so the light popover surface and primary buttons match the light toolbar demo above.

Light popovers can use a subtle Bootstrap background with the same primary button styling as the main toolbar.

This keeps the contextual tools visually aligned with the lighter editor chrome.

Example configuration - Primary
summernote.create('#toolbar-colors-editor', {
  toolbarClassName: 'bg-primary border-primary text-white',
  toolbarButtonClassName: 'btn-light btn-sm',
  toolbarUseNativeButtonGroups: true,
  toolbarButtonGroupClassName: 'btn-group-sm shadow-sm',
  popoverClassName: 'bg-primary border-primary text-white',
  popoverButtonClassName: 'btn-light btn-sm',
  popoverUseNativeButtonGroups: true,
  popoverButtonGroupClassName: 'btn-group-sm shadow-sm',
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture', 'video']],
    ['view', ['fullscreen', 'codeview', 'help']],
  ],
});
Example configuration - Light
summernote.create('#toolbar-colors-editor-light', {
  toolbarClassName: 'bg-light border border-light-subtle',
  toolbarButtonClassName: 'btn-primary btn-sm',
  toolbarUseNativeButtonGroups: true,
  toolbarButtonGroupClassName: 'btn-group-sm shadow-sm',
  popoverClassName: 'bg-light border border-light-subtle',
  popoverButtonClassName: 'btn-primary btn-sm',
  popoverUseNativeButtonGroups: true,
  popoverButtonGroupClassName: 'btn-group-sm shadow-sm',
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture', 'video']],
    ['view', ['fullscreen', 'codeview', 'help']],
  ],
});