Question

I’m trying to use Bootstrap inside a sharepoint site. Unfortunately the CSS styles are applying to the template’s HTML which is messing with the design a fair amount.

I know that everything I want affected by bootstrap is within #s4-workspace – does anyone know any CSS tricks I can use to apply bootstrap only to children of that element?

I’m not beneath shudder recompiling the LESS code encasing it like so:

#s4-workspace {
  @import "reset.less"
  // etc
}

But, naturally, I’d like to find a better solution if I can. That particular approach also doesn’t seem to work.

I cannot alter the CSS of the Sharepoint master site.

Any advice welcome!

Thanks,

Answer 1

The only real way of doing this is by using iframes or jQuery, if you want to apply only specific elements of the bootstrap perhaps edit the CSS rules so they apply to a different ID/Class.

For example, where it says body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}

In the bootstrap.css file simply change it to read .bootbody(or#bootbody) {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}

Joseph Silber said it better in this question.