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,

Improve this question
2
  • which version of SharePoint you are using? Are you adding bootstrap through SPFx/Content editor/Script editor webpart?
    – Ganesh Sanap - MVP
    Commented Mar 23, 2020 at 9:31
  • Check if this or this helps. let me know if any of this works for you.
    – Ganesh Sanap - MVP
    Commented Mar 23, 2020 at 9:37

1 Answer 1

Reset to default
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;
}
Improve this answer
4
  • Thanks. I have to override all the sharepoint css default properties ?
    – LeSchtroumpf
    Commented Mar 23, 2020 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
    Commented Mar 23, 2020 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...
    – LeSchtroumpf
    Commented Mar 23, 2020 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
    Commented Mar 23, 2020 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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