Summernote Editor Compatible With Bootstrap 5

If you want to use the Summernote WYSIWYG editor with Bootstrap 5, there’s a simple solution. The standard Summernote version doesn’t work well with Bootstrap 5, but you can integrate it smoothly using the Summernote Lite version.

With this modified Summernote editor, you get the best of both worlds. You can enjoy Bootstrap 5’s styling capabilities while still having access to Summernote’s powerful editing features. The integration is optimized, so you won’t face any dropdown-related issues. Managing headings, colors, and fonts becomes hassle-free.

How to Create Bootstrap 5 Compatible Summernote Editor

1. First of all, load the  Bootstrap 5 CSS and Summernote CSS by adding the following CDN links into the head tag of your HTML document.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

2. Create a div element (or textarea) with a unique id as follows:

<div id="summernote"></div>

3. To customize the Summernote editor, add the following CSS code to your project. Feel free to define your own CSS rules to match your web/app interface:

/* Summernote Additional CSS */
.note-editable{
   background: #fff;
}
.note-btn.dropdown-toggle:after {
   content: none;
}
.note-btn[aria-label="Help"]{
   display: none;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu{
   min-width: 185px;
}
/* Customize Summernote editor */
.note-editor {
/* Your custom styles here */
}

.note-editable {
/* Your custom styles here */
}

/* Toolbar customization */
.note-toolbar {
/* Your custom styles here */
}

/* Buttons customization */
.note-btn {
/* Your custom styles here */
}

4. Now, load jQuery, Bootstrap 5 JS, and Summernote JS, by adding the following CDN linkx just before the closing body tag (</body>):

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

5. Finally, initialize the Summernote plugin in the jQuery document ready function to activate the text editor.

$('#summernote').summernote({
        placeholder: 'Hello Bootstrap 5',
        tabsize: 2,
        height: 400
 });

I’ve added a placeholder with the id “summernote” for the element where you want to activate the Summernote text editor. Replace this class with the appropriate selector for your specific div or textarea where you want to enable the editor. Once the document is ready, the Summernote plugin will be initialized on the selected element, allowing you to use the WYSIWYG editor in your project.

That’s all! hopefully, you have successfully created Summernote Editor compatible with Bootstrap 5. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.