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">
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
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" />
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.
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!