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.

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?