Bootstrap in CKEditor 5

When to use

If you want to create a Bootstrap or Tailwind column structure right in CKEditor 5, edit the content inside, and save blocks as templates for further block-by-block content building, Blk42 CKEditor 5 plugin is what you need.

How it works

Blk42 installs as a CKEditor 5 plugin utilizing its official API. It adds a new toolbar below the content where you can see all the options of currently selected block.

How to start using

Install CKEditor 5 plugin for that.

See the link above to explore more options including NPM package, ready-to-use bundle, and CDN script.

Open in CodePlay

Live Demo

JavaScript

CKEditor5WithBlk42.create(
  document.querySelector("#editor"),
  {
    apiKey: "BL42B5RRdemodemodemodemo",
    toolbar: [ 'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|', 'link', 'unlink' ]
  }
).then(editor => {
  window.editor = editor;
  var s = document.createElement("style");
  s.textContent = ".ck-content.ck-content{font-size:14px;color:#444;font-family:system-ui}";
  document.head.appendChild(s);
}).catch(error => {
  console.error("There was a problem initializing the editor.", error);
});

HTML

<link rel="stylesheet" href="https://democdn.com/styles/blk42-bootstrap.css">
<div class="wrap">
  <textarea id="editor">
<div class="container-fluid mt-3">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 py-2">
        <img class="img-fluid" src="https://flmngr.democdn.com/files/coffee/cup-4.jpg" alt="A cup of freshly brewed coffee">
      </div>
      <div class="col-12 col-lg-8 py-2">
        <h1>Coffee worth waking up for</h1>
        <p>Single-origin beans roasted to order and shipped within 24 hours, so every cup tastes like the day it left the roastery.</p>
        <p><a href="#">Shop single-origins</a> &middot; <a href="#">Build a subscription</a> &middot; <a href="#">Our story</a></p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid my-3" style="background-color: #eaeaea;">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2>Coffee the way it should be</h2>
        <p>Sourced with care, roasted with patience, and delivered at its freshest, so every cup tastes exactly as our roasters intended.</p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="container">
    <div class="features row">
      <div class="col-12 col-lg-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/location_on.png" alt="" width="48" height="48"></p>
        <h2>Single-origin</h2>
        <p>Ethically sourced from small farms in Ethiopia, Colombia and Guatemala, with full traceability on every bag.</p>
      </div>
      <div class="col-12 col-lg-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/local_fire_department.png" alt="" width="48" height="48"></p>
        <h2>Roasted to order</h2>
        <p>We roast the day we ship, never weeks ahead, so your beans arrive at their peak of flavour and aroma every time.</p>
      </div>
      <div class="col-12 col-lg-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/timer.png" alt="" width="48" height="48"></p>
        <h2>On your schedule</h2>
        <p>Pick weekly, fortnightly or monthly delivery, and pause, skip or cancel anytime from your account in seconds.</p>
      </div>
      <div class="col-12 col-lg-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/directions_car.png" alt="" width="48" height="48"></p>
        <h2>Greener shipping</h2>
        <p>Every plan ships free across the UK and EU in plastic-free packaging that's recyclable and home-compostable.</p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <h2>From farm to your cup</h2>
        <p>We work directly with smallholder farmers who have spent generations perfecting their craft. Every harvest is hand-picked at peak ripeness, then carefully sorted so only the best cherries ever make it into your bag.</p>
        <p>Our roasters profile each origin individually, dialling in time and temperature to draw out its natural character. Nothing is rushed and nothing is automated, so the beans you receive taste exactly as they were meant to.</p>
        <p>When your coffee arrives within a day of roasting, the difference is unmistakable. Set your favourite blend on repeat, adjust your delivery whenever life changes, and enjoy barista-quality coffee at home every morning.</p>
      </div>
      <div class="col-12 col-lg-3" style="background-color:#f9f5f4">
        <h2>Flavour profile</h2>
        <h4 class="mb-1">Body</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Acidity</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Sweetness</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Bitterness</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
      </div>
      <div class="data col-12 col-lg-3 pb-3">
        <img class="img-fluid" style="margin-top: 12px; margin-bottom: 12px" src="https://flmngr.democdn.com/files/coffee/plants/1.jpg" alt="Ethiopia Yirgacheffe coffee plant">
        <h3>Ethiopia Yirgacheffe</h3>
        <p>Bright and delicate, with clean acidity and a floral aroma.</p>
        <div class="row mx-1">
          <div class="col-5"><p>Origin</p></div>
          <div class="col-7"><p><strong>Ethiopia</strong></p></div>
        </div>
        <div class="row mx-1">
          <div class="col-5"><p>Region</p></div>
          <div class="col-7"><p><strong>Yirgacheffe</strong></p></div>
        </div>
        <div class="row mx-1">
          <div class="col-5"><p>Altitude</p></div>
          <div class="col-7"><p><strong>1,900 m</strong></p></div>
        </div>
        <div class="row mx-1">
          <div class="col-5"><p>Process</p></div>
          <div class="col-7"><p><strong>Washed</strong></p></div>
        </div>
        <div class="row mx-1">
          <div class="col-5"><p>Notes</p></div>
          <div class="col-7"><p><strong>Floral</strong></p></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid my-3 pt-3 pb-3" style="background-color:#999999">
  <div class="container">
    <div class="row">
      <div class="callout col-8 offset-2 text-center" style="background-color:#727272;background-image:url(https://flmngr.democdn.com/files/coffee/patterns/pattern-6.svg)">
        <h2>Ready to taste the difference?</h2>
        <p>Start your subscription today. Your first bag is roasted and shipped within 24 hours, and you can pause or cancel whenever you like.</p>
        <p><a href="#" class="btn btn-outline-light">Start now</a></p>
      </div>
    </div>
  </div>
</div>
  </textarea>
</div>

<script src="https://cloud.blk42.com/v/latest/sdk/ckeditor5-blk42.js"></script>

CSS

body { margin: 0; }

body {
  padding: 20px 20px 20px 50px;
  background: white;
}

.wrap {
  max-width: 1650px;
  margin: 0 auto;
}