How to use bootstrap rows and columns in a quarto website?

[durraniu]

Description

Goal

I am trying to replicate a bootstrap website in quarto. You can find the source here. It looks like this:

Quarto website issues

For now, I included only one section with some changes in the navbar. It looks like this:

You can see that the layout is not the same: the image appears below the text and button.

Here's the source for quarto website:

index.qmd

---
page-layout: custom
---

```{=html}
  <!-- main image & intro text -->
  <section id="intro">
    <div class="container-lg">
      <div class="row g-4 justify-content-center align-items-center">
        <div class="col-md-5 text-center text-md-start">
          <h1>
            <div class="display-2">Black-Belt</div>
            <div class="display-5 text-muted">Your Coding Skills</div>
          </h1>
          <p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
          <a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
        </div>
        <div class="col-md-5 text-center d-none d-md-block">
          <!-- tooltip -->
          <span class="tt" data-bs-placement="bottom" title="Net Ninja Pro book cover">
            <img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
          </span>
        </div>
      </div>
    </div>
  </section>
```

_quarto.yml

project:
  type: website

website:
  title: "TITLE"
  back-to-top-navigation: true
  navbar:
    title: "umair"
    logo: <some logo image>
    logo-alt: "LOGO"
    background: light
    foreground: black
    search: true
    pinned: true
    collapse: true
    left:
      - href: index.qmd
        text: Home
        icon: house
      - href: about.qmd
        icon: file-person-fill
        target: _blank
      - text: "More"
        menu:
          - talks.qmd
          - about.qmd
    tools:
      - icon: linkedin
        href: https://ca.linkedin.com/company/presage-group-inc-
        target: _blank
      - icon: github
        href: https://github.com/Presage-Group
        target: _blank
  page-footer:
    left: "Copyright 2024, Presage Group Inc."
    background: dark
    right:
      - icon: linkedin
        href: https://ca.linkedin.com/company/presage-group-inc-
        target: _blank
      - icon: github
        href: https://github.com/Presage-Group
        target: _blank

format:
  html:
    theme: cosmo
    css: styles.css
    toc: false

How can I make the layout exactly as in the bootstrap website? Specifically, how to make the image appear on the right side instead of below the text and button?

[durraniu]

I came up with this that more or less achieves the goal, but I am unable to use multiple classes for a div unless I create nested divs with single classes. Any better ideas?

---
page-layout: custom
---

::: {.container-lg}

::: {.row}

:::: {.columns}

::: {.column width="50%"}

::: {.display-2}
Black-Belt
:::

::: {.display-5}
::: {.text-muted}
Your Coding Skills
:::
:::

```{=html}
<p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
```

:::

::: {.column width="50%"}
```{=html}
<span class="tt" data-bs-placement="bottom" title="Net Ninja Pro book cover">
    <img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
</span>
```
:::

::::

:::

:::

[mcanouil]

You might want to look at the page layout documentation: https://quarto.org/docs/output-formats/page-layout.html