htmlquartobootswatch

How to add HTML code to a Quarto website?

Basically, it should be possible to copy html-code directly into a Quarto document (.qmd) and then render it to an html-website.

I tried to do that and copied the following code from the Simplex Theme to a quarto website:

<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

However, the results only partially works:

enter image description here

Do I make something wrong?

Solution

  • For me it works as expected, eg.

    ---
title: "Test"
---

# make simplex button

<button type="button" class="btn btn-primary btn-lg">Large button</button>


# make card


<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

    Output:

    enter image description here

    I assume your problem is related to spaces, e.g. this works

    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

    while if there are white spaces in the beginning of a line, it does not work, e.g.

      <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

    Output: enter image description here