Home
Demo
- Bootstrap 5
- Bootstrap 4
Form Demo
- Bootstrap 5
- Bootstrap 4
Documentation
Buy on Codecanyon

Tinymce Bootstrap Plugin - Bootstrap 5 Demo

Change Theme Components Language

Open the Snippets Manager Open the Templates Manager

Choose your theme

Choose the toolbar Bootstrap components

btn

icon

image

table

template

breadcrumb

pagination

badge

alert

card

snippet

Choose your language

keys & special features

Special keys

Enter: Add a new paragraph after the current element
Shift + Enter: Insert a line break
Right-click: Shows the context menu to add a new paragraph before or after the current element

Bootstrap styles (margins, paddings, ...)

Select an element in the editor then use the styles dropdown list to apply the available styles.

To apply styles on parent containers:

Select the container by clicking on the corresponding tag in the editor's status bar
Use the styles dropdown list to apply the available styles.

<div class="container py-4 px-3">

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Buttons</h2>
                            <div class="px-3">
                                <button type="button" class="btn btn-primary mb-2 mb-md-0" data-test="true">Primary</button>
                                <button type="button" class="btn btn-secondary mb-2 mb-md-0">Secondary</button>
                                <button type="button" class="btn btn-success mb-2 mb-md-0">Success</button>
                                <button type="button" class="btn btn-danger mb-2 mb-md-0">Danger</button>
                                <button type="button" class="btn btn-warning mb-2 mb-md-0">Warning</button>
                                <button type="button" class="btn btn-info mb-2 mb-md-0">Info</button>
                                <button type="button" class="btn btn-light mb-2 mb-md-0">Light</button>
                                <button type="button" class="btn btn-dark mb-2 mb-md-0">Dark</button>
                                <button type="button" class="btn btn-link mb-2 mb-md-0">Link</button>

<hr class="w-100">

<button type="button" class="btn btn-outline-primary mb-2 mb-md-0">Primary</button>
                                <button type="button" class="btn btn-outline-dark mb-2 mb-md-0">Secondary</button>
                                <button type="button" class="btn btn-outline-success mb-2 mb-md-0">Success</button>
                                <button type="button" class="btn btn-outline-danger mb-2 mb-md-0">Danger</button>
                                <button type="button" class="btn btn-outline-warning mb-2 mb-md-0">Warning</button>
                                <button type="button" class="btn btn-outline-info mb-2 mb-md-0">Info</button>
                                <button type="button" class="btn btn-outline-light text-dark mb-2 mb-md-0">Light</button>
                                <button type="button" class="btn btn-outline-dark mb-2 mb-md-0">Dark</button>

<hr class="w-100">

<button type="button" class="btn btn-danger btn-lg mb-2 mb-md-0">Large button</button>
                                <button type="button" class="btn btn-warning mb-2 mb-md-0">Normal button</button>
                                <button type="button" class="btn btn-info btn-sm mb-2 mb-md-0">Small button</button>

<hr class="w-100">

<a class="btn btn-primary mb-2 mb-md-0" href="#" role="button">Link<i class="fa-solid fa-link ms-2"></i></a>
                                <button class="btn btn-primary mb-2 mb-md-0" type="submit">Submit Button<i class="fa-solid fa-check ms-2"></i></button>
                                <input class="btn btn-primary mb-2 mb-md-0" type="button" value="Input">
                                <input class="btn btn-primary mb-2 mb-md-0" type="submit" value="Input type=submit">
                                <input class="btn btn-primary mb-2 mb-md-0" type="reset" value="Input type=reset">

<hr class="w-100">

<div class="row">
                                    <div class="col-sm-6">
                                        <button type="button" class="btn btn-outline-info btn-lg w-100 mb-2 mb-md-0"><i class="fa-solid fa-user-secret me-2"></i>Full width button</button>
                                    </div>
                                    <div class="col-sm-6">
                                        <button type="button" class="btn btn-outline-danger btn-lg w-100 mb-2 mb-md-0">Another Full width button<i class="fa-solid fa-user-nurse ms-2"></i></button>
                                    </div>
                                </div>

<hr class="w-100">

<div class="d-flex flex-wrap justify-content-between">

<button type="button" class="btn btn-info mb-2 mb-md-0">Icon After <i class="fa-solid fa-address-card ms-2"></i></button>
                                    <button type="button" class="btn btn-danger mb-2 mb-md-0"><i class="fa-solid fa-camera me-2"></i> Icon Before</button>
                                    <button type="button" class="btn btn-success mb-2 mb-md-0">
                                        Notifications <span class="badge bg-light text-dark ms-2">4</span>
                                    </button>
                                    <button type="button" class="btn btn-warning mb-2 mb-md-0"><i class="fa-solid fa-umbrella-beach me-2"></i> Icon + Notifications <span class="badge bg-light text-dark ms-2">4</span></button>
                                </div>

<hr class="w-100">

<div class="d-flex flex-wrap justify-content-between">
                                    <div role="group" class="btn-group me-5" aria-label="Button group">
                                        <button class="btn btn-danger" type="button">Left</button>
                                        <button class="btn btn-warning" type="button">Right</button>
                                    </div>
                                    <div role="group" class="btn-group" aria-label="Button group">
                                        <button class="btn btn-danger" type="button"><i class="fa-solid fa-arrow-alt-circle-left"></i> Left</button>
                                        <button class="btn btn-secondary" type="button">Middle</button>
                                        <button class="btn btn-warning" type="button"><i class="fa-solid fa-arrow-alt-circle-right"></i> Right</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark text-center rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Icons</h2>
                            <div class="px-3">
                                <i class="fa-solid fa-envelope-open fa-border text-secondary fa-3x mx-5 mb-4"></i>
                                <i class="fa-solid fa-bicycle mx-5 mb-4" style="font-size:3em;color:#8c2dcc;"></i>
                                <i class="fa-solid fa-bomb text-danger fa-rotate-90 fa-flip-horizontal fa-3x mx-5 mb-4"></i>
                                <i class="fa-solid fa-palette text-warning fa-3x mx-5 mb-4"></i>
                                <i class="fa-solid fa-umbrella-beach fa-3x text-info mx-5 mb-4"></i>
                                <i class="fa-solid fa-peace text-dark fa-3x mx-5 mb-4"></i>
                                <i class="fa-solid fa-spinner fa-pulse fa-3x mx-5 mb-4" style="color:#2DCCA7"></i>
                                <i class="fa-solid fa-compact-disc fa-spin fa-3x mx-5 mb-4" style="color:#6E6B5D"></i>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Image</h2>
                            <div class="px-3">
                                <img class="img-thumbnail d-block mx-auto img-fluid" alt="Beautiful Greek landscape" src="/bootstrap5/demo/demo-images/nature/forest/wood-nature-sun-forest.jpg" width="400" height="300">
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Table</h2>
                            <div class="px-3">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <caption>List of users</caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">First</th>
                                                <th scope="col">Last</th>
                                                <th scope="col">Handle</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Jacob</td>
                                                <td>Thornton</td>
                                                <td>@fat</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Larry</td>
                                                <td>the Bird</td>
                                                <td>@twitter</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Breadcrumbs</h2>
                            <div class="px-3">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="#"><i class="fa-solid fa-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="#">Category</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Page</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Pagination</h2>
                            <div class="px-3">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item"><a class="page-link" href="#">«</a></li>
                                        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><span class="page-link"> 2 <span class="sr-only">(current)</span></span></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                        <li class="page-item"><a class="page-link" href="#">»</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Badge</h2>
                            <div class="px-3">
                                <p class="mb-4 h5">Example heading <span class="badge badge-dark">New</span></p>
                                <div class="d-flex align-items-center justify-content-around mb-3">
                                    <div>
                                        <button type="button" class="btn btn-primary">
                                            Notifications <span class="badge bg-light text-dark">4</span>
                                        </button>
                                    </div>
                                    <div>
                                        <span class="badge bg-danger">Danger</span>
                                    </div>
                                    <div>
                                        <span class="badge badge-pill badge-warning">Warning</span>
                                    </div>
                                    <div>
                                        <a href="#" class="badge badge-dark">Dark</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Alert</h2>
                            <div class="px-3">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
                                </div>
                                <div class="alert alert-success" role="alert">
                                    <h2 class="alert-heading">Well done!</h2>
                                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                                    <hr>
                                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                                </div>
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Cards</h2>
                            <div class="px-3">
                                <div class="container">
                                    <div class="row">
                                        <div class="col col-12 col-md-6 mb-4">
                                            <div class="card bg-light">
                                                <img src="/bootstrap5/demo/plugin/assets/images/default.jpg" width="400" height="267" class="card-img-top" alt="" />
                                                <div class="card-body">

<p class="card-title h5">Card title</p>
                                                    <p class="card-text">
                                                        This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                                    </p>
                                                </div>
                                                <div class="card-footer">
                                                    <small class="text-muted">Last updated 3 mins ago</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col col-12 col-md-6 mb-4">
                                            <div class="card bg-light">
                                                <img src="/bootstrap5/demo/plugin/assets/images/default.jpg" width="400" height="267" class="card-img-top" alt="" />
                                                <div class="card-body">

<p class="card-title h5">Card title</p>
                                                    <p class="card-text">
                                                        This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                                    </p>
                                                </div>
                                                <div class="card-footer">
                                                    <small class="text-muted">Last updated 3 mins ago</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col col-12 col-md-6 offset-md-3 mb-4">
                                            <div class="card bg-light">
                                                <img src="/bootstrap5/demo/plugin/assets/images/default.jpg" width="400" height="267" class="card-img-top" alt="" />
                                                <div class="card-body">

<p class="card-title h5">Card title</p>
                                                    <p class="card-text">
                                                        This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                                    </p>
                                                </div>
                                                <div class="card-footer">
                                                    <small class="text-muted">Last updated 3 mins ago</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Modal</h2>
                            <div class="px-3">
                                <p> <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#nnlrbpgq"> Launch demo modal</button> </p>
                                <div class="modal fade" id="nnlrbpgq" aria-labelledby="nnlrbpgqLabel" aria-hidden="true" data-mce-tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

<p class="modal-title h5" id="nnlrbpgqLabel">Modal title</p><button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
                                            <div class="modal-body">...</div>
                                            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save changes</button></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col px-0 pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mb-4 rounded-top text-center text-white bg-dark text-uppercase fw-light">Full Pricing table Snippet</h2>
                            <div class="px-3">
                                <section class="py-5 bg-primary">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="card bg-success mb-5 mb-lg-0 rounded-lg shadow">
                                                    <div class="card-header">

<p class="card-title h5 text-white-50 text-uppercase text-center">
                                        Free
                                    </p>

<h6 class="h1 text-white text-center">
                                        $0<span class="h6 text-white-50">/month</span>
                                    </h6>
                                                    </div>
                                                    <div class="card-body bg-light rounded-bottom">

<ul class="list-unstyled mb-4">
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-success"></i></span>Single User
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-success"></i></span>5GB Storage
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-success"></i></span>Unlimited Public Projects
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-success"></i></span>Community Access
                                                            </li>
                                                            <li class="text-muted mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-times"></i></span>Unlimited Private Projects
                                                            </li>
                                                            <li class="text-muted mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-times"></i></span>Dedicated Phone Support
                                                            </li>
                                                            <li class="text-muted mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-times"></i></span>Free Subdomain
                                                            </li>
                                                            <li class="text-muted mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-times"></i></span>Monthly Status Reports
                                                            </li>
                                                        </ul><a href="#" class="btn w-100 btn-primary text-uppercase rounded-lg py-3">Buy now</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card bg-warning mb-5 mb-lg-0 rounded-lg shadow">
                                                    <div class="card-header">

<p class="card-title h5 text-white-50 text-uppercase text-center">
                                        Plus
                                    </p>

<p class="h1 text-white text-center">
                                        $9<span class="h6 text-white-50">/month</span>
                                    </p>
                                                    </div>
                                                    <div class="card-body bg-light rounded-bottom">

<ul class="list-unstyled mb-4">
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span><strong>5 Users</strong>
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>50GB Storage
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>Unlimited Public Projects
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>Community Access
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>Unlimited Private Projects
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>Dedicated Phone Support
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-warning"></i></span>Free Subdomain
                                                            </li>
                                                            <li class="text-muted mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-times"></i></span>Monthly Status Reports
                                                            </li>
                                                        </ul><a href="#" class="btn w-100 btn-primary text-uppercase rounded-lg py-3">Buy now</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card bg-danger mb-5 mb-lg-0 rounded-lg shadow">
                                                    <div class="card-header">

<p class="card-title h5 text-white-50 text-uppercase text-center">
                                        Pro
                                    </p>

<h6 class="h1 text-white text-center">
                                        $29<span class="h6 text-white-50">/month</span>
                                    </h6>
                                                    </div>
                                                    <div class="card-body bg-light rounded-bottom">

<ul class="list-unstyled mb-4">
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span><strong>Unlimited Users</strong>
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>150GB Storage
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>Unlimited Public Projects
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>Community Access
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>Unlimited Private Projects
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>Dedicated Phone Support
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span><strong>Unlimited</strong> Free Subdomains
                                                            </li>
                                                            <li class="mb-3">
                                                                <span class="me-3"><i class="fa-solid fa-check text-danger"></i></span>Monthly Status Reports
                                                            </li>
                                                        </ul><a href="#" class="btn w-100 btn-primary text-uppercase rounded-lg py-3">Buy now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>

Copyright © www.tinymce-bootstrap-plugin.com