Is it possible to integrate a reveal.js presentation (or a single slide) into a bootstrap grid layout (using a single page, no iframes), so that the reveal-part of the page is only taking for example half of the webpages size?
I would like to do something like this:
<div class="container">
<div class="col-md-6">
<p>normal page content (not part of the reveal.js presentation)</p>
<button type="button" class="btn-primary">bootstrap button</button>
</div>
<div class="col-md-6">
<div class="reveal">
<div class="slides">
<section>
<h1>My Slide</h1>
</section>
</div>
</div>
</div>
</div>
What I get is a page where the slide is not displayed and the bootstrap styling is broken. Somehow I would need to isolate both css style sheets.
It also seems that reveal.js slides always fill the browser window / page completely (and get zoomed/scaled only to fit the page size when the browser-window gets resized for example)
What I tried so far:
- Setting the width and height of the reveal presentation (this had no effect)
- Putting the reveal.js part of the page into an iframe. This works but then I can not load data via angularjs.