Bootstrap class in markdown table revealjs

Question

I would like to use a striped markdown table like here in my reveal.js presentation which is a bootstrap class. It seems to work for HTML output but not for reveal.js. Here is some reproducible code:

--- 
format: revealjs
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {.striped .hover}

Output:

Expected output looks like this:

So I was wondering if anyone knows how to add bootstrap classes to a markdown table in a reveal.js presentation in Quarto?

Answer 1

In revealjs format, Bootstrap styles are not shipped automatically, unlike html format. So to use Bootstrap classes, you need to load the bootstrap styles manually. And then use the bootstrap classes for tables i.e. .table, .table-striped, .table-hover.

--- 
format: revealjs
tbl-cap-location: bottom
include-in-header: 
  text: |
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
---

<style>
caption {
  text-align: center !important;
}
</style>

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {.table .table-striped .table-hover}

Also, you may need to change some CSS styles additionally, for example, the alignment of caption text to get similar tables as in the case of html format.

---