columns in reveal.js with org-mode - org-mode

Question

How can I create columns in org-mode when I export this via org-reveal?
I found this link RevealJS with Bootstrap Columns. This seems to work, but how can I do this when using org mode? *** are already reserved for the structure of the document.

Answer 1

I found a solution in this presentation, where the column class is used.
To use it with org-reveal, I did the following:
#+REVEAL_HTML: <div class="column" style="float:left; width: 50%">
Column 1
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div class="column" style="float:right; width: 50%">
Column 2
#+REVEAL_HTML: </div>

Answer 2

I could find one possible solution. Probably not the most elegant one.
Columns can be created with bootstrap columns. So, as extra css, bootstrap.css should be loaded.
In the org file header:
#+REVEAL_EXTRA_CSS: bootstrap.css
and at the specific position in the org file:
#+REVEAL_HTML: <div class='span6'>
...
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div class='span6'>
...
#+REVEAL_HTML: </div>
Is there a more elegant way to do this?

Answer 3

Another solution below using Flexbox and 3 columns.
Minimal Org file:
#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js
#+REVEAL_EXTRA_CSS: ./local.css
* Section
** Slide
#+REVEAL_HTML: <div id="box-container">
#+REVEAL_HTML: <div id="box-1">
Box 1
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div id="box-2">
Box 2
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div id="box-3">
Box 3
#+REVEAL_HTML: </div>
#+REVEAL_HTML: </div>
Example CSS file local.css to be put in the same folder as the Org file:
#box-container {
display: flex;
}
#box-1 {
background-color: dodgerblue;
width: 33%;
}
#box-2 {
background-color: orangered;
width: 33%;
}
#box-3 {
background-color: green;
width: 33%;
}
Which produces the following slide with 3 columns: