I'm looking for a way to enable the Bootstrap style for certain slides in an impress.js presentation. I've tried to do this by adding the bootstrapslide style to these slides and compiling Boostrap Less such that it is applied only to these div items with that style. However the slides show little of the Boostrap Style.
This is probably because impress.js first empties all styles (h1, pre,...) and that bootstrap adds some attributes, but fails to make the changes visible. I have however no immediate solution to this problem.
Minimal Working Example:
presentation.htm:
<!doctype html>
<html lang="en">
<head>
<link href="http://netdna.impressjscdn.com/impressjs/0.5.3/css/impress-demo.css" rel="stylesheet" />
<!-- custom.css -->
<link href="http://pastebin.com/raw.php?i=dTdEky6N" rel="stylesheet" />
</head>
<body>
<div id="impress">
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<h1><center>Presentation</center></h1>
<span><center>November 30, 2014</center></span>
</div>
<div id="slide0" class="step slide bootstrapslide" data-x="1800" data-y="0">
<h1>Title1</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="slide1" class="step slide bootstrapslide" data-x="3600" data-y="0">
<h1>Title2</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.impressjscdn.com/impressjs/0.5.3/js/impress.js"></script>
<script>
impress().init();
</script>
</body>
</html>custom.css is compiled from custom.css and the Bootstrap Less package:
custom.less
div.bootstrapslide {
@import "bootstrap.less";
}
Your import is in the wrong place.
You are importing all your bootstrap code into
div.bootstrapslide. Instead, you could do one of two things:Copy the relevant bootstrap code directly into your class:
or just import it at the beginning of the file and use the native bootstrap class: