Troubles with rem base settings

[jonasbirkelof]

I'm creating a css library for a project and need to make a documentation for it. It's kind of like Bootstrap and I want to make the docs similar to Bootstraps. For now I'm testing using the compiled bootstrap css. I have included the bootstrap css to the site and I can use html to show components like buttons like this:

index.md

<button class="btn btn-primary">Button</button>

The thing is that the font-size scaling of the theme set to the html tag (html { font-size: 125%; }) makes everything in Bootstrap larger than it's supposed to be. The button should be 38px high but is now 41px high and the font-size is also larger.

I have tried wrapping the button tag and reset the font-size but that doesn't work for paddings etc that also use the larger rem base.
I have also tried to unset the font-size for html, body and so on but that affects a lot of other elements on the site.

I want to use the styling of the Material theme and the best way would be to wrap my Bootstrap code like this and apply som styling to it to make it look like a 16px rem base:

.bs-demo {
    font-size: 16px; // Or something like that...
}

<div class="bs-demo">
    <button class="btn btn-primary">Button</button>
</div>

Any suggestions on how to tackle this?

[jonasbirkelof]

No one? :(