Responsive SharePoint – Activate Twitter Bootstrap for SharePoint 2010

A few weeks ago I attended SharePoint Saturday Austin, where I was lucky enough to sit in on a presentation given by Cathy Dew. I say lucky because not only did I learn a few new tricks about SharePoint branding, but also learned that the bright people at Summit 7 Systems had “ported” Twitter’s fabulous, responsive Bootstrap framework to SharePoint!

For those of you who may not have heard about Bootstrap, it’s a collection of tools that Twitter developed and released to the general public for free that uses HTML and CSS to create templates that promote consistency across different platforms. Or in their own words: “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” It has become wildly popular among front-end developers and is used by such heavy-weights as NASA and MSNBC. See http://builtwithbootstrap.com/ for more examples of sites built with Bootstrap.

Now as we all know SharePoint 2010 is mobile-ready, right? Because it even ships with a mobile template OOTB, right? The reality is that SharePoint’s support for mobile platforms is severely limited, as the page templates it uses cannot be customized and have no navigation or search capabilities. Luckily, there is a way to disable SharePoint’s mobile redirection, but that doesn’t change the fact that SharePoint’s default templates are not mobile-friendly. Anyone who has entertained a request from a client executive to make their corporate SharePoint page play nice with iPad knows the awful truth. Yes, you can create a mobile friendly master page and serve it up to the appropriate device, but there is a hefty overhead associated with this approach, especially since many times it also involves changing content layout and positioning. That’s where a framework like Bootstrap, which was designed to be responsive to all platforms and especially mobile, comes in handy.

Obviously I wanted to try this Bootstrap port on SharePoint immediately, but did not get a chance until recently. I went to the project’s site on CodePlex and without so much as reading the proverbial manual, I clicked on the download button, fired up SharePoint on my laptop, and rushed, yes rushed, to add it to my Solutions gallery. And then this happened:

“This control is currently disabled,” said the error.

Because the solution is third-party, it will have to run sandbox mode. A quick check in Central Administration shows that the Sandbox Service is indeed up and running.

 

So what gives? After an unsuccessful hour of tooling around the web trying to find someone who has experienced the same issue with Twitter Bootstrap for SharePoint, I decide to go back to the Codeplex site and check to see if perhaps there is an earlier version that might work with my SharePoint instance. This time, instead of clicking on the big, green, in-your-face “Download” button, I clicked on the Download tab in the navigation strip. Lo and behold! a file appeared called “TwitterBootstrap SharePoint 2010 – Sandbox Version” [Emphasis mine].

 

Needless to say, this file did activate correctly, so the next step was to set this page as the site master page, which I did using SharePoint Designer 2010. And voilĂ , responsive SharePoint by the Bootstraps!

Stay tuned for further adventures of SharePoint in Bootstrap Land! If anyone else has had exciting experiences with Bootstrap I’d love to hear about them in the comments!

April 29, 2013
  • Ben

    Can you put some screenshots up? Does the bootstrap change the entire master page?
    Or only the custom elements and css you add?