Conflicting CSS

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,

What's reset.less look like? Is it a lot of code or relatively small? (please say relatively small :s) — Cory Danielson, Nov 22 '11 at 16:45
i'm going to start trying to use Bootstrap with SharePoint, however we would have to use it sparingly and select certain components and we should prefix the LESS with something so base styles don't get applied to BODY, P, etc. Another thing to keep in mind is Bootstrap was designed for proper semantic markup as where SharePoint markup is one of the most inconsistent generated HTML, some webparts will generate ID with the same name, etc. I'll try to post my findings and hope it will help others. — phteven, Aug 05 '12 at 23:49

score 0 · Accepted Answer · edited May 23 '17 at 10:34

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.

Conflicting CSS

1 Answers1