Testing

Testing various Quarto features for kicks.

Bootstrap layout examples

Layout with Bootstrap 5.3’s CSS Grid enabled.¹

Column 1

Column 2

Column 3

Column 4

The section above in Quarto Markdown and rendered HTML, respectively:

Markdown
HTML

::: grid
::: g-col-3
Column 1
:::

::: g-col-3
Column 2
:::

::: g-col-3
Column 3
:::

::: g-col-3
Column 4
:::
:::

<div class="grid">
  <div class="g-col-3">
    <p>Column 1</p>
  </div>
  <div class="g-col-3">
    <p>Column 2</p>
  </div>
  <div class="g-col-3">
    <p>Column 3</p>
  </div>
  <div class="g-col-3">
    <p>Column 4</p>
  </div>
</div>

No grid classes works as expected. When style="--bs-columns: 3;" is added to outer grid element, inner divs are automatically sized such that they each take up equal parts of their container.

Auto-column

Markdown
HTML

::: {.grid style="--bs-columns: 3;"}
<div>
Auto-column
</div>
<div>
Auto-column
</div>
<div>
Auto-column
</div>
:::

<div class="grid" style="--bs-columns: 3;">
  <div>
    <p>Auto-column</p>
  </div>
  <div>
    <p>Auto-column</p>
  </div>
  <div>
    <p>Auto-column</p>
  </div>
</div>

Three column example from Bootstrap 5.3 CSS Grid docs

.g-col-4

Markdown
HTML

::: grid
::: g-col-4
.g-col-4
:::

::: g-col-4
.g-col-4
:::

::: g-col-4
.g-col-4
:::
:::

<div class="grid">
  <div class="g-col-4">
    <p>.g-col-4</p>
  </div>
  <div class="g-col-4">
    <p>.g-col-4</p>
  </div>
  <div class="g-col-4">
    <p>.g-col-4</p>
  </div>
</div>

Auto column example from Bootstrap 5.3 CSS Grid docs.

Markdown
HTML

::: grid
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
:::

<div class="grid">
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>1</p>
  </div>
</div>

Callout variations

Note

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

Tip With Caption

This is an example of a callout with a caption.

Expand To Learn About Collapse

This is an example of a ‘folded’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

Simple Warning

An example of a warning callout (.callout-warning) with appearance="simple".

Minimal Important

An example of an important callout (.callout-important) with appearance="minimal".

Tip No Icon

Here’s a tip callout with icon="false".

Simple Caution No Icon

This is a caution callout with appearance="simple" and icon="false". Notice anything? That’s right! simple + no icon = minimal

Minimal Custom

Can I do a custom callout with appearance="minimal"?

Callout Custom?

Not sure if this will work. I just applied .callout-custom.

Custom Simple?

What about with appearance="simple"? It works, but it’s the same as minimal.

Tooltip testing

Trying out custom Bootstrap tooltips. Note that, per the Bootstrap docs, tooltips are opt-in. The third-party library for them, Popper, is included in the bootstrap.js bundle used by Quarto, but you must initialize them in order for them to work. I’ve included the example enabling script from the Bootstrap tooltips docs in the header for this page to make them work here.

View enabling script

enable-tooltips.html

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", () => {
    // enable all tooltips with data-bs-toggle
    // see: https://getbootstrap.com/docs/5.3/components/tooltips/#example-enable-tooltips-everywhere
    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  });
</script>

Pinks

Pink shades using tint-color() and shade-color(). Foreground (i.e. text) color is dynamically determined using Bootstrap’s color-contrast() function² with a minimum contrast ratio of 4.5 (per WCAG 2.1 color-contrast standards).

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

Color swatches

Made using the code from Bootstrap 5.3 docs on color-palette classes, with a custom color map in my theme. See more color swatches here.

$body-color

$teal

$pink

$yellow

$blue-pale

$green-pale

$pink-pale

$purple-light

$yellow-light

$blue-light

Footnotes

Having CSS Grid enabled is the default page-layout behaviour in Quarto.↩︎
See the contrast-color() source code in the Bootstrap GitHub repo, and its documentation here.↩︎