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

Tinymce Bootstrap Plugin - Bootstrap 4 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="bg-light">
                <div class="container py-4 px-3">

<div class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Buttons</h2>
                            <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 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-dark btn-lg mb-2 mb-md-0">Large button</button>
                            <button type="button" class="btn btn-secondary mb-2 mb-md-0">Normal button</button>
                            <button type="button" class="btn btn-light 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="fas fa-link ms-2"></i></a>
                            <button class="btn btn-primary mb-2 mb-md-0" type="submit">Submit Button<i class="fas 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 btn-block mb-2 mb-md-0"><i class="fas fa-user-secret me-2"></i>Block level button</button>
                                </div>
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-outline-danger btn-lg btn-block mb-2 mb-md-0">Another Block level button<i class="fas fa-user-nurse ms-2"></i></button>
                                </div>
                            </div>

<hr class="w-100">

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

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

<div class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Image</h2>
                            <img class="img-thumbnail d-block mx-auto img-fluid" alt="Beautiful Greek landscape" src="https://www.tinymce-bootstrap-plugin.com/bootstrap4/demo/plugin/assets/images/default.jpg" width:"400" height:"267">
                        </div>
                    </div>

<div class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Table</h2>
                            <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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Breadcrumbs</h2>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#"><i class="fas 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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Pagination</h2>
                            <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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Badge</h2>
                            <p class="h5 mb-4">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 badge-light">4</span>
                                    </button>
                                </div>
                                <div>
                                    <span class="badge badge-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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">
                            <h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Alert</h2>
                            <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 type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                        </div>
                    </div>

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

<h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Cards</h2>
                            <div class="container">
                                <div class="card-deck">
                                    <div class="card bg-light">
                                        <img src="https://www.tinymce-bootstrap-plugin.com/bootstrap4/demo/plugin/assets/images/default.jpg" width:"400" height:"267" class="card-img-top" alt="Tinymce Bootstrap image" />
                                        <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 class="card bg-light">
                                        <img src="https://www.tinymce-bootstrap-plugin.com/bootstrap4/demo/plugin/assets/images/default.jpg" width:"400" height:"267" class="card-img-top" alt="Tinymce Bootstrap" />
                                        <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 class="card bg-light">
                                        <img src="https://www.tinymce-bootstrap-plugin.com/bootstrap4/demo/plugin/assets/images/default.jpg" width:"400" height:"267" class="card-img-top" alt="Tinymce Bootstrap plugin" />
                                        <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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Modal</h2>
                            <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 class="row mb-4">
                        <div class="col pb-3 mb-4 bg-white border border-dark rounded">

<h2 class="h4 py-2 mx-n3 mb-4 rounded-top text-center text-white bg-dark text-uppercase font-weight-light">Full Pricing table Snippet</h2>
                    <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>

<p class="h1 text-white text-center">
							$0<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="mr-3"><i class="fas fa-check text-success"></i></span>Single User
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-success"></i></span>5GB Storage
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-success"></i></span>Community Access
                                                </li>
                                                <li class="text-muted mb-3">
                                                    <span class="mr-3"><i class="fas fa-times"></i></span>Unlimited Private Projects
                                                </li>
                                                <li class="text-muted mb-3">
                                                    <span class="mr-3"><i class="fas fa-times"></i></span>Dedicated Phone Support
                                                </li>
                                                <li class="text-muted mb-3">
                                                    <span class="mr-3"><i class="fas fa-times"></i></span>Free Subdomain
                                                </li>
                                                <li class="text-muted mb-3">
                                                    <span class="mr-3"><i class="fas fa-times"></i></span>Monthly Status Reports
                                                </li>
                                            </ul><a href="#" class="btn btn-block 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="mr-3"><i class="fas fa-check text-warning"></i></span><strong>5 Users</strong>
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>50GB Storage
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>Unlimited Public Projects
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>Community Access
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>Unlimited Private Projects
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>Dedicated Phone Support
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-warning"></i></span>Free Subdomain
                                                </li>
                                                <li class="text-muted mb-3">
                                                    <span class="mr-3"><i class="fas fa-times"></i></span>Monthly Status Reports
                                                </li>
                                            </ul><a href="#" class="btn btn-block 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>

<p class="h1 text-white text-center">
							$29<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="mr-3"><i class="fas fa-check text-danger"></i></span><strong>Unlimited Users</strong>
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>150GB Storage
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>Unlimited Public Projects
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>Community Access
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>Unlimited Private Projects
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>Dedicated Phone Support
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span><strong>Unlimited</strong> Free Subdomains
                                                </li>
                                                <li class="mb-3">
                                                    <span class="mr-3"><i class="fas fa-check text-danger"></i></span>Monthly Status Reports
                                                </li>
                                            </ul><a href="#" class="btn btn-block 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