How can I generate a Business Model Canvas with Bootstrap Cards and integrate it as html in a qmd-file?

Question

I want to generate a Business Model Canvas (BMC) with Bootstrap Cards but I'm struggling with the grid setup. I hope there is a solution. Any help is welcome. Sebastian

The Business Model Canvas should look like this:

My qmd file looks like this:

---
title: "Integrate a Business Model Canvas as Bootstrap Cards with html-code in a qmd-file"
author: Sebastian Sukstorf
format: 
    html: 
      css: custom_style.css
---

## Bootstrap Cards

> Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

In dem folgenden Beispiel habe ich eine `Bootstrap Cards` eingebunden.

::: {#fig-bmc-bootstrap}
```{=html}
<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Linke Bootstrap Cards</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Rechte Bootstrap Cards</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
</div>
```

Business Model Canvas 
:::