Reveal.js slide inside bootstrap grid layout
Is it possible to integrate a show.js presentation (or one slide) into a bootstrap grid layout (using one page, no frames) so that part of the page expansion will take, for example, half the size of web pages?
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 showing and the bootstrap style is broken. Somehow I will need to isolate both CSS stylesheets.
It also seems that display.js slides always completely fill the browser window / page (and scale / scale only to fit the page size when, for example, the browser window is resized)
What I have tried so far:
- Setting the width and height of the show presentation (it had no effect)
- Inserting part of the opens.js page into an iframe. This works, but then I am unable to load data via angularjs.
source to share
Checking the CSS output it looks like show.js gives the slides fixed based on your window size. For example:width: 960px; height: 700px; zoom: 1.26309;
Bootstrap also tries to set a fixed width of the content through the container div. For the approximate screen size above, it uses:
@media (min-width: 1200px) .container {width: 1170px;}
So it tries to fit the 1170px container into a 960px slide (zoomed in to fill the screen) which will cause problems. Removing the container div fixes this problem in this simple example:
source to share