0

I'm developping a sharepoint webpart and i would like to include boostrap for better design. I have had css into my solution and the design is good, no error. But, the css is applied for ALL the page ! I don't want bootstrap modify my sharepoint menu for example. How can i apply the boostrap css only on my webpart?

Thanks,

2
  • which version of SharePoint you are using? Are you adding bootstrap through SPFx/Content editor/Script editor webpart? Mar 23 '20 at 9:31
  • Check if this or this helps. let me know if any of this works for you. Mar 23 '20 at 9:37
0

Add an additional CSS file after Bootstrap CSS loads with the following styles. This should at least get you started. You will have to customize the overrides as you see fit.

#ms-designer-ribbon,
#ms-designer-ribbon *,
.ms-dlgTitle,
.ms-dlgTitle * {
   box-sizing: content-box;
}
4
  • Thanks. I have to override all the sharepoint css default properties ? Mar 23 '20 at 9:32
  • Yes but, the css provided should solve most of the conflicts. Depending on which components of Bootstrap you use, you will modify your overrides css file to accommodate.
    – AtariPixel
    Mar 23 '20 at 9:34
  • In fact, i want to use all the bootstrap into the webpart. With your solution, i have to override all default class but i will also override into my webpart... Mar 23 '20 at 9:54
  • That's fine, load the original Bootstrap CSS and then load the overrides I've provided. Adding additional overrides will depend on which Bootstrap components you want to use like modals, buttons, etc.
    – AtariPixel
    Mar 23 '20 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.