locked
Sharepoint bootstrap branding RRS feed

  • Question

  • Hi,

    I am branding the sharepoint 2010 team site (with publishing feature turned ON) using bootstrap 3.0.

    I was able to design a page using bootstrap components but some components are not detecting by the sharepoint page. For example <aside> or <section> tags are not getting rendered in the page. I would like to understand if there is any right way to reference the bootstrap files. Seems like some classes are not getting detected. Please help.

    Tuesday, December 29, 2015 1:23 PM

Answers

  • in common scenarios files are uploaded to Style library doclib and referenced from there. Check in fiddler or in FF dev tools Network panel are all files downloaded correctly (not return 404 Not found or any other error). Also Sharepoint has own classes which may override classes with the same names in bootstrap - check css classes trace in browser's dev tools in order to see from where each class is applied.

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    • Marked as answer by Shanila m Saturday, April 2, 2016 8:27 AM
    Tuesday, December 29, 2015 3:31 PM
  • Hi Shanila,

    For a better troubleshooting, I would suggest you can try to use Internet Explorer Developer Tool to trace the page and check if there are something html or JS error in the page. In addition, please make sure the CSS file has been loaded in the page correctly.

    Here is a demo about design page with BootStrap in SharePoint, I suggest you can refer:

    ShareBoot for SharePoint 2010

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Shanila m Thursday, December 31, 2015 11:55 AM
    Wednesday, December 30, 2015 6:09 AM

All replies

  • Hi Shanila,

    Typically you would just include the link to the CSS file in your Master Page and set that as your Master Page in Site Settings:

    <link ref="/Style Library/Branding/bootstrap.css" rel="stylesheet" />

    But it looks like you've already done that if other elements are being rendered. Can we see the code snippet that isn't working?

    Tuesday, December 29, 2015 3:30 PM
  • in common scenarios files are uploaded to Style library doclib and referenced from there. Check in fiddler or in FF dev tools Network panel are all files downloaded correctly (not return 404 Not found or any other error). Also Sharepoint has own classes which may override classes with the same names in bootstrap - check css classes trace in browser's dev tools in order to see from where each class is applied.

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    • Marked as answer by Shanila m Saturday, April 2, 2016 8:27 AM
    Tuesday, December 29, 2015 3:31 PM
  • Hi Shanila,

    For a better troubleshooting, I would suggest you can try to use Internet Explorer Developer Tool to trace the page and check if there are something html or JS error in the page. In addition, please make sure the CSS file has been loaded in the page correctly.

    Here is a demo about design page with BootStrap in SharePoint, I suggest you can refer:

    ShareBoot for SharePoint 2010

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Shanila m Thursday, December 31, 2015 11:55 AM
    Wednesday, December 30, 2015 6:09 AM
  • Thanks Jerry, Sadomovalex and Sonny. I guess bootstrap css is loading correctly, for eg; btn-primary(bootstrap class) is working fine so bootstrap css is loading in the page. Anyways, I am not going to drill down to find the root of this, rather I will be using any other classes besides <section> or <aside> to get my work done. But thanks to you all.

    Thursday, December 31, 2015 11:59 AM