SharePoint 2013: Use Twitter Bootstrap for SharePoint App development

If you have not heard of Bootstrap, it’s a CSS framework just like javaScript framework jQuery. Using Bootstrap, you can get various CSS classes that can be used in web design to make your web site looking consistent and impressive.

Introduction to Bootstrap

Bootstrap was initially developed by Twitter to enable consistent design across all Twitter tools. But now it’s the popular free CSS framework. Simply to understand the Bootstrap, let’s say you would like to add some styles in your web page. You are using HTML table in your web site and you want all tables to have same design/style all across the web site. In Bootstrap framework, you will find some CSS classes that you can use to have nice, impressive look for table all across the site. To apply default Bootstrap table style, just apply the CSS class “table”. If you would like to add hover style in the table add “table-hover” CSS in the the table class. Applying the following table styles results in the table shown in figure 1. The table has rounded corner, alternate color and nice/slick border width.

<table class="table table-bordered table-striped table-hover">
</table>

Figure 1: Table with round corner and slick look with Bootstrap CSS styles

 

You can check the default table styles provided by Bootstrap at this link: http://twitter.github.com/bootstrap/base-css.html#tables

While you will develop SharePoint Apps, you can easily integrate Bootstrap in your app and can get impressive look and feel.

 

How to integrate Bootstrap with SharePoint App

To use the Bootstrap in your app, first download the Bootstrap from Twitter Github. Once you extract the zip file, you will find three types of resources you need to use: CSS files, JavaScript Files and image files.

Step1: Copy the Bootstrap files in corresponding App folders (shown in Figure 2):

• Copy contents of the the the Bootstrap “css” folder to “content” folder in your app in Visual Studio. I would recommend you to copy min file(s) only.
• Copy contents of the Bootstrap “img” folder to the Visual Studio “Images” folder.
• Copy contents of the Bootstrap “js” folder to the Visual Studio “Scripts” folder. I would recommend  you to copy min file(s) only

Figure 2: Copy Bootstrap files in your Visual Studio App project

 

Step 2: Make Image/img folder related Changes

Bootstrap uses two images files which defines icons. These image files supposed to copy in App “Img” folder, as Bootstrap looks for these images in “img” folder. But SharePoint image folder name “Images” whereas Bootstrap Images folder name is “img”. So we need to update Bootstrap CSS file. Open the file “bootstrap.min.css” in the Visual Studio from “Content” folder. Then find for “.png” using Ctrl + F, and finally modify the image path from “img” to “Images” as shown below. You need to make changes in few places in the file:

Figure 3: Update Image Reference in Bootstrap Css file.

 

Step 3: Add Reference to the Bootstrap files in your page

The final step is to add reference to these Bootstrap reference in you page. Add the following references in your page in App under content place holder “PlaceHolderAdditionalPageHead” or any other suitable places:

<link rel="Stylesheet" type="text/css" href="../Content/bootstrap-responsive.min.css" />
<link rel="Stylesheet" type="text/css" href="../Content/bootstrap.min.css" />

<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>

 

Download Source Code

I’ve created a sample SharePoint 2013 App project with the Bootstrap integrated. You can download the sample project BootstrapTest from my Skydrive.

Conclusion

With the growing popularity of Bootstrap, we should  know about the framework and need to use it for appropriate applications. I’ve not tried Bootstrap with SharePoint webparts or full-trust applications but I’ll try to investigate in future. However, if you have not already tried Twitter Bootstrap please give a try, I do believe you’ll like it!