---
title: "Using TinyMCE from the Tiny Cloud CDN with the Bootstrap framework"
description: "A guide on integrating TinyMCE from the Tiny Cloud into the Bootstrap framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/bootstrap-cloud/index.md"
version: "7"
last_updated: "2022-03-30T07:08:51Z"
tokens: 618
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/bootstrap-cloud/).
# Using TinyMCE from the Tiny Cloud CDN with the Bootstrap framework
Using TinyMCE with bootstrap does not require any special configuration.
The TinyMCE jQuery integration can be used with bootstrap. For information on using the jQuery integration, see: [jQuery Tiny Cloud integration](../jquery-cloud/).
This procedure creates a basic Bootstrap integration containing a TinyMCE editor.
## Setup
1. In an HTML file, add a source script for Bootstrap JS.
If the project loads Bootstrap from [https://www.bootstrapcdn.com/](https://www.bootstrapcdn.com/), use the script provided by the [Bootstrap CDN](https://www.bootstrapcdn.com/), which includes the `integrity` and `crossorigin` attributes.
2. To source TinyMCE from the Tiny Cloud, add the following `script` element to the `` of the document:
```html
```
Replace `no-api-key` in the source script (`
```
## Using TinyMCE in a Bootstrap dialog
To render TinyMCE instances inside Bootstrap UI dialogs, add the following code:
**Bootstrap 4 or below**
```js
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
```
**Bootstrap 5 or above**
```js
// Prevent Bootstrap dialog from blocking focusin
document.addEventListener('focusin', (e) => {
if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
e.stopImmediatePropagation();
}
});
```
This code is required because Bootstrap blocks all `focusin` calls from elements outside the dialog. For a working example, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/gRgaab).