We’ve recently completed a project for the largest franchisee of Dunkin’ Donut and Taco Bell restaurants in the US. Our project scope was to create a SharePoint resource which used style guides similar to common websites of today. Basically, responsive, mobile friendly and clear recognizable content sections. We thought to ourselves that this would prove to be an easy deployment and load Bootstrap on SharePoint. All we had to do was call the Bootstrap library, choose some classes or maybe even pull in a theme library from Bootswatch and we’d be up and running in no time at all.
Bootstrap on SharePoint Proved to be a Big Challenge
Much to our surprise nothing turned out the way we expected it to. Of course, with the majority of the hurdles occurring on Microsoft’s side. Not that they did anything wrong, in fact they were most helpful with addressing our needs, they just haven’t done what we were asking them to do before. Also the version of SharePoint we were using was going to be the hosted 2016 version. There’s a good chance by time you read this article a fix for what we requested would be in place. We basically needed to call the Bootstrap Javascript library. But we could not edit the source code. In order to do this we had to download Microsoft SharePoint Designer 2013. This version of the program did away with the WYSIWYG version, which was fine for us. The problem occurred when we took it one step further and clicked the edit source code icon in the ribbon. Which we were unable to do. We called Microsoft Tech Support.
Great Tech Support and Some Good Old Tinkering
Once we finally got the restriction lifted we easily called in the Bootstrap library and the site was on its way to looking like a custom solution. The only issue now was finding each element which needed to be styled then applying some nifty CSS tricks to get all the page components looking the way we liked. By the way if you open the pages (ASPX files) and edit them directly, as we did originally, you would quickly notice the SharePoint functionality would break. So, best to modify the master pages instead. Duh! SMACK – palm meets forehead! From there it was a matter of rolling out the changes to each of the pages or site sections for client approval.
Overall, we completed the project and we built a nice SharePoint intranet with nice a user friendly Bootstrap interface. We did overcome some hurdles which made this project a tremendous win for us. Check out the pictures of our build in our portfolio. If you would like more technical details about this project feel free to comment below or start a project with us.