How to integrate Summernote in Bootstrap 5 in PHP/HTML | YourSite

How to integrate Summernote in Bootstrap 5 in PHP/HTML

In this post, you will learn how to integrate summernote in bootstrap 5 in php or normal html website too.

So, guys to accomplish this we will be using CDN Links of summernote. 

Summernote CSS CDN Link:


<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

Summernote JS CDN Link:


<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

Run summernote:

Run the script below when document is ready!


<script>
    $(document).ready(function() {
        $("#your_summernote").summernote();
        $('.dropdown-toggle').dropdown();
    });
</script>

Simple example:

You can also test running example. Save below code as index.html / index.php and open it with your browser.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Integrate Summernote in PHP/HTML</title>

    <!-- Bootstrap 5 CDN Link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Summernote CSS - CDN Link -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <!-- //Summernote CSS - CDN Link -->

</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Integrate Summernote with Bootstrap 5 in PHP/HTML</h4>
                    </div>
                    <div class="card-body">

                        <form action="#">
                            <div class="mb-3">
                                <label>Big Description</label>
                                <textarea name="description" id="your_summernote" class="form-control" rows="4"></textarea>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js""></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Summernote JS - CDN Link -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#your_summernote").summernote();
            $('.dropdown-toggle').dropdown();
        });
    </script>
    <!-- //Summernote JS - CDN Link -->

</body>
</html>

Thanks for reading.

🚀 More Blogs You Might Like

Explore more articles and keep learning

What is Bounce Rate in SEO? Complete Guide for Beginners
search-engine-optimization
What is Bounce Rate in SEO? Complete Guide for Beginners

Learn what bounce rate is in SEO, how it is calculated, why it matters, common causes of high bounce rates, an...

👁 28 2026-05-24
Read More →
Comprehensive Interviewer Guide - Detailed Article
skill
Comprehensive Interviewer Guide - Detailed Article

Learn how to conduct effective interviews with this comprehensive interviewer guide. Explore hiring strategies...

👁 43 2026-05-22
Read More →
Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)
skill
Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)

Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)...

👁 38 2026-05-19
Read More →
How to Grow Your Business Mindset Step by Step
skill
How to Grow Your Business Mindset Step by Step

Learn how to develop and grow a successful business mindset step by step. Discover entrepreneurial thinking, p...

👁 56 2026-05-09
Read More →