---
title: "Bootstrap skin demo"
description: "Bootstrap Demo"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bootstrap-demo/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/bootstrap-demo/index.md"
version: "6"
last_updated: "2022-03-30T07:08:51Z"
tokens: 333
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/bootstrap-demo/).
# Bootstrap skin demo

This demo shows an example form using Bootstrap together with TinyMCE and the Tiny *Bootstrap* skin and *Bootstrap* icon pack. It’s designed to closely match the *colors, forms, and buttons* of the default Bootstrap framework UI.

> **Note:** The focus outline on the editor is not part of the skin. Take a look in the JS tab below for inspiration on how to add it.
**Example**

```js
tinymce.init({
  selector: 'textarea#premiumskinsandicons-bootstrap',
  skin: 'bootstrap',
  icons: 'bootstrap',
  plugins: 'image lists link anchor charmap',
  toolbar: 'blocks | bold italic bullist numlist | link image charmap',
  menubar: false,
  setup: (editor) => {
    editor.on('init', () => {
      editor.getContainer().style.transition='border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
    });
    editor.on('focus', () => {
      editor.getContainer().style.boxShadow='0 0 0 .2rem rgba(0, 123, 255, .25)';
      editor.getContainer().style.borderColor='#80bdff';
    });
    editor.on('blur', () => {
      editor.getContainer().style.boxShadow='';
      editor.getContainer().style.borderColor='';
    });
  }
});
```