What is correct way to add my own CSS on top of bootstrap?

[mw44118]

Hi --

First of all, thanks for writing and sharing this!

Second, I want to use bootstrap and then also add my own CSS stuff on top. For example, I want to make the fonts much bigger on a mobile handset.

How should I do this? Right now, this is what I'm doing:

rst2html5 --bootstrap-css --stylesheet mine.css $RSTFILE > $OUTFILE

And I see my mine.css CSS in the output, but the bootstrap CSS overrides it.

[asermax]

@marianoguerra I'm giving this one a look. The issue I was able to identify was that the postprocessor that introduces bootstrap's styles is inserting it's style node at the end of the head, which in results gives it precedence when browsers decide the order to apply styles. Also, when going through the code I found that you're reinserting the default css node (on this line), even if it was inserted before by the translator. There isn't any comments on there, so I'm not sure the reason of this, but I asume it was because you were hitting this same issue, is that right?

I was thinking of forcing the bootstrap node to be the first style node somehow, I'll let you know how that goes.

[marianoguerra]

@asermax yep, the solution I think is to insert user defined styles after the postprocessor styles, I don't see a case for wanting your styles to be overwritten by postprocessor styles, maybe defer insertion, maybe call postprocessor and insert them after, maybe create some kind builtin postprocessor that allways runs last.

about the reinsertion of default css node, it seems to be a bug :)

[asermax]

Sorry for the delay, I've been a bit busy. I will open up a pull-request with some changes to fix this issue!

[marianoguerra]

@mw44118 please confirm it works as expected

[mw44118]

Yep, works perfect.

Gracias amigos!