columns in reveal.js with 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.

Illtempered

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>

Prognostic

How were you able to view the source code for that presentation you linked? – Copeck

I'm not sure if the presentation was replaced or if I posted the wrong link. I remember the presentation was about org-reveal. – Prognostic

the link shows the html presentation but I don't see anything about org-reveal and I can't find the source on the presenter's website. – Copeck

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?

Illtempered

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:

Tetrahedral