bootstrap-5quartoreveal.js

Link not rendered as button in Quarto reveal.js

I would like to style a link inside of a Quarto reveal.js presentation as a button, similar to this thread: https://github.com/quarto-dev/quarto-cli/discussions/4920.

However, the links are not styled as buttons when rendered even though the correct Bootstrap classes are assigned in the HTML:

enter image description here

What am I doing wrong? I am assuming that the presentation includes the Bootstrap styling.

---
title: Links as Buttons
format: revealjs
---

## Intro

This link should appear as a button: 

[Conclusion](#sec-conclusion){.btn .btn-outline-primary .btn role="button"} 

[Conclusion](#sec-conclusion){.btn .btn-danger .btn role="button"} 

## Conclusion {#sec-conclusion}

Some text.
Solution

  • Bootstrap is not automatically included in revealjs, you have to do this, e.g. by using include-in-header:

    ---
title: Links as Buttons
format: revealjs
include-in-header: 
  text: |
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel ="stylesheet" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous">
---

## Intro

This link should appear as a button: 

[Conclusion](#sec-conclusion){.btn .btn-outline-primary .btn role="button"} 

[Conclusion](#sec-conclusion){.btn .btn-danger .btn role="button"} 

## Conclusion {#sec-conclusion}

Some text.

    Screenshot