Bootstrap slides in impress.js

Question

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";
}

That is simply the `bootstrap.less` file, one can download (for instance on GitHub) https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less — Willem Van Onsem, Dec 03 '14 at 17:16
I tried to convert your example code into a code snippet. The issue might be that the custom.css as created by the less compiler isn't valid css making the browsers css parser simply give up. If you take a look at the custom.css in http://pastebin.com/raw.php?i=dTdEky6N you'll notice invalid html elements as `trdiv` occurring. — ckuijjer, Dec 05 '14 at 18:50
Actually if I try it on a local webserver, it simply works. I've added a `.btn .btn-primary` button the the first sheet and I do see bootstraps styling. Isn't it also an issue of Bootstrap setting a lot of the default styling on the `html` and `body` elements? These won't be applied in your case as they'll occur as `div.bootstrapslide html` and `div.bootstrapslide body` and never match any element. If this is simply about your own presentation you might take a look at scoped css (http://css-tricks.com/saving-the-day-with-scoped-css/) and use Firefox (http://caniuse.com/#feat=style-scoped) — ckuijjer, Dec 05 '14 at 19:07

score 1 · Answer 1 · answered Dec 03 '14 at 18:22

1

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:

div.bootstrapslide {
    // boostrapslide CSS here
}

or just import it at the beginning of the file and use the native bootstrap class:

@import "bootstrap.less";
// your CSS here

answered Dec 03 '14 at 18:22

nils

25,734
5
70
79

But the bootstrap code should be in the `div.bootstrapslide`. There is no extra css code. The `bootstrapslide` elements should be handled as if they are minipages in bootstrap style. – Willem Van Onsem Dec 04 '14 at 18:34
Maybe I am misunderstanding you. But I thought that the content of your bootstrap.less was the one that you linked to, so: `// Core variables and mixins @import "variables.less"; @import "mixins.less"; ...` Is that right? – nils Dec 05 '14 at 07:43
Have you tried this solution? Because it's basically the same point that ckuijjer is making, and apparently it works for him. – nils Dec 09 '14 at 12:34

score 0 · Answer 2 · edited Sep 08 '16 at 16:00

Try to delete these lines? It worked for me.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Bootstrap slides in impress.js

2 Answers2